/* tokens.css — Eckstein Jobs "Liquid Glass" design tokens (R-1).
 * Light is the default; dark comes from :root[data-theme="dark"], set by the boot script in index.html
 * (Auto follows prefers-color-scheme). Backdrop-filter values are deliberately NOT tokens: they are
 * literal in css/glass.css (see the rules at the top of that file).
 * Client colours live in ONE place: COL in js/app.js (pins, chips and dots get them as an inline --c).
 */
:root{
  color-scheme: light;

  /* Canvas & text. Canvas = dominant colour of the Esri Light Gray Base tile at Winnipeg */
  --canvas:#EFEFEF;
  --label:#000;
  --on-label:#fff;
  --label-2:rgba(60,60,67,.62);
  --label-3:rgba(60,60,67,.30);
  --on-accent:#fff;

  /* Fills (used INSIDE glass; never glass on glass) */
  --fill-1:rgba(120,120,128,.20);
  --fill-2:rgba(120,120,128,.16);
  --fill-3:rgba(118,118,128,.12);
  --fill-4:rgba(116,116,128,.08);
  --separator:rgba(60,60,67,.18);
  --seg-thumb:#fff;
  --knob:#fff;
  --field:rgba(255,255,255,.55);          /* text fields inside glass */

  /* Colour (HIG iOS system colours) */
  --accent:rgb(0 136 255);
  --accent-soft:rgba(0,136,255,.14);
  --danger:rgb(255 56 60);
  --ok:rgb(52 199 89);
  --ok-ink:rgb(36 138 61);      /* green TEXT on light fills (job items Done / Booked) */
  /* Stages 1-7 (R-2: setup slots in at 2, the rest shift up one). JS only ever writes var(--stage-N) and
   * var(--stage-on-N) (glyph ink on that colour), so a colour change happens here only. */
  --stage-1:rgb(97 85 245);    /* ready (indigo) */
  --stage-2:rgb(0 186 199);    /* setup (teal, R-2) */
  --stage-3:rgb(172 127 94);   /* excavation (brown) */
  --stage-4:rgb(255 141 40);   /* base (orange) */
  --stage-5:rgb(255 204 0);    /* prep (yellow, black glyph ink) */
  --stage-6:rgb(203 48 224);   /* inspected (passed inspection, purple) */
  --stage-7:rgb(52 199 89);    /* poured (green) */
  --stage-on-1:#fff; --stage-on-2:#000; --stage-on-3:#fff; --stage-on-4:#fff; --stage-on-5:#000; --stage-on-6:#fff; --stage-on-7:#fff;
  --warn:rgb(230 118 0);       /* job items: "Required" accents (flag flash) */
  /* Selected item-switch segments carry their tone on a tinted thumb with a matching ink (>= 4.5:1 at 12 px), and the
   * orange texts (lock note, card items) use --warn-ink: plain orange on the white / grey thumb was ~2.2-3:1. */
  --warn-ink:rgb(163 74 0);
  --warn-thumb:rgb(255 234 208);
  --ok-thumb:rgb(221 245 227);
  --ok-thumb-ink:rgb(24 110 46);
  --uns-ring:#b45309;          /* unscheduled (as before) */
  --pend-ring:#7c3aed;         /* pending 9000+ (as before) */
  --pin-ring:#fff;
  --route:rgb(0 136 255);
  --route-casing:#ffffff;

  /* Glass paint */
  --glass-tint:rgba(250,250,252,.64);      /* large/regular surfaces */
  --glass-tint-sm:rgba(255,255,255,.52);   /* icon capsule, tab bar, toast */
  --glass-opaque:rgba(250,250,252,.97);    /* large sheet, Solid mode, no-support fallback */
  --glass-rt:rgba(250,250,252,.90);        /* reduced transparency */
  --glass-hc:#fff;                         /* Increase Contrast */
  --glass-shine:inset 0 16px 16px -16px rgba(255,255,255,.75), inset 0 -16px 16px -16px rgba(255,255,255,.60);
  --glass-edge:0 0 0 .5px rgba(0,0,0,.10);
  --glass-lift:0 2px 6px -2px rgba(0,0,0,.12), 0 10px 28px -8px rgba(0,0,0,.18);
  --glass-lift-sm:0 1px 3px rgba(0,0,0,.10), 0 6px 16px -6px rgba(0,0,0,.16);
  --glass-glow:rgba(255,255,255,.30);
  /* Specular ring geometry (sohumsuthar, light-mode weights) */
  --rim-lit:1; --rim-dark:.30; --rim-hold:1px; --rim-fade:15px; --rim-side:6px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --scrim:rgba(0,0,0,.18);

  /* Shape (concentric: inner = outer - padding) */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-acc:28px; --r-sheet:32px; --r-sheet-lg:38px; --r-pill:999px;

  /* Space & geometry */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  --hit:44px;
  --inset:16px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --tabbar-h:62px;
  --tabbar-b:max(16px, calc(var(--safe-b) - 13px));
  --acc-h:116px;                           /* JS writes the measured accessory height inline on <html> */
  --attr-b:calc(var(--tabbar-b) + var(--tabbar-h) + 8px + var(--acc-h) + 10px);
  --sheet-top:max(10px, calc(var(--safe-t) + 10px));
  --panel-w:380px;

  /* Type (HIG iOS sizes) */
  --font:-apple-system, system-ui, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --t-large:700 34px/41px var(--font);
  --t-title2:700 22px/28px var(--font);
  --t-title3:600 20px/25px var(--font);
  --t-headline:600 17px/22px var(--font);
  --t-body:400 17px/22px var(--font);
  --t-callout:400 16px/21px var(--font);
  --t-subhead:400 15px/20px var(--font);
  --t-subhead-em:600 15px/20px var(--font);
  --t-footnote:400 13px/18px var(--font);
  --t-caption:400 12px/16px var(--font);
  --t-caption-em:600 12px/16px var(--font);
  --t-tab:500 11px/13px var(--font);

  /* Motion */
  --ease-out:cubic-bezier(.32,.72,0,1);
  --ease-magnetic:cubic-bezier(.34,1.56,.64,1);
  --ease-std:cubic-bezier(.4,0,.6,1);
  --ease-quick:cubic-bezier(.28,.11,.32,1);
  --spring-ios:linear(0, 0.021 2.5%, 0.074 5%, 0.147 7.5%, 0.496 17.5%, 0.648 22.5%, 0.712 25%, 0.817 30%, 0.892 35%, 0.944 40%, 0.987 47.5%, 1.008 57.5%, 1);
  --d-ios:760ms;
  --spring-snappy:linear(0, 0.021 2.5%, 0.075 5%, 0.148 7.5%, 0.495 17.5%, 0.644 22.5%, 0.762 27.5%, 0.81 30%, 0.884 35%, 0.935 40%, 0.979 47.5%, 1.002 57.5%, 1.003 87.5%, 1);
  --d-snappy:490ms;
  --spring-bouncy:linear(0, 0.029 2.5%, 0.103 5%, 0.204 7.5%, 0.55 15%, 0.653 17.5%, 0.745 20%, 0.823 22.5%, 0.887 25%, 0.938 27.5%, 0.977 30%, 1.006 32.5%, 1.037 37.5%, 1.046 42.5%, 1.032 52.5%, 1.003 70%, 0.999 97.5%, 1);
  --d-bouncy:820ms;
  --d-press:120ms;
}

/* Browsers without linear() (older than Safari 17.2 / Chrome 113) fall back to cubic curves */
@supports not (transition-timing-function: linear(0, 1)){
  :root{
    --spring-ios:cubic-bezier(.32,.72,0,1);
    --spring-snappy:cubic-bezier(.32,.72,0,1);
    --spring-bouncy:cubic-bezier(.34,1.56,.64,1);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --canvas:#474749;                          /* dominant Esri Dark Gray Base colour */
  --label:#fff;
  --on-label:#000;
  --label-2:rgba(235,235,245,.70);
  --label-3:rgba(235,235,245,.30);
  --fill-1:rgba(120,120,128,.36);
  --fill-2:rgba(120,120,128,.32);
  --fill-3:rgba(118,118,128,.24);
  --fill-4:rgba(116,116,128,.18);
  --separator:rgba(84,84,88,.45);
  --seg-thumb:rgb(99 99 102);
  --field:rgba(0,0,0,.22);
  --accent:rgb(0 145 255);
  --accent-soft:rgba(0,145,255,.22);
  --danger:rgb(255 66 69);
  --ok:rgb(48 209 88);
  --ok-ink:rgb(48 209 88);
  --stage-1:rgb(109 124 255);
  --stage-2:rgb(0 205 218);                  /* setup (teal) */
  --stage-3:rgb(183 138 102);
  --stage-4:rgb(255 146 48);
  --stage-5:rgb(255 214 0);
  --stage-6:rgb(219 52 242);
  --stage-7:rgb(48 209 88);
  --warn:rgb(255 159 10);
  --warn-ink:rgb(255 200 120);
  --warn-thumb:rgb(110 66 8);
  --ok-thumb:rgb(28 92 44);
  --ok-thumb-ink:rgb(150 240 170);
  --route:rgb(0 145 255);
  --route-casing:rgba(0,0,0,.4);
  --glass-tint:rgba(255,255,255,.134);       /* sohumsuthar regular, dark */
  --glass-tint-sm:rgba(255,255,255,.134);
  --glass-opaque:rgba(28,28,30,.97);
  --glass-rt:rgba(28,28,32,.85);
  --glass-hc:#000;
  --glass-shine:inset 0 16px 16px -16px rgba(255,255,255,.30), inset 0 -16px 16px -16px rgba(255,255,255,.30);
  --glass-edge:0 0 0 .5px rgba(255,255,255,.06);
  --glass-lift:0 2px 6px -2px rgba(0,0,0,.30), 0 8px 24px -8px rgba(0,0,0,.40);
  --glass-lift-sm:0 1px 3px rgba(0,0,0,.30), 0 4px 12px -4px rgba(0,0,0,.35);
  --glass-glow:rgba(255,255,255,.12);
  --rim-lit:.33; --rim-dark:.36;
  --scrim:rgba(0,0,0,.32);
}

/* "Tinted" = the in-app equivalent of iOS 26.1's Tinted / Reduce Transparency: frostier, more opaque */
:root[data-glass="tinted"]{ --glass-tint:rgba(250,250,252,.90); --glass-tint-sm:rgba(250,250,252,.90); }
:root[data-theme="dark"][data-glass="tinted"]{ --glass-tint:rgba(28,28,32,.85); --glass-tint-sm:rgba(28,28,32,.85); }