/* 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"] {
  --m-bg: #F5F5F5;
  --m-card: #FFFFFF;
  --m-ink: #0C1139;
  --m-ink2: #4B4E66;
  --m-ink3: #6B6E80;
  --m-hair: #DEDEDA;
  --m-hair2: #C7C8C3;
  --m-chip: #EBEBE7;
  --m-bar: rgba(255, 255, 255, 0.78);
  --m-accent: #0A40C0;
  --m-on-accent: #FFFFFF;
  --m-ok: #1F7A4D;
}

[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;
}

/* 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;

  /* 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;
}