/* PRD 15 U4.2, `00c §4.1` (colour), `00c §5` (type) and `00c §6` (layout and
   spacing): the one place a hex colour may be written — every other
   stylesheet or component reads a var() instead (`harness/lint/config.ts`'s
   TOKENS glob, `harness/lint/stylesheets.ts`'s TOKEN_FILE both name this
   exact path). `packages/ui` is PRD 15's component kit (`00f §3.1`); the
   kit components themselves (`00c §4.4`'s table) arrive with later slices —
   this is the token file the whole kit, and every screen, reads.

   Light values sit on the bare `:root`. Dark is redefined twice, exactly as
   `00c §4.1` says: once under `prefers-color-scheme: dark` for "System"
   (U3.3's default, when nobody has picked a theme), and once under an
   explicit `[data-theme="dark"]` for a forced choice. `[data-theme="light"]`
   is the mirror case not spelled out in `00c` — without it, picking "Light"
   while the OS is set to dark would have nothing to override the media
   query with. `packages/ui/theme.ts`'s `applyTheme` is the one function
   that ever sets or clears `data-theme`, from the `appearance` setting. */

:root {
  /* Tells the UA which palette its own chrome — form controls, scrollbars,
     autofill — should draw in, so a forced theme doesn't leave native
     widgets in the other one's colours (review round 1, R5). `accent-color`
     is set once, unconditionally: it reads `--accent` live, so it already
     tracks whichever block below is in effect. */
  color-scheme: light;
  accent-color: var(--accent);

  --bg: #f2f5f7;
  --surface: #ffffff;
  --surface-2: #e8edf1;
  --separator: #dde3e8;
  --separator-strong: #c3ccd3;
  --text-1: #101619;
  --text-2: #4a5860;
  --text-3: #5a6971;
  --accent: #0f6f68;
  --accent-pressed: #0b5a54;
  --accent-subtle: #e2f0ee;
  --on-accent: #ffffff;
  --secondary: #2c5d96;
  --secondary-subtle: #e1e9f3;

  /* `00c §4.3`: severity is one hue at five intensities, never five
     different colours. */
  --sev-1: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
  --sev-2: color-mix(in srgb, var(--accent) 38%, var(--surface-2));
  --sev-3: color-mix(in srgb, var(--accent) 56%, var(--surface-2));
  --sev-4: color-mix(in srgb, var(--accent) 76%, var(--surface-2));
  --sev-5: var(--accent);

  /* `00c §4.3a`: mood's own three-step ramp. Darkest still means "most
     intense on that symptom's own scale", not the same percentage the
     five-step ramp above uses. */
  --sev3-1: color-mix(in srgb, var(--accent) 34%, var(--surface-2));
  --sev3-2: color-mix(in srgb, var(--accent) 67%, var(--surface-2));
  --sev3-3: var(--accent);

  /* The number drawn on a filled `SegmentedScale` segment (issue 196, Sean,
     9 Oct 2026): whichever of `--text-1`/`--on-accent` meets 4.5:1 on that
     step's fill in the theme in question. The dark block below redeclares
     the two that flip; `SegmentedScale.test.tsx` computes every step. */
  --on-sev-1: var(--text-1);
  --on-sev-2: var(--text-1);
  --on-sev-3: var(--text-1);
  --on-sev-4: var(--text-1);
  --on-sev-5: var(--on-accent);
  --on-sev3-1: var(--text-1);
  --on-sev3-2: var(--text-1);
  --on-sev3-3: var(--on-accent);

  /* `00c §5`: the platform system stack only. No webfonts, no custom or
     display face — SF on iOS, Roboto on Android, at zero download cost.
     `harness/lint/stylesheets.ts`'s `hasWebfont` fails a build that adds an
     `@font-face` or a font URL anywhere (review round 1, R7). */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* `00c §5`'s role table, tokenised only as far as it states a value —
     alignment, colour and "matches iOS list rows" stay each screen's own
     CSS, not a token (review round 1, R7).

     Review round 3, R1: every role must track Dynamic Type, not just
     inherited body text (round 2's fix put the tracking on `body` alone),
     and must still equal `00c §5`'s own px value at the default text size.
     `--type-root-default-px` is the `html` font-size (in px) this file
     assumes at that default — 17, the value WebKit's own
     `-apple-system-body` style reports, and the value the percentage
     fallback two rules down gives every other engine too, so the same
     reference holds regardless of which one is actually in effect. Each
     role below is `calc(<00c's px>rem / var(--type-root-default-px))`:
     dividing the raw px value by the assumed default root turns it into an
     exact fraction of whatever `html`'s font-size actually is, so turning
     Dynamic Type up scales every role proportionally from there, while the
     *default* root still gives exactly `00c §5`'s own number.
     `packages/ui/tokens.dynamictype.test.ts` checks every row against the
     document. */
  --type-root-default-px: 17;
  --type-screen-title-size: calc(28rem / var(--type-root-default-px)); /* 28px */
  --type-screen-title-weight: 700;
  --type-section-header-size: calc(13rem / var(--type-root-default-px)); /* 13px */
  --type-section-header-weight: 600;
  --type-section-header-tracking: 0.06em;
  --type-row-size: calc(17rem / var(--type-root-default-px)); /* 17px — row label and row value share this */
  --type-row-weight: 400;
  --type-body-size: calc(16rem / var(--type-root-default-px)); /* 16px */
  --type-body-weight: 400;
  --type-body-line-height: 1.5;
  --type-body-max-width: 64ch;
  --type-caption-size: calc(13rem / var(--type-root-default-px)); /* 13px */
  --type-caption-weight: 400;
  --type-data-weight: 500;
  --type-data-variant: tabular-nums;

  /* `00c §6`: the 4px base grid, plus the two constants every card and
     control measures against. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --gutter: var(--space-4);
  --touch-target-min: 44px;
  --card-radius: 12px;

  /* S1.5, review round 1 R2, round 2 R17: a bottom sheet's backdrop scrim
     needs to dim whatever sits behind it in *either* theme, which a
     theme-following token cannot do (`color-mix(in srgb, var(--text-1) 40%,
     transparent)` read as a light wash over a dark screen in dark mode,
     since `--text-1` is itself light there). `black` is a genuine named
     colour (`harness/lint/colours.ts`'s `NAMED_COLOURS`) — `hasAnyColourLiteral`
     in `harness/lint/stylesheets.ts` would refuse it in any other
     stylesheet, and `no-colour-in-style` would refuse it in a JSX `style`
     value. It is allowed here only because this is the one file a colour
     literal of any kind may be written in at all (U4.2), the same reason
     every hex value above is legal here and nowhere else. `00c §4.1` lists `--scrim` with the same
     value in its Light and Dark cells (`00b §6`, 28 Sep, Sean), so this
     stays one declared value, redefined identically below for the two dark
     selectors — not left to inherit silently — so `tokens.drift.test.ts`
     checks it against the document in all three blocks, the same as every
     other token. */
  --scrim: color-mix(in srgb, black 40%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0e10;
    --surface: #151b1e;
    --surface-2: #232c31;
    --separator: #262f34;
    --separator-strong: #384349;
    --text-1: #e9eff2;
    --text-2: #b2bfc6;
    --text-3: #8e9ba3;
    --accent: #4cc0b2;
    --accent-pressed: #3aa396;
    --accent-subtle: #0e2a27;
    --on-accent: #08211e;
    --secondary: #74a9e3;
    --secondary-subtle: #12202d;
    --scrim: color-mix(in srgb, black 40%, transparent);
    /* Dark only (issue 196, Sean's decision, issue 208): --sev-3 moves toward the
       surface (56% to 48% accent) and --sev3-2 toward the accent (67% to 70%),
       so the number on each fill reaches 4.5:1. */
    --sev-3: color-mix(in srgb, var(--accent) 48%, var(--surface-2));
    --sev3-2: color-mix(in srgb, var(--accent) 70%, var(--surface-2));
    --on-sev-4: var(--on-accent);
    --on-sev3-2: var(--on-accent);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0e10;
  --surface: #151b1e;
  --surface-2: #232c31;
  --separator: #262f34;
  --separator-strong: #384349;
  --text-1: #e9eff2;
  --text-2: #b2bfc6;
  --text-3: #8e9ba3;
  --accent: #4cc0b2;
  --accent-pressed: #3aa396;
  --accent-subtle: #0e2a27;
  --on-accent: #08211e;
  --secondary: #74a9e3;
  --secondary-subtle: #12202d;
  --scrim: color-mix(in srgb, black 40%, transparent);
  /* Dark only (issue 196, Sean's decision, issue 208): --sev-3 moves toward the
     surface (56% to 48% accent) and --sev3-2 toward the accent (67% to 70%),
     so the number on each fill reaches 4.5:1. */
  --sev-3: color-mix(in srgb, var(--accent) 48%, var(--surface-2));
  --sev3-2: color-mix(in srgb, var(--accent) 70%, var(--surface-2));
  --on-sev-4: var(--on-accent);
  --on-sev3-2: var(--on-accent);
}

/* `00c §3` principle 4, `00c §4.4`: nothing warm anywhere in this file —
   `harness/lint/stylesheets.ts`'s `hasWarmColour` checks it (run against
   this file by `harness/lint/lint.test.ts`), not just this comment; every
   value in the table above is also pinned to `00c §4.1`'s own copy by
   `packages/ui/tokens.drift.test.ts`. Cards (`--surface`, `--card-radius`)
   and the screen ground read from here too, so the whole app, in both
   themes, comes from these variables and no others (PRD 15 U4.2). */
/* `00c §5`: "Respect Dynamic Type… A period tracker used during pain is a
   text-size-up scenario." Round 2's fix put the tracking on `body`'s own
   font-size only, which left every *other* role (screen titles, section
   headers, row labels — the logging UI itself) fixed regardless of the OS
   text-size setting, since none of them read `body`'s computed size (review
   round 3, R1). This puts it on `html` instead, so every `--type-*` token
   above, being in `rem`, tracks it too — the whole point of a `rem`-based
   scale.

   `html`'s font-size needs a value at *some* default even where Dynamic
   Type does not exist, and every `--type-*-size` token above divides by
   `--type-root-default-px` (17) to still equal `00c §5`'s own number at
   that default: giving every engine the *same* 17px default, not two
   different ones, is what keeps that arithmetic honest everywhere, not
   only on WebKit. `106.25%` is `17 / 16`, expressed as a percentage of the
   browser's own font-size setting (not a fixed px) so a user's own
   accessibility text-size preference still scales it, the way `100%`
   ordinarily would. */
html {
  font-size: 106.25%;
}

@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html {
    /* WebKit's own Dynamic-Type-tracking text style, replacing the
       percentage above. Its own default is also ~17px on iOS/iPadOS — the
       same reference the percentage rule uses, so `00c §5`'s numbers hold
       either way, and both scale together once Dynamic Type is turned up.

       `(font: -apple-system-body)` alone is also true in Safari on macOS,
       where the same style is ~13pt (AppKit's own `.body`, not iOS's),
       which would scale every role down by 13/17 instead of up — a title
       around 21px, a caption around 10px, a real legibility regression
       (review round 4, R4). `-webkit-touch-callout` exists only on touch
       WebKit (iOS/iPadOS Safari), never on the desktop build, so `and`-ing
       it in scopes this block to the platform the 17px reference actually
       describes; desktop Safari falls through to the plain percentage
       rule above instead, which is correct there (PRD 15's edge-case table,
       "Opened in a desktop browser": "Works in a centred phone-width
       column. Not optimised." — not a Dynamic-Type surface of its own).

       The shorthand also resets `line-height` and `font-family`; the
       stack is reasserted right after it, and `line-height` stays at the
       shorthand's `normal` (S1.15: 1.5 is for body text only, below) — only
       the OS-driven *size* is meant to survive from it.
       Still needs the iPhone check this PR owes, at the default text size
       (a screen title and a row label, not only body copy) as well as
       turned up — and desktop Safari, to confirm sizes there match `00c`'s
       own numbers at the default setting (review round 4, R4). */
    font: -apple-system-body;
    font-family: var(--font);
  }
}

/* S1.15 (issue 262, audit cross-cutting item 4): no global `line-height: 1.5`. Titles, rows and buttons use `normal`; the 1.5 of
   `00c §5` applies to running body text only, which is a paragraph. */
html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
}

body {
  font-size: var(--type-body-size);
}

:where(p, li, dd, blockquote) {
  line-height: var(--type-body-line-height);
}