/* ldu/tokens.css: the LDU scale on top of fraction-ds (slice 1; slice 2 adds the app chrome's sizes and colours).

   Loaded after the five vendor/fraction-ds sheets and before comms/*, so a name declared here wins over the vendored
   one (same specificity, later in the cascade). Nothing is renamed: --bg, --ink, --line, --accent keep working.
   Source of truth is the ldu_ui gem (ldu-tokens.css and the head of ldu_ui.css). Do not edit vendor/fraction-ds;
   change this file.

   Held back from this slice on purpose, because declaring them would move something on today's pages:
   - --s3, --s5, --s6: comms/nav.css and spotlight.css read them with fallbacks that differ from the LDU values
     (nav.css falls back to 16 for --s3, spotlight.css to 20 and 24 for --s5 and --s6). --s1, --s2, --s4, --s7 and --s8
     are declared because every fallback in the app already equals them. Notes pages redeclare the whole scale in
     memory/shell.css, which loads after this file and wins there, as before.
   - --h-tabbar: the phone tab bar's height; that bar is not built (the narrow screens keep main's tab menu and rail overlay).
   Added by slice 2 (the app chrome), at the end of the :root block below: --h-control (40px), --h-bar (56px), --w-rail
   (240px) and --pad-main (32px, 24px under 860px), whose vendored values were 36, 52, 272 and 40; and the chrome's own
   --chrome-bg, --chrome-line and --r-well. --s3/--s5/--s6 are still held back (the fallbacks above have not changed).
   --fs-body, --fs-ui and --fs-meta already equal the gem's values in tokens.css and are not repeated.

   COLOUR DELTAS vs ldu-tokens.css (every other fraction-ds colour already equals the gem's value, light and dark):
   - Light --line is ink-100 in fraction-ds; the gem's --border is one step darker (the value --line-2 already has).
     Overridden below. Dark --line already equals the gem's dark --border.
   - Focus ring: the gem uses lilac-500 in both themes (about 2.5:1 on paper). We keep --accent (lilac-700 light,
     lilac-300 dark) because it clears 3:1 on both surfaces; --ring below is the one name to change if that is revisited.

   The only colour literals in this file are the light --line, the light --accent-fill and the selection pair; each line is marked for
   bin/ds-lint. */

:root {
  /* spacing, 4px grid; see the header for the three steps held back */
  --s1: 4px;
  --s2: 8px;
  --s4: 16px;
  --s7: 48px;
  --s8: 64px;

  /* radii: --r-1/2/3 stay 8/10/16 in tokens.css; the gem's small step is new */
  --r-sm: 6px;

  /* type: the heading steps (DM Sans display, set in base.css) */
  --fs-h1: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
  --fs-h2: 1.25rem;
  --fs-h3: 1rem;

  /* motion: colour and border changes only, never lift or shadow */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 150ms;

  /* focus: 2px ring, 2px offset (--ring itself is set below, per theme scope) */
  --ring-w: 2px;
  --ring-offset: 2px;

  /* ::selection is lilac-300 on ink-900 in both themes (base.css) */
  --select-bg: #CDCBFF; /* ds-lint: allow, LDU selection (lilac-300) */
  --ink-900: #001E22; /* ds-lint: allow, the gem's ink-900: the dark text on the selection in both themes */
  --select-ink: var(--ink-900);

  /* the app chrome (slice 2, ldu/chrome.css): the gem's 56px top bar (h-14), 240px sidebar (w-60), 40px control and page inset.
     --h-control also sizes every fraction-ds .btn, .input and .select (36 -> 40, the gem's md control). */
  --h-control: 40px;
  --h-bar: 56px;
  --w-rail: 240px;
  --pad-main: 32px;
  /* the top bar and the rail are ink-900 in both themes, edged with the gem's line-dark (lilac-300 at 14%) where they meet the
     content well, whose top-left corner is rounded */
  --chrome-bg: var(--ink-900);
  --chrome-line: color-mix(in srgb, var(--select-bg) 14%, transparent);
  --r-well: 16px;
}

@media (max-width: 860px) {
  :root { --pad-main: 24px; }
}

/* The ring reads --accent, and a custom property that reads another is resolved where it is declared: declared on :root
   only, a subtree pinned dark would inherit the LIGHT lilac. Declared on every [data-theme] too, it follows the theme
   it sits in (lilac-300 on ink, lilac-700 on paper). */
:root, [data-theme] { --ring: var(--accent); }

/* --accent-fill: the accent as a fill or a line (progress bars, chart slices, the tab underline, a selected card's edge). Light --accent is
   lilac-700, which reads purple as a bar, so light fills are lilac-500 (Milan, 4 Nov, QA 12: "Yes, lilac"); text, links and the focus ring keep
   --accent for contrast. Dark keeps --accent (lilac-300). Declared on every [data-theme] for the reason above. */
:root, [data-theme] { --accent-fill: var(--accent); }

/* light --line, declared in the two places tokens.css declares light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --line: #D8E0E0; /* ds-lint: allow, LDU border (ldu-tokens.css --border) */
    --accent-fill: #948EFF; /* ds-lint: allow, LDU lilac-500 (ldu-tokens.css) */
  }
}
[data-theme="light"] {
  --line: #D8E0E0; /* ds-lint: allow, LDU border (ldu-tokens.css --border) */
  --accent-fill: #948EFF; /* ds-lint: allow, LDU lilac-500 (ldu-tokens.css) */
}