/* media/kit/tokens.css
   The only place raw values live. Templates and kit components use these custom properties only.

   Sources (read-only, 2026-09-30):
   - Web: Figma "Web Admin [Desktop]" G2aB2WfhRElVH8WWIQyemL
       collection "Day" VariableCollectionId:1553:5959 (primitives)
       collection "Theme" VariableCollectionId:2021:14908, mode "light" (semantic + component tokens)
       collection "Typography" VariableCollectionId:5060:7498, text styles "Day/*"
       collection "Grid" VariableCollectionId:1955:15976, mode "8px"
       effect styles: Modal, Side Panel, Slider knob
   - iOS: Figma "iOS" Q6qxbZGUKGibksOhltDvJ6
       collection "Theme" VariableCollectionId:595:17606, mode "Day.io"
       text styles (SF Pro), effect styles: Bottom sheet, Knob
   Token names follow the Figma variable names ("/" becomes "-").
   Fonts: web = Circular Std (real, extracted from the live app, media/kit/fonts).
          iOS = SF Pro in Figma; rendered with Inter as a stand-in (approximated, flagged). */

@font-face{font-family:"Circular Std";font-weight:400;src:url(fonts/circular-std-400.woff2) format("woff2")}
@font-face{font-family:"Circular Std";font-weight:500;src:url(fonts/circular-std-500.woff2) format("woff2")}
@font-face{font-family:"Circular Std";font-weight:700;src:url(fonts/circular-std-700.woff2) format("woff2")}
@font-face{font-family:"SF Stand-in";font-weight:400;src:url(fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"SF Stand-in";font-weight:500;src:url(fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:"SF Stand-in";font-weight:600;src:url(fonts/inter-600.woff2) format("woff2")}
/* kit 1.0.8 (2026-10-01, API cards): JetBrains Mono (SIL OFL 1.1, fonts/jetbrains-mono-OFL.txt) for code */

:root{
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  /* ---------- web primitives: Day collection ---------- */
  --gray-1000:#21242e; --gray-900:#2a2e3b; --gray-800:#373c4d; --gray-700:#3e4357; --gray-600:#575f79;
  --gray-500:#757e9c; --gray-400:#9ba1b7; --gray-300:#a7adc0; --gray-200:#cdd0db; --gray-150:#e1e3eb;
  --gray-100:#f0f0f2; --gray-50:#f7f7f7; --gray-0:#ffffff;
  --gray-1000-a96:#21242ef5; --gray-1000-a80:#21242ecc; --gray-1000-a12:#21242e1f; --gray-1000-a8:#21242e14; --gray-1000-a4:#21242e0a;
  --gray-900-a88:#2a2e3be0; --gray-0-a96:#fffffff5; --gray-0-a16:#ffffff29; --gray-0-a0:#ffffff00;
  --primary-900:#08416d; --primary-800:#0b4e83; --primary-700:#1161a1; --primary-600:#0780e0; --primary-500:#1e97f7;
  --primary-400:#4bacf9; --primary-300:#78c1fa; --primary-200:#a5d5fc; --primary-100:#d2eafd; --primary-50:#e9f5ff;
  --primary-a32:#1e97f752; --primary-a24:#1e97f73d; --primary-a16:#1e97f729; --primary-a12:#1e97f71f;
  --success-800:#007845; --success-700:#00a15c; --success-600:#00ca73; --success-100:#beffe3; --success-50:#e8fff5;
  --success-a16:#00ca7329; --success-a12:#00ca731f;
  --warning-800:#a37b01; --warning-700:#c49401; --warning-600:#dea701; --warning-500:#ebb101; --warning-100:#fef8e6; --warning-50:#fffcf4; --warning-a12:#ebb1011f;
  --danger-700:#7f3332; --danger-600:#da3837; --danger-500:#f53f3e; --danger-100:#ffe0e0; --danger-50:#fff0f0; --danger-a12:#f53f3e1f; --danger-a6:#f53f3e0f;
  --accent-grape:#642ca9; --accent-violette:#9649cb; --accent-ocean:#2541b2; --accent-carrot:#ff715b; --accent-orange:#f79256; --accent-lemon:#ffd166; --accent-jade:#0db06d;

  /* ---------- web semantic (Theme, light) ---------- */
  --title-text-color:var(--gray-700); --body-text-color:var(--gray-700); --label-text-color:var(--gray-600);
  --caption-text-color:var(--gray-500); --on-dark-text-color:var(--gray-0); --bg-color:var(--gray-0);
  --border-color:var(--gray-150); --icon-color:var(--gray-600); --logo-brand-color:var(--primary-500);
  --focused-border-color:var(--primary-a32); --hovered-bg-color:var(--gray-1000-a8);
  --border:1px; --focused-border:4px; --gap-sm:8px; --gap-md:16px; --gap-lg:24px;

  /* ---------- web spacing: Grid, 8px mode (size-N = N/100 * 8px) ---------- */
  --size-25:2px; --size-50:4px; --size-75:6px; --size-100:8px; --size-150:12px; --size-175:14px; --size-200:16px;
  --size-225:18px; --size-250:20px; --size-275:22px; --size-300:24px; --size-350:28px; --size-400:32px;
  --size-450:36px; --size-500:40px; --size-550:44px; --size-600:48px; --size-700:56px; --size-750:60px;
  --size-800:64px; --size-1000:80px; --size-1200:96px; --size-3000:240px; --size-5000:400px; --size-9999:9999px;
  --radius-sm:var(--size-50); --radius-md:8px; --radius-full:var(--size-9999);

  /* ---------- web type: text styles Day/* (family / weight / size / line / tracking) ---------- */
  --font-web:"Circular Std",system-ui,sans-serif;
  --font-kiosk:"Roboto",system-ui,sans-serif; /* the kiosk tablet app (Kiosk Hub 3303:59778): Roboto, OFL, kit 1.0.10 */
  --w-book:400; --w-medium:500; --w-bold:700;
  --t-display-normal:400 30px/36px var(--font-web);        --ls-display-normal:-0.8px;
  --t-headline-large:400 24px/32px var(--font-web);        --ls-headline-large:-0.6px;
  --t-headline-normal:400 20px/24px var(--font-web);       --ls-headline-normal:-0.2px;
  --t-title-normal:400 16px/20px var(--font-web);          --ls-title-normal:0;
  --t-label-large-bold:500 14px/18px var(--font-web);      --ls-label-large-bold:-0.12px;
  --t-label-large:400 14px/18px var(--font-web);           --ls-label-large:-0.08px;
  --t-label-normal:500 13px/16px var(--font-web);          --ls-label-normal:0;
  --t-label-caps:500 12px/16px var(--font-web);            --ls-label-caps:0.4px;
  --t-body-large-bold:500 15px/20px var(--font-web);       --ls-body-large-bold:0;
  --t-body-large:400 15px/20px var(--font-web);            --ls-body-large:0;
  --t-body-normal-bold:500 14px/20px var(--font-web);      --ls-body-normal-bold:-0.08px;
  --t-body-normal:400 14px/20px var(--font-web);           --ls-body-normal:-0.08px;
  --t-caption-normal-bold:700 12px/14px var(--font-web);   --ls-caption-normal-bold:-0.08px;
  --t-caption-normal:400 12px/14px var(--font-web);        --ls-caption-normal:-0.08px;
  --t-action-bold:500 14px/18px var(--font-web);           --ls-action-bold:-0.12px;

  /* ---------- web effects ---------- */
  --shadow-modal:0 1px 4px rgba(33,36,46,.04),0 8px 24px rgba(33,36,46,.12);
  --shadow-side-panel:-2px 0 16px rgba(33,36,46,.06);
  --shadow-knob:0 1px 4px rgba(33,36,46,.08),0 1px 2px rgba(33,36,46,.2);

  /* ---------- web components (Theme, light) ---------- */
  /* navigation */
  --nav-topbar-height:var(--size-700); --nav-topbar-hpad:var(--size-300); --nav-topbar-bg:var(--gray-50);
  --nav-topbar-border:var(--gray-150); --nav-topbar-icon:var(--gray-500); --nav-topbar-logo:var(--size-400);
  --nav-widget-height:var(--size-500); --nav-widget-bg:var(--gray-0); --nav-widget-border:var(--gray-150); --nav-widget-text:var(--gray-500);
  --nav-sidebar-bg:var(--gray-50); --nav-sidebar-border:var(--gray-150); --nav-sidebar-mini-width:var(--size-800);
  --nav-item-size:var(--size-400); --nav-item-icon:var(--size-250); --nav-item-radius:var(--size-50);
  --nav-item-icon-color:var(--gray-400); --nav-item-active-bg:var(--primary-a12); --nav-item-active-icon:var(--primary-500);
  --nav-item-counter-bg:var(--accent-carrot);
  /* button */
  --btn-md-height:var(--size-400); --btn-md-hpad:var(--size-150); --btn-lg-height:var(--size-450); --btn-lg-hpad:var(--size-200);
  --btn-sm-height:var(--size-350); --btn-sm-hpad:var(--size-100); --btn-gap:var(--size-75); --btn-radius:var(--size-50);
  --btn-primary-bg:var(--primary-500); --btn-primary-hover-bg:var(--primary-600); --btn-primary-down-bg:var(--primary-700); --btn-primary-text:var(--gray-0);
  --btn-positive-bg:var(--success-600); --btn-negative-bg:var(--danger-500);
  --btn-secondary-bg:var(--gray-0); --btn-secondary-text:var(--gray-700); --btn-secondary-border:var(--gray-200); --btn-secondary-hover-bg:var(--gray-1000-a4);
  --btn-tertiary-text:var(--primary-500); --btn-tertiary-hover-bg:var(--primary-a12);
  /* badge (status) */
  --badge-status-height:var(--size-250); --badge-status-hpad:var(--size-100); --badge-radius:var(--size-9999);
  --badge-new-bg:var(--primary-a12); --badge-new-text:var(--primary-600);
  --badge-warning-bg:var(--warning-100); --badge-warning-text:var(--warning-700);
  --badge-positive-bg:var(--success-a12); --badge-positive-text:var(--success-700);
  --badge-negative-bg:var(--danger-a6); --badge-negative-text:var(--danger-600);
  --badge-neutral-bg:var(--gray-50); --badge-neutral-text:var(--gray-700);
  --badge-counter-bg:var(--primary-500); --badge-counter-negative-bg:var(--danger-600);
  /* chips */
  --chip-md-height:var(--size-350); --chip-md-hpad:var(--size-75); --chip-radius:var(--size-50); --chip-bg:var(--gray-1000-a4); --chip-text:var(--gray-700);
  /* input / select */
  --input-height:var(--size-450); --input-hpad:var(--size-150); --input-radius:var(--size-50); --input-border:var(--gray-300);
  --input-text:var(--gray-700); --input-placeholder:var(--gray-500); --input-active-border:var(--primary-500);
  /* table */
  --table-head-height:var(--size-450); --table-head-text:var(--gray-500); --table-cell-height:var(--size-600);
  --table-cell-hpad:var(--size-150); --table-border:var(--gray-150); --table-cell-hover-bg:var(--gray-50); --table-cell-active-bg:var(--primary-50);
  --punch-pending-bg:var(--warning-50); --punch-valid-bg:var(--success-50); --punch-issue-bg:var(--danger-50);
  --approval-warning-icon:var(--warning-500); --approval-success-icon:var(--success-600); --approval-error-icon:var(--danger-500);
  /* toggles */
  --switch-width:var(--size-400); --switch-height:var(--size-200); --switch-on-bg:var(--primary-500); --switch-off-bg:var(--gray-50);
  --switch-off-border:var(--gray-300); --switch-off-knob:var(--gray-500); --switch-on-knob:var(--gray-0);
  --checkbox-size:var(--size-200); --checkbox-radius:var(--size-50); --checkbox-on-bg:var(--primary-500); --checkbox-off-border:var(--gray-300);
  /* segmented control */
  --seg-height:var(--size-450); --seg-hpad:var(--size-200); --seg-border:var(--gray-300); --seg-active-border:var(--primary-500);
  --seg-active-bg:var(--primary-a12); --seg-active-text:var(--primary-500); --seg-text:var(--gray-700);
  /* tooltip */
  --tooltip-bg:var(--gray-900-a88); --tooltip-text:var(--gray-150); --tooltip-radius:var(--size-50); --tooltip-hpad:var(--size-150); --tooltip-vpad:var(--size-100);
  /* modal / side panel */
  --modal-radius:var(--radius-md); --modal-header-height:var(--size-800); --modal-pad:var(--size-300); --modal-overlay:var(--gray-1000-a80);
  --side-panel-width:var(--size-5000); --side-panel-pad:var(--size-300);
  /* toast (alert/toast) */
  --toast-width:var(--size-5000); --toast-border-left:var(--size-25);
  --toast-success-bg:var(--success-50); --toast-success-border:var(--success-700); --toast-success-icon:var(--success-700);
  --toast-info-bg:var(--primary-50); --toast-info-border:var(--primary-500);
  --toast-warning-bg:var(--warning-100); --toast-warning-border:var(--warning-500);
  /* shift card */
  --shift-blue-bg:var(--primary-50);  --shift-blue-text:var(--primary-600);
  --shift-green-bg:var(--success-50); --shift-green-text:var(--success-700);
  --shift-yellow-bg:var(--warning-100); --shift-yellow-text:var(--warning-700);
  --shift-navy-bg:#f0f4ff; --shift-navy-text:var(--accent-ocean);
  --shift-purple-bg:#f6eaff; --shift-purple-text:var(--accent-grape);
  --shift-orange-bg:#fef4ee; --shift-orange-text:var(--accent-orange);
  --shift-ocean-bg:#f1fafb; --shift-ocean-text:#529a9d;
  --shift-olive-bg:#edf6ee; --shift-olive-text:#7e9e80;
  --shift-grey-bg:var(--gray-100); --shift-grey-text:var(--gray-400);
  /* timesheet */
  --timesheet-height:var(--size-800); --timesheet-border:var(--gray-150); --timesheet-label:var(--gray-600);

  /* ---------- iOS (Theme, mode Day.io) ---------- */
  --ios-gray-1000-a96:#21242ef5; --ios-gray-1000-a80:#21242ecc; --ios-gray-700:#3e4357; --ios-gray-600:#575f79;
  --ios-gray-500:#757e9c; --ios-gray-400:#9ba1b7; --ios-gray-200:#cdd0db; --ios-gray-150:#e1e3eb; --ios-gray-100:#f0f0f2;
  --ios-gray-50:#f7f7f7; --ios-gray-1000-a8:#21242e14; --ios-gray-1000-a4:#21242e0a; --ios-gray-0:#ffffff; --ios-black:#000000;
  --ios-primary-700:#1161a1; --ios-primary-600:#0780e0; --ios-primary-500:#1e97f7; --ios-primary-500-a12:#1e97f71f;
  --ios-success-700:#00a15c; --ios-success-500:#00ca73; --ios-success-500-a12:#00ca731f;
  --ios-warning-600:#c49401; --ios-warning-500:#ebb101; --ios-warning-500-a12:#ebb1011f; --ios-warning-900:#735600;
  --ios-danger-600:#da3837; --ios-danger-500:#f53f3e; --ios-danger-500-a12:#f53f3e1f;
  --font-ios:"SF Stand-in",-apple-system,system-ui,sans-serif;
  /* iOS text styles (SF Pro). weight size/line; tracking in px */
  --ti-title-large:400 28px/34px var(--font-ios);          --lsi-title-large:0.38px;
  --ti-title-normal:400 20px/25px var(--font-ios);         --lsi-title-normal:-0.45px;
  --ti-title-normal-em:600 20px/25px var(--font-ios);      --lsi-title-normal-em:-0.45px;
  --ti-title-small:600 17px/22px var(--font-ios);          --lsi-title-small:-0.43px;
  --ti-body-normal:400 15px/20px var(--font-ios);          --lsi-body-normal:-0.23px;
  --ti-body-em:500 15px/20px var(--font-ios);              --lsi-body-em:-0.23px;
  --ti-activity-normal:400 17px/22px var(--font-ios);      --lsi-activity-normal:-0.43px;
  --ti-activity-em:500 17px/22px var(--font-ios);          --lsi-activity-em:-0.43px;
  --ti-label-normal:600 15px/20px var(--font-ios);         --lsi-label-normal:-0.23px;
  --ti-input-l:400 17px/22px var(--font-ios);              --lsi-input-l:-0.43px;
  --ti-input-s:400 16px/21px var(--font-ios);              --lsi-input-s:-0.31px;
  --ti-button-large:600 17px/22px var(--font-ios);         --lsi-button-large:-0.43px;
  --ti-button-normal:500 15px/20px var(--font-ios);        --lsi-button-normal:-0.23px;
  --ti-footnote:400 13px/18px var(--font-ios);             --lsi-footnote:-0.08px;
  --ti-footnote-em:600 13px/18px var(--font-ios);          --lsi-footnote-em:-0.08px;
  --ti-caption:400 12px/16px var(--font-ios);              --lsi-caption:0;
  --ti-caption-em:500 12px/16px var(--font-ios);           --lsi-caption-em:0;
  --ti-badge-normal:500 13px/18px var(--font-ios);         --lsi-badge-normal:-0.08px;
  --ti-badge-small:500 12px/16px var(--font-ios);          --lsi-badge-small:0;
  --ti-weekday:600 11px/13px var(--font-ios);              --lsi-weekday:0.06px;
  --ti-day:400 16px/21px var(--font-ios);                  --lsi-day:-0.31px;
  --ti-day-em:600 16px/21px var(--font-ios);               --lsi-day-em:-0.31px;
  --ti-tab:500 12px/normal var(--font-ios);                --lsi-tab:-0.24px;
  --ti-time:300 48px/48px var(--font-ios);                 --lsi-time:-0.48px;
  --ti-token-large:400 32px/40px var(--font-ios);          --lsi-token-large:0;
  --shadow-ios-sheet:0 -2px 8px rgba(33,36,46,.08);
  --shadow-ios-knob:0 3px 1px rgba(0,0,0,.06),0 3px 8px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.04);
  --ios-screen-w:428px; --ios-screen-h:926px; --ios-screen-radius:55px;

  /* ---------- sampled from real rasters (recording, Kiosk Hub screenshots): approximated ---------- */
  --ios-greet-sky:#bfe0fb; --ios-greet-haze:#e7eef0; --ios-greet-warm:#fdf1c6; --ios-greet-cream:#fffaf0;
  --kiosk-green:#6ebf73; --kiosk-check:#6fd06d; --kiosk-cam:#2e3a44; --kiosk-done-border:rgba(255,255,255,.55);
  /* ---------- illustration (invented, flagged): drawn map ---------- */
  --map-land:#eef0e6;

  /* ---------- scene-only (not product UI) ---------- */
  --scene-touch:rgba(33,36,46,.28); --scene-touch-ring:rgba(255,255,255,.9);
  --scene-cursor-fill:#000000; --scene-cursor-stroke:#ffffff;
}