/* YPD COPY, DO NOT EDIT HERE. YPD stamp b574, copied 2026-10-25.
   Master: C:\_Shared-Library\_Shared-Pieces\Style\tokens.css (UI Engine owns it, STYLE-CANONICAL-V1A.md names
   every token). A change to a shared value is made in the master by UI Engine, then copied here in the same pass,
   byte for byte below this comment. app.html loads tokens.css, then style-driver.css, then app.css. */
/* ==========================================================================
   tokens.css, the ONE style file both apps load first. UI Engine, 2026-10-24.
   Ahmed, through Your Personal Driver, 23 Oct: "one shared style file for Your Circle and YPD, owned as a shared
   piece, so a token change updates both apps."

   What lives here: the type scale, spacing, radii, the 44px tap, control heights, the neutrals, the semantic
   colours (good, warn, bad, info), the focus ring, and dark mode. What does NOT live here: an app's fonts, its
   accent, its label chip look. Those sit in the per-app layer loaded right after this file
   (style-your-circle.css, style-driver.css), which sets --display, --body, --mono, --accent, --label-bg,
   --label-fg and may override a neutral (Your Circle's warm paper). Every rule in an app's own CSS reads these
   names; a raw px size or a raw hex colour is a defect (YPD's audit counted 38 sizes and 17 hex values).

   The type scale is the Daily Log Design Standard's nine roles, approved 2026-09-16 ("one family, one look"),
   now written as sizes, weights and line heights that take whichever families the app layer names. Nine roles,
   no tenth: page 24, card 19, quote 17, big 34, label 12 caps (Your Circle's layer keeps its approved 11.5), body 15,
   control 14, small 13, count 12.
   ========================================================================== */

:root {
  /* ---------- families: set by the app layer, these are the fallbacks ---------- */
  --display: Georgia, 'Times New Roman', serif;
  --body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- the nine type roles ---------- */
  --t-page: 24px;   --w-page: 600;  --lh-page: 1.2;
  --t-card: 19px;   --w-card: 500;  --lh-card: 1.25;
  --t-quote: 17px;  --w-quote: 400; --lh-quote: 1.45;
  --t-big: 34px;    --w-big: 600;   --lh-big: 1.05;
  --t-label: 12px;  --w-label: 800; --lh-label: 1.2;  --ls-label: .12em;   /* 12, the floor; Your Circle's layer keeps its approved 11.5 */
  --t-body: 15px;   --w-body: 400;  --lh-body: 1.5;
  --t-ctl: 14px;    --w-ctl: 700;   --lh-ctl: 1.15;
  --t-small: 13px;  --w-small: 500; --lh-small: 1.4;
  --t-num: 12px;    --w-num: 800;   --lh-num: 1;
  --t-data: 14px;   --w-data: 700;  --lh-data: 1.15;  /* fares, times, flight numbers (YPD b573's wish, its own name, 14 like control) */
  --t-min: 12px;    /* nothing a person reads is smaller than this, ever (YPD audit: 115 elements were) */

  /* composed, so a rule says font:var(--f-card) and nothing else */
  --f-page:  var(--w-page) var(--t-page)/var(--lh-page) var(--display);
  --f-card:  var(--w-card) var(--t-card)/var(--lh-card) var(--display);
  --f-quote: var(--w-quote) var(--t-quote)/var(--lh-quote) var(--display);
  --f-big:   var(--w-big) var(--t-big)/var(--lh-big) var(--display);
  --f-label: var(--w-label) var(--t-label)/var(--lh-label) var(--body);
  --f-body:  var(--w-body) var(--t-body)/var(--lh-body) var(--body);
  --f-ctl:   var(--w-ctl) var(--t-ctl)/var(--lh-ctl) var(--body);
  --f-small: var(--w-small) var(--t-small)/var(--lh-small) var(--body);
  --f-num:   var(--w-num) var(--t-num)/var(--lh-num) var(--body);
  --f-data:  var(--w-data) var(--t-data)/var(--lh-data) var(--mono);   /* fares, times, flight numbers, in the mono face */

  /* ---------- spacing, one step of 4 ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 18px;  --sp-6: 24px;  --sp-7: 32px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));   /* the page's side padding */
  --card-pad: 18px;                                        /* every card, inside */

  /* ---------- radii, four and no more (YPD had seven) ---------- */
  --r-card: 18px;
  --r-ctl: 14px;     /* buttons, segments */
  --r-input: 12px;   /* text boxes, selects, small buttons */
  --r-pill: 999px;   /* chips, pills, avatars */

  /* ---------- taps and control heights ---------- */
  --tap: 44px;        /* the floor for anything a thumb hits, both dimensions */
  --ctl: 48px;        /* a normal button */
  --ctl-lg: 52px;     /* a secondary action on a sheet */
  --ctl-primary: 56px;/* the one primary action on a screen */
  --row: 48px;        /* a list row */

  /* ---------- lines and shadow ---------- */
  --hair: 1px;
  --rule: 1.5px;      /* control and input borders */
  --shadow: none;     /* flat; a sheet may lift with --shadow-sheet */
  --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, .25);

  /* ---------- neutrals, light ---------- */
  --ink: #0A0A0A;
  --paper: #F4F4F2;
  --card: #FFFFFF;
  --line: #E4E2DC;
  --muted: #5A5A57;
  --line-mid: color-mix(in srgb, var(--line) 50%, var(--ink));   /* Ahmed 22 Oct: "halfway in between" */

  /* ---------- semantic colours, states only, never decoration ---------- */
  --good: #1F9D57;      --good-tint: color-mix(in srgb, var(--good) 14%, var(--card));   --good-ink: color-mix(in srgb, var(--good) 80%, #000);
  --warn: #E0A400;      --warn-tint: color-mix(in srgb, var(--warn) 22%, var(--card));   --warn-ink: color-mix(in srgb, var(--warn) 70%, #000);
  --bad: #E11900;       --bad-tint: color-mix(in srgb, var(--bad) 14%, var(--card));     --bad-ink: color-mix(in srgb, var(--bad) 85%, #000);
  --info: #2563EB;      --info-tint: color-mix(in srgb, var(--info) 14%, var(--card));   --info-ink: color-mix(in srgb, var(--info) 80%, #000);
  /* the old names both apps still use, pointed at the same values so nothing breaks the day this loads */
  --ok: var(--good);  --danger: var(--bad);  --red: var(--bad);  --success: var(--good);

  /* ---------- the accent and the label chip: the app layer sets these ---------- */
  --accent: #FF3B00;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--card));
  --accent-ink: color-mix(in srgb, var(--accent) 80%, #000);
  --on-accent: #FFFFFF;
  --label-bg: var(--ink);     /* the small caps label's chip */
  --label-fg: var(--paper);

  /* ---------- focus ---------- */
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  --focus-outline: 2px solid var(--accent);

  color-scheme: light;
}

/* ---------- dark, system or chosen; the app layer may re-tint ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F4F4F2; --paper: #121212; --card: #1C1C1B; --line: #33332F; --muted: #A5A59C;
    --good-ink: color-mix(in srgb, var(--good) 75%, #fff); --warn-ink: color-mix(in srgb, var(--warn) 75%, #fff);
    --bad-ink: color-mix(in srgb, var(--bad) 75%, #fff); --info-ink: color-mix(in srgb, var(--info) 75%, #fff);
    --accent-ink: color-mix(in srgb, var(--accent) 72%, #fff);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #F4F4F2; --paper: #121212; --card: #1C1C1B; --line: #33332F; --muted: #A5A59C;
  --good-ink: color-mix(in srgb, var(--good) 75%, #fff); --warn-ink: color-mix(in srgb, var(--warn) 75%, #fff);
  --bad-ink: color-mix(in srgb, var(--bad) 75%, #fff); --info-ink: color-mix(in srgb, var(--info) 75%, #fff);
  --accent-ink: color-mix(in srgb, var(--accent) 72%, #fff);
  color-scheme: dark;
}

/* ---------- the few shared rules every app wants the same way ---------- */
:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.tabular, [data-money] { font-variant-numeric: tabular-nums; }