/* Track v4.0.0 — the UI refresh (Karan's design export, 22/10/2026;
 * docs/ui-refresh/06-phone-components-tokens.md §3, 07-motion.md).
 *
 * Loaded after theme.css. It ADDS the refresh's tokens and re-points a few of
 * theme.css's light values to the component sheet (p85). Nothing here is a
 * new colour family: the sheet's ten swatches are Ink, Navy, Blue, Blue tint,
 * Orange, Late text, Green, Line, Muted, Ground.
 *
 * "Navy carries the brand and primary actions. Orange means one thing: act now
 *  or late. Green only for paid and done." — p85
 */

:root:not([data-theme="dark"]), [data-theme="light"] {   /* not dark: theme.css owns the dark values */
  /* p85 values that move */
  --hair: #E6E6E3;            /* Line (was #DEDEDA) */
  --hair-soft: #E6E6E3;       /* folded into Line: 2 points apart was noise */
  --rail-border: #E6E6E3;
  --rail-bg: #F5F5F4;         /* Ground */
  --ink-2: #4B4E66;           /* secondary text, cool (was warm #55564F) */
  --ink-3: #6B6E80;           /* Muted: passes 4.5:1 on white (#8A8B85 did not) */
  --status-ok-ui: #1B6340;    /* Green (was #1F7A4D) */
  --status-overdue-ink: #C23C00;

  /* New on the sheet */
  --late: #C23C00;            /* late / overdue text, destructive text, error borders */
  --late-tint: #FCEBDF;       /* Late tag, Overdue pill */
  --alert-bg: #FCF1E9;
  --alert-line: #F6DCCB;
  --ok-tint: #E6F0E8;         /* Complete / Paid pill, leave blocks, Site source chip */
  --blue-tint: #EDF1FB;       /* selected row; In progress / Check / Invoiced pills */
  --blue-tint-2: #DCE3F5;     /* Review stage pill */
  --grey-pill: #ECECEA;       /* Part issued, Money tag, reference chip, counts */
  --grey-pill-cool: #EEEFF1;  /* Not started / Draft */
  --segment-track: #F0F0EE;   /* segmented control track, menu hover */

  /* Primary actions are Ink now, not Blue. Blue is links and the active state. */
  --primary: #0C1139;
  --primary-hover: #1A2050;
  --primary-ink: #FFFFFF;
  --btn-disabled: #A4A6B2;

  /* Time and calendar categories */
  --time-review: #7D93D3;
  --time-practice: #B5B6BD;
  --cal-other: #AEAEB0;
}

[data-theme="dark"] {
  --late: #FF9A6B;
  --late-tint: rgba(255, 154, 107, 0.14);
  --alert-bg: rgba(255, 154, 107, 0.10);
  --alert-line: rgba(255, 154, 107, 0.32);
  --ok-tint: rgba(95, 203, 142, 0.14);
  --blue-tint: rgba(117, 152, 255, 0.14);
  --blue-tint-2: rgba(117, 152, 255, 0.24);
  --grey-pill: rgba(255, 255, 255, 0.08);
  --grey-pill-cool: rgba(255, 255, 255, 0.06);
  --segment-track: rgba(255, 255, 255, 0.06);
  --primary: #F2F2F2;
  --primary-hover: #FFFFFF;
  --primary-ink: #1C1C1E;
  --btn-disabled: rgba(255, 255, 255, 0.22);
  --time-review: #8FA4E0;
  --time-practice: #8E8E93;
  --cal-other: #8E8E93;
}

:root {
  /* ── Type (p85: "Sentence case everywhere. Caps only for table headers.
     Figures are tabular.") 400 and 500 only; 700 is the wordmark. */
  --text-page: 28px;          /* page title */
  --text-section: 20px;       /* section heading */
  --text-figure: 26px;        /* figure, tabular */
  --text-row: 15px;           /* a list row's title */
  --text-body: 14px;          /* body (was 15px) */
  --text-meta-r: 13px;        /* meta lines under a row */
  --text-label: 12px;         /* pills, figure context, field help, group labels */
  --text-table-head: 11px;    /* table head caps (was 9.5px) */
  --tracking-table: 0.08em;   /* (was 0.12em) */
  --tracking-title: -0.02em;

  /* ── Radii */
  --radius-6: 6px;            /* small button, selected table row */
  --radius-10: 10px;          /* large button, segmented track, alert, empty box */
  --radius-12: 12px;          /* menu panel, cards on More */

  /* ── Motion (07-motion.md). The page arrives; nothing that was already there moves. */
  --dur-press: 90ms;          /* @kind other */
  --dur-row: 300ms;           /* @kind other  a row rising into place */
  --dur-draw: 480ms;          /* @kind other  a bar or rule drawing left to right */
  --dur-collapse: 260ms;      /* @kind other  a finished row closing up */
  --dur-hold: 700ms;          /* @kind other  "✓ Issued" before the row closes */
  --dur-drawer: 260ms;        /* @kind other */
  --stagger-step: 60ms;       /* @kind other  per row, capped at 8 rows */
  --rise: 10px;               /* @kind other */
  --rise-sm: 6px;             /* @kind other */
  --drawer-slide: 40px;       /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);          /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);  /* @kind other */
}

/* ── Reduced motion, everywhere (07-motion.md §10: the most urgent fix).
   Things still APPEAR — they just don't travel or wait. This also covers the
   styles views inject at run time (dialog.js, timesheet-review.js,
   catalogue.js), which had no rule of their own. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Page arrival: rows rise and fade in, top to bottom, space held so nothing
   below jumps. Put .arrive on a list; its children stagger (first 8 only). */
@keyframes v4-rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@keyframes v4-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v4-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.arrive > * { animation: v4-rise var(--dur-row) var(--ease-out) both; }
.arrive > *:nth-child(2) { animation-delay: calc(var(--stagger-step) * 1); }
.arrive > *:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
.arrive > *:nth-child(4) { animation-delay: calc(var(--stagger-step) * 3); }
.arrive > *:nth-child(5) { animation-delay: calc(var(--stagger-step) * 4); }
.arrive > *:nth-child(6) { animation-delay: calc(var(--stagger-step) * 5); }
.arrive > *:nth-child(7) { animation-delay: calc(var(--stagger-step) * 6); }
.arrive > *:nth-child(n+8) { animation-delay: calc(var(--stagger-step) * 7); }
.arrive-head { animation: v4-fade var(--dur-base) var(--ease-out) both; }
.draws { transform-origin: left center; animation: v4-draw var(--dur-draw) var(--ease-out) both; }