/*
  uwrote design tokens: Marginalia (decision 51).
  Source of truth for colour, type, space, shape, motion and layout values.
  Specification: docs/design-direction.md.

  Loaded by the first line of app/styles.css (@import), so every page that loads
  styles.css (the prototype and the core) gets these tokens. Fonts are imported there too:
  https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400..700&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;1,7..72,400&family=Young+Serif&display=swap

  Rules: new styles use the semantic tokens (not the primitives) and add no hex literals.
  Nothing below 12px. Contributor inks are text-safe only on --u-page.
*/

:root{
  /* ---- Primitives: referenced by themes below, not by components ---- */
  --u-day-canvas:#ECEFEA;   --u-night-canvas:#111513;
  --u-day-page:#FFFFFF;     --u-night-page:#191E1B;
  --u-day-ink:#1B201E;      --u-night-ink:#E6ECE8;
  --u-day-pencil:#545D57;   --u-night-pencil:#A6B0AA;
  --u-day-rule:#DCE1DA;     --u-night-rule:#2D3430;
  --u-day-field:#8A938C;    --u-night-field:#66716A;
  --u-day-violet:#5236D6;   --u-night-violet:#A898FF;
  --u-day-violet-strong:#4128B8; --u-night-violet-strong:#BDB1FF;
  --u-day-violet-soft:#ECE8FD;   --u-night-violet-soft:#262142;
  --u-day-on-violet:#FFFFFF;     --u-night-on-violet:#15112B;

  /* Sepia is used only by Just read */
  --u-sepia-paper:#F4EAD8;
  --u-sepia-ink:#403728;
  --u-sepia-pencil:#70614E;
  --u-sepia-rule:#D8CAB2;
  --u-sepia-accent:#765135;

  /* ---- Semantic tokens: Day page ---- */
  --u-canvas:var(--u-day-canvas);
  --u-page:var(--u-day-page);
  --u-ink:var(--u-day-ink);
  --u-pencil:var(--u-day-pencil);
  --u-rule:var(--u-day-rule);
  --u-field:var(--u-day-field);
  --u-overlay:rgb(20 24 22 / .45);

  /* Brand and actions */
  --u-violet:var(--u-day-violet);
  --u-violet-strong:var(--u-day-violet-strong);
  --u-violet-soft:var(--u-day-violet-soft);
  --u-on-violet:var(--u-day-on-violet);

  /* Contributor inks: assigned by FNV-1a(author id) % 5 in this order (app/ui/inks.js) */
  --u-contrib-teal:#0F7F77;
  --u-contrib-coral:#C44E33;
  --u-contrib-ochre:#996A0A;
  --u-contrib-plum:#8A3D8E;
  --u-contrib-cobalt:#2D5FC4;

  /* Round phases */
  --u-phase-write:var(--u-contrib-teal);
  --u-phase-review:var(--u-contrib-ochre);
  --u-phase-vote:var(--u-violet);
  --u-phase-held:var(--u-pencil);

  /* Semantic */
  --u-success:#2E6B3F;   --u-success-soft:#E7F2E9;
  --u-warning:#8A5A00;   --u-warning-soft:#FBF1DC;
  --u-danger:#B3261E;    --u-danger-soft:#FBE9E7;
  --u-hold:var(--u-pencil); --u-hold-soft:var(--u-canvas);

  /* Over illustrations (art is always dark, so these do not change with the theme) */
  --u-art-ground:#3A3347;
  --u-on-art:#FFFFFF;
  --u-on-art-soft:#F0E9F2;
  --u-art-scrim-top:rgb(33 27 49 / .30);
  --u-art-scrim-bottom:rgb(33 27 49 / .85);
  --u-art-chip:rgb(33 27 49 / .45);
  --u-art-chip-border:rgb(255 255 255 / .28);
  --u-art-text-shadow:0 1px 3px rgb(0 0 0 / .85);

  /* Story tint: defaults to the platform violet. A story sets these on its own pages only,
     from its tint primitives below; the chrome never takes the tint. */
  --u-story-accent:var(--u-violet);
  --u-story-accent-soft:var(--u-violet-soft);
  /* The Station Between: lamplight amber from its cover art (5.4:1 on the day page, 9.1:1 on night) */
  --u-tint-station:#A2570E;
  --u-tint-station-soft:#FBEEDD;

  /* Typography */
  --u-font-display:'Young Serif',Georgia,'Times New Roman',serif;
  --u-font-prose:'Literata',Georgia,serif;
  --u-font-ui:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --u-text-kicker:12px;     /* 600, uppercase, letter-spacing .09em, line-height 1.4 */
  --u-text-meta:14px;       /* line-height 1.5 */
  --u-text-body:16px;       /* line-height 1.6 */
  --u-text-prose:18px;      /* line-height 1.75; 17px below 760px */
  --u-text-prose-compact:16px; /* line-height 1.65 */
  --u-text-note:15px;       /* italic prose, line-height 1.55 */
  --u-display-s:22px;       /* line-height 1.3 */
  --u-display-m:28px;       /* line-height 1.2 */
  --u-display-l:40px;       /* line-height 1.1; 32px below 760px */
  --u-display-xl:clamp(40px,6vw,64px); /* line-height 1.04 */
  --u-tracking-kicker:.09em;
  --u-leading-prose:1.75;

  /* Space (4px base) */
  --u-space-1:4px;  --u-space-2:8px;  --u-space-3:12px; --u-space-4:16px;
  --u-space-5:20px; --u-space-6:24px; --u-space-8:32px; --u-space-10:40px;
  --u-space-12:48px; --u-space-16:64px;

  /* Shape and elevation */
  --u-radius-sm:6px;
  --u-radius-md:10px;
  --u-radius-lg:14px;
  --u-radius-pill:999px;
  --u-shadow-1:0 1px 2px rgb(20 26 23 / .06),0 6px 18px -12px rgb(20 26 23 / .22);
  --u-shadow-2:0 14px 36px -18px rgb(20 26 23 / .38);
  --u-focus-ring:3px solid var(--u-violet);
  --u-focus-offset:3px;
  --u-touch:44px;

  /* Layout (breakpoints are 760px and 1100px; write them as numbers in media queries) */
  --u-max:1240px;
  --u-measure:62ch;
  --u-thread:58px;
  --u-margin:250px;
  --u-gutter:clamp(16px,4vw,40px);
  --u-header:64px;

  /* Motion */
  --u-dur-fast:150ms;
  --u-dur-base:250ms;
  --u-dur-slow:600ms;
  --u-ease-out:cubic-bezier(.2,.8,.2,1);
  --u-ease-press:cubic-bezier(.2,1.3,.35,1);

  /* Layers */
  --u-z-sticky:20;
  --u-z-nowbar:30;
  --u-z-float:40;   /* the core's Feedback tab */
  --u-z-toast:90;
  --u-z-dialog:100;
}

@media (max-width:759px){
  :root{--u-thread:36px;--u-header:56px;--u-text-prose:17px;--u-display-l:32px}
}

/* Night page. Applied explicitly with [data-page="night"]; the main-app toggle ships in phase 5. */
:root[data-page="night"]{
  color-scheme:dark;
  --u-canvas:var(--u-night-canvas);
  --u-page:var(--u-night-page);
  --u-ink:var(--u-night-ink);
  --u-pencil:var(--u-night-pencil);
  --u-rule:var(--u-night-rule);
  --u-field:var(--u-night-field);
  --u-overlay:rgb(0 0 0 / .6);
  --u-violet:var(--u-night-violet);
  --u-violet-strong:var(--u-night-violet-strong);
  --u-violet-soft:var(--u-night-violet-soft);
  --u-on-violet:var(--u-night-on-violet);
  --u-contrib-teal:#4FC2B8;
  --u-contrib-coral:#F08A6F;
  --u-contrib-ochre:#E0B04E;
  --u-contrib-plum:#D08BD3;
  --u-contrib-cobalt:#86AAF4;
  --u-success:#7FD39A;   --u-success-soft:#1D2B22;
  --u-warning:#E8B45C;   --u-warning-soft:#2E2616;
  --u-danger:#FF8A80;    --u-danger-soft:#331C1B;
  --u-tint-station:#F0B36A;
  --u-tint-station-soft:#33261A;
  --u-shadow-1:0 1px 2px rgb(0 0 0 / .4);
  --u-shadow-2:0 14px 36px -18px rgb(0 0 0 / .7);
}

@media (prefers-reduced-motion:reduce){
  :root{--u-dur-fast:0ms;--u-dur-base:0ms;--u-dur-slow:0ms}
}