/* ASP Consulting — Track Mobile tokens (design_handoff_track_mobile §9).
 *
 * The phone app is drawn against its OWN palette, not the desktop semantic
 * layer. The handoff gives exact values for both themes and says so plainly:
 * "Dark mode is a token swap, not a redesign. Use the dark token set in §9 on
 * the same elements." So these are transcribed from that table verbatim, and
 * nothing here is derived, blended or approximated from the desktop tokens —
 * where the two happen to agree it is because the design says the same number
 * twice, not because one is pointing at the other.
 *
 * Theme follows the same switch as the rest of Track: theme-boot.js stamps
 * data-theme on <html> before the first rule matches, so there is no
 * prefers-color-scheme block here — the attribute is always present.
 *
 * WHAT IS FIXED IN BOTH THEMES, by design: --m-attention (attention is
 * attention), the rose wordmark dot (identity), and the toast (navy ground,
 * off-white text, in light and dark alike).
 */
:root, [data-theme="light"] {
  /* v4.0.0 (design export p77–p85, docs/ui-refresh/06 §3.1): the screen ground
     is white; More alone sits on Ground with white cards on it. */
  --m-bg: #FFFFFF;
  --m-ground: #F5F5F4;
  --m-card: #FFFFFF;
  --m-ink: #0C1139;
  --m-ink2: #4B4E66;
  --m-ink3: #6B6E80;
  --m-hair: #E6E6E3;
  --m-hair2: #C7C8C3;
  --m-chip: #EBEBE7;          /* the pre-v4 chip; contractor screens still use it */
  --m-segment: #F0F0EE;       /* segmented control track, menu hover */
  --m-grey-pill: #ECECEA;     /* Part issued, Money tag, meeting blocks */
  --m-grey-cool: #EEEFF1;     /* Not started */
  --m-bar: #FFFFFF;           /* the docked tab bar: opaque, no blur */
  --m-accent: #0A40C0;
  --m-on-accent: #FFFFFF;
  --m-primary: #0C1139;       /* primary buttons are Ink, not blue */
  --m-on-primary: #FFFFFF;
  --m-btn-disabled: #A4A6B2;
  --m-navy: #10328B;          /* stage pills, the Sign tag, CPD blocks */
  --m-on-navy: #FFFFFF;
  --m-blue-tint: #EDF1FB;
  --m-blue-tint-2: #DCE3F5;
  --m-ok: #1B6340;
  --m-ok-tint: #E6F0E8;
  --m-late: #C23C00;          /* late / overdue text */
  --m-late-tint: #FCEBDF;
  --m-alert-bg: #FCF1E9;
  --m-alert-line: #F6DCCB;
  --m-time-review: #7D93D3;
  --m-time-practice: #B5B6BD;
  --m-cal-other: #AEAEB0;
}

[data-theme="dark"] {
  --m-bg: #080B24;
  --m-card: #13173A;
  --m-ink: #F5F5F5;
  --m-ink2: #C3C5D4;
  --m-ink3: #9699AE;
  --m-hair: rgba(245, 245, 245, 0.12);
  --m-hair2: rgba(245, 245, 245, 0.30);
  --m-chip: rgba(245, 245, 245, 0.09);
  --m-bar: rgba(19, 23, 58, 0.74);
  --m-accent: #7C9BFF;
  --m-on-accent: #080B24;
  --m-ok: #5BC48F;
  /* v4.0.0 has no dark drawing (06 Q40); these follow the phone's navy set. */
  --m-ground: #080B24;
  --m-segment: rgba(245, 245, 245, 0.08);
  --m-grey-pill: rgba(245, 245, 245, 0.10);
  --m-grey-cool: rgba(245, 245, 245, 0.07);
  --m-primary: #F5F5F5;
  --m-on-primary: #080B24;
  --m-btn-disabled: rgba(245, 245, 245, 0.24);
  --m-navy: #3A5BC7;
  --m-on-navy: #FFFFFF;
  --m-blue-tint: rgba(124, 155, 255, 0.14);
  --m-blue-tint-2: rgba(124, 155, 255, 0.24);
  --m-ok-tint: rgba(91, 196, 143, 0.14);
  --m-late: #FF9A6B;
  --m-late-tint: rgba(255, 154, 107, 0.14);
  --m-alert-bg: rgba(255, 154, 107, 0.10);
  --m-alert-line: rgba(255, 154, 107, 0.32);
  --m-time-review: #8FA4E0;
  --m-time-practice: #8E8E93;
  --m-cal-other: #8E8E93;
}

/* v4.14.8 (Karan 27/10/2026: "why are the colours different when made smaller
   than full size?") — the phone's dark set above is NAVY whatever darkGround
   says, so a contractor on dark Grey saw navy on the phone and grey on the
   laptop. A CONTRACTOR's phone (body.tpl-contractor), and the phone chrome a
   narrow laptop window draws for anyone (.p4-desk — the header, tab bar and
   sheets mobile-nav.js mounts), take their dark colours from the desktop's own
   tokens instead, so Grey, Black and Navy look the same at every width. Light
   is the same white either way. ASP's phone app keeps its navy until Karan
   says otherwise (body.tpl-asp never matches this block). */
[data-theme="dark"] body.tpl-contractor,
[data-theme="dark"] .p4-desk {
  --m-bg: var(--ground);
  --m-ground: var(--ground);
  --m-card: var(--surface);
  --m-ink: var(--ink);
  --m-ink2: var(--ink-2);
  --m-ink3: var(--ink-3);
  --m-hair: var(--hair);
  --m-hair2: var(--hair-strong);
  --m-bar: var(--ground);
  --m-accent: var(--link);
  --m-on-accent: var(--ground);
  --m-primary: var(--ink-fill);
  --m-on-primary: var(--ink-fill-ink);
  --m-blue-tint: var(--tint-blue);
  --m-blue-tint-2: var(--tint-blue-2);
  --m-navy: var(--anchor);
  --m-on-navy: var(--ground);
  --m-scrim-rgb: var(--scrim-rgb);
}

/* Fixed in both themes (§9). --m-attention is for dots, rings and late figures
   only — never a large fill. */
:root {
  --m-attention: #FF5001;
  --m-rose: #F5385D;
  --m-toast-bg: #0C1139;
  --m-toast-ink: #F5F5F5;
  /* v4.14.9: the tile behind a company's own logo. Logos are drawn for paper,
     so it stays paper in both themes (a blue mark on the navy ground vanished). */
  --m-logo-tile: #FFFFFF;

  /* The only shadows the design allows (§9). Named so a screen cannot invent
     a sixth one without it being obvious in review. */
  --m-shadow-ring: 0 0 0 1px var(--m-hair);
  --m-shadow-tabbar: 0 0 0 1px var(--m-hair), 0 12px 30px rgba(12, 17, 57, 0.18);
  --m-shadow-centre: 0 6px 16px rgba(10, 64, 192, 0.35);
  --m-shadow-segment: 0 1px 3px rgba(12, 17, 57, 0.14);
  --m-shadow-knob: 0 1px 3px rgba(12, 17, 57, 0.30);
  --m-shadow-toast: 0 0 0 1px rgba(245, 245, 245, 0.14), 0 12px 30px rgba(12, 17, 57, 0.30);

  /* Motion (§9). Push/pop, tab fade, sheet open and toast all share one curve;
     sheet close is the only one that leaves quickly. */
  --m-ease: cubic-bezier(.2, .8, .2, 1);
  --m-ease-out: ease-out;
  --m-ease-in: cubic-bezier(.4, 0, 1, 1);
  --m-push: 280ms;
  --m-tab-fade: 200ms;
  --m-sheet-open: 340ms;
  --m-sheet-close: 220ms;
  --m-toast-in: 240ms;
  --m-tick: 160ms;
  --m-pill-done: 200ms;
  --m-unlock: 360ms;
}