/* Field Ops (8003) v2 "Sanjal" — design tokens. The ONLY file with colour literals.
   Spec: docs/design-system/Field/FIELD_DESIGN.md §2–§4. Day by default, Gate (dark) when the
   phone says dark, or when <html data-theme="gate"> (scanner, account switch).
   Platform: <html data-platform="ios|android"> is set by js/platform.js before first paint. */

:root {
  color-scheme: light;

  /* Day */
  --fld-bg: #F6F3EE;
  --fld-surface: #FFFFFF;
  --fld-surface2: #ECE7E0;
  --fld-bar: var(--fld-surface);   /* the floating tab bar body: white on Day, one step lighter than the page in Gate (decision P6-22) */
  --fld-ink: #1A1714;
  --fld-ink2: #5C554D;
  --fld-line: #DAD3CA;
  --fld-control: #8A8279;
  --fld-brand: #B4381A;
  --fld-onbrand: #FFFFFF;
  --fld-mark: #E2622C;
  --fld-onmark: #1A1714;
  --fld-ok: #0B7A4B;
  --fld-okbg: #DDF0E6;
  --fld-onok: #FFFFFF;
  --fld-bad: #BB2A1C;
  --fld-badbg: #FAE3DF;
  --fld-hold: #8A5A00;
  --fld-holdbg: #FFF0CC;
  --fld-glass: rgba(255, 255, 255, .78);
  --fld-glass-bar: rgba(255, 255, 255, .97);   /* (.97, 2026-10-14: text under it must not show through) the floating iPhone tab bar and Scan button; one step lighter than the ground in Gate (decision P6-22) */
  --fld-scrim: rgba(20, 17, 15, .5);
  --fld-shadow: 0 8px 28px rgba(26, 23, 20, .12);
  /* v3 (A+B mix): the one bold block per screen (hero). Ink in Day, logo orange in Gate. */
  --fld-hero-bg: #1A1714;
  --fld-hero-ink: #F6F3EE;
  --fld-hero-ink2: #CFC6BC;
  --fld-hero-track: #3A332D;
  --fld-hero-fill: #E2622C;
  --fld-meter: #1A1714;         /* bars in rows are ink, not brand (orange is for the one main action) */
  --fld-meter-track: #E3DDD5;
  --fld-nav: #EDE8E1;           /* Android docked navigation bar */
  --fld-fab: #1A1714;           /* Scan button */
  --fld-onfab: #F6F3EE;
  --fld-fab-icon: var(--fld-mark);   /* Scan icon: logo orange on the ink button (Day); the Night blocks switch it to onfab */
  --fld-focus: var(--fld-mark);
  --fld-logo-day: block;      /* the full logo comes in a Day and a Gate version; the theme shows one (static/field/images/logo-full-*.png) */
  --fld-logo-gate: none;

  /* Type: iPhone scale (Apple HIG). Sizes in rem so the phone's text-size setting scales them. */
  --fld-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fld-num: var(--fld-font);   /* v3: the phone's own font for numbers and titles (SF Pro / Roboto); Barlow retired */
  --fld-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fld-fs-title: 2.125rem;   /* 34 large title */
  --fld-fs-hero: 2.75rem;     /* 44 hero number, one per screen */
  --fld-fs-sheet: 1.25rem;    /* 20 sheet / auth title */
  --fld-fs-body: 1.0625rem;   /* 17 rows, buttons, inputs */
  --fld-fs-sub: .8125rem;     /* 13 secondary line */
  --fld-fs-cap: .75rem;       /* 12 caption, section label: the floor */
  --fld-fs-amt: 1.125rem;     /* 18 row amounts */

  /* Space, shape, motion */
  --fld-gutter: 1rem;
  --fld-column: 32rem;        /* the phone column; wider screens still get one centred column */
  --fld-ctl: 3rem;            /* 48 control height */
  --fld-tap: 2.75rem;         /* 44 minimum tap target */
  --fld-r-card: 1.25rem;
  --fld-r-ctl: .875rem;
  --fld-r-sheet: 1.75rem;
  --fld-dur-press: 120ms;
  --fld-dur-sheet: 260ms;
  --fld-dur-move: 320ms;
  --fld-dur-rise: 220ms;      /* a screen's blocks rising in (motion.css) */
  --fld-dur-page: 260ms;      /* a pushed screen sliding in or out */
  --fld-dur-count: 400ms;     /* a hero figure counting up, once per load */
  --fld-ease: cubic-bezier(.2, .9, .25, 1);
  /* The ONE spring (decision P6-9): a gentle overshoot, under 400 ms, used only for three moments: the Done check, the hold-to-confirm completion and the Admit success.
     Everything else is calm (--fld-ease). A cubic-bezier overshoot where the phone cannot do a linear() spring (Chrome 113+, Safari 17.2+ can). */
  --fld-dur-spring: 380ms;
  --fld-ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --fld-safe-top: env(safe-area-inset-top, 0px);
  --fld-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fld-tabbar-h: 3.875rem;   /* 62, iPhone floating capsule and the round Scan button */
}

/* Android: Material 3 scale and shape */
:root[data-platform="android"] {
  --fld-fs-title: 1.75rem;    /* 28 */
  --fld-fs-hero: 2.5rem;      /* 40 */
  --fld-fs-sheet: 1.375rem;   /* 22 */
  --fld-fs-body: 1rem;        /* 16 */
  --fld-fs-sub: .875rem;      /* 14 */
  --fld-r-card: 1rem;
  --fld-tabbar-h: 5rem;       /* 80, M3 docked navigation bar */
}

/* Gate (dark). Same values in the two blocks: one for "the phone says dark", one for a forced choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    color-scheme: dark;
    --fld-bg: #120E0C;
    --fld-surface: #1E1815;
    --fld-surface2: #2A231E;
    --fld-bar: var(--fld-surface2);
    --fld-ink: #F7EFE6;
    --fld-ink2: #B9AEA3;
    --fld-line: #34302B;
    --fld-control: #7A7168;
    --fld-brand: #FF9A6B;
    --fld-onbrand: #1A0F0A;
    --fld-ok: #5BD69A;
    --fld-okbg: #0E2A1F;
    --fld-onok: #04150D;
    --fld-bad: #FF8A7A;
    --fld-badbg: #33130F;
    --fld-hold: #F2B544;
    --fld-holdbg: #2D2108;
    --fld-glass: rgba(30, 24, 21, .78);
    --fld-glass-bar: rgba(42, 34, 29, .97);
    --fld-scrim: rgba(0, 0, 0, .6);
    --fld-shadow: 0 8px 28px rgba(0, 0, 0, .4);
    --fld-hero-bg: #E2622C;
    --fld-hero-ink: #1A0F0A;
    --fld-hero-ink2: #1A0F0A;
    --fld-hero-track: rgba(26, 15, 10, .22);
    --fld-hero-fill: #1A0F0A;
    --fld-meter: #F7EFE6;
    --fld-meter-track: #3A332D;
    --fld-nav: #1A1512;
    --fld-fab: #E2622C;
    --fld-onfab: #1A0F0A;
    --fld-fab-icon: var(--fld-onfab);
    --fld-logo-day: none;
    --fld-logo-gate: block;
  }
}
:root[data-theme="gate"], .fld-gate {
  color-scheme: dark;
  --fld-bg: #120E0C;
  --fld-surface: #1E1815;
  --fld-surface2: #2A231E;
  --fld-bar: var(--fld-surface2);
  --fld-ink: #F7EFE6;
  --fld-ink2: #B9AEA3;
  --fld-line: #34302B;
  --fld-control: #7A7168;
  --fld-brand: #FF9A6B;
  --fld-onbrand: #1A0F0A;
  --fld-ok: #5BD69A;
  --fld-okbg: #0E2A1F;
  --fld-onok: #04150D;
  --fld-bad: #FF8A7A;
  --fld-badbg: #33130F;
  --fld-hold: #F2B544;
  --fld-holdbg: #2D2108;
  --fld-glass: rgba(30, 24, 21, .78);
  --fld-glass-bar: rgba(42, 34, 29, .97);
  --fld-scrim: rgba(0, 0, 0, .6);
  --fld-shadow: 0 8px 28px rgba(0, 0, 0, .4);
  --fld-hero-bg: #E2622C;
  --fld-hero-ink: #1A0F0A;
  --fld-hero-ink2: #1A0F0A;
  --fld-hero-track: rgba(26, 15, 10, .22);
  --fld-hero-fill: #1A0F0A;
  --fld-meter: #F7EFE6;
  --fld-meter-track: #3A332D;
  --fld-nav: #1A1512;
  --fld-fab: #E2622C;
  --fld-onfab: #1A0F0A;
  --fld-fab-icon: var(--fld-onfab);
  --fld-logo-day: none;
  --fld-logo-gate: block;
}

/* Fixed in both themes: things drawn over a camera, a coloured button, or a switch knob. */
:root {
  --fld-white: #FFFFFF;
  --fld-fill: rgba(255, 255, 255, .28);          /* hold-to-confirm progress on a coloured button */
  --fld-glass-on-dark: rgba(255, 255, 255, .14); /* round buttons over the camera */
  --fld-lift: rgba(0, 0, 0, .18);                /* the one hairline lift inside a segmented track */
  --fld-knob: #FFFFFF;
  --fld-knob-shadow: rgba(0, 0, 0, .3);
}

/* Result takeover colours stay fixed in both themes (a signal, not a surface). */
:root {
  --fld-result-ok: #12804F;
  --fld-result-bad: #A3241A;
  --fld-result-ink: #FFFFFF;
  --fld-result-btn: #FFFFFF;
  --fld-result-btn-ink: #1A1714;
}

/* The spring as a linear() curve where the phone supports it (about 4% overshoot, settled in one pass); the cubic-bezier above is the fallback. */
@supports (animation-timing-function: linear(0, 1)) {
  :root { --fld-ease-spring: linear(0, 0.18 6%, 0.58 14%, 0.9 22%, 1.04 30%, 1.05 36%, 1.02 46%, 0.995 58%, 1.002 72%, 1); }
}