/* Typepace Design System — tokens (§18 of the blueprint)

   Direction: "Instrument".

   Typepace is a measuring device for your hands. It reads keystrokes to the
   millisecond and tells you why you are slow — so the interface is modelled on
   laboratory and workshop equipment rather than on ed-tech or on a consumer
   app. Anodised graphite, drafting paper, a signal lamp. Machined corners
   instead of pills. Monospace carrying the display role, because the subject
   of this product *is* monospaced text.

   Colour follows instrument convention, which resolves a conflict the previous
   palette papered over: amber means attention, green means OK, red means
   fault. The accent is amber, because an interactive control is precisely the
   thing asking for your attention — and that lets `--warn` share the hue
   honestly instead of competing with it. Success is a green of its own again.

   Every colour token below is a *fallback*. At runtime `src/ui/theme.js`
   overwrites them with the user's resolved theme as inline custom properties
   on :root. These are what the page paints with in the frame before that
   module runs, and what it keeps if scripting fails, so they mirror the
   default light theme ("Seamless") exactly. Adding a theme means editing
   `src/ui/themes.js`, never this file. */

:root {
  /* --- Color: light (fallback = the "Drafting" theme) --- */
  --ink: #141516;
  --ink-2: #55575A;
  --ink-3: #76797C;
  --accent: #8F5527;
  --accent-ink: #ffffff;
  --accent-soft: rgba(143, 85, 39, 0.11);
  --accent-line: rgba(143, 85, 39, 0.26);
  --accent-wash: rgba(143, 85, 39, 0.06);
  --bg: #FAFAF9;
  --panel: #F0F0EE;
  --panel-2: #E4E4E1;
  --hairline: #E3E3E0;
  --success: #1F6076;
  --success-soft: rgba(31, 96, 118, 0.12);
  --error: #B02A20;
  --error-soft: rgba(176, 42, 32, 0.1);
  --warn: #8A5B12;
  --warn-soft: rgba(138, 91, 18, 0.12);

  /* Brand — fixed across every theme. A logo that changes colour with the
     user's preference is not a logo anyone remembers. */
  --brand-1: #D08A5E;
  --brand-2: #8F5527;

  /* Typing surface */
  --type-pending: #8B8D8F;
  --type-correct: #141516;
  --type-wrong: #B02A20;
  --type-caret: #8F5527;

  /* --- Type ---
     Three roles, two families. Display and data are monospace because the
     subject of this product is monospaced text and every figure on screen is
     a measurement; body prose is the sans from the same superfamily, so the
     pairing shares skeletons rather than being a coincidence. */
  --font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* A tighter scale than the old one: fewer, more decisive steps. Display
     sizes are mono, so they need negative tracking to stop them sprawling. */
  --t-display: 2.25rem;
  --t-title: 1.5rem;
  --t-head: 1.0625rem;
  --t-body: 0.9375rem;
  --t-small: 0.8125rem;
  --t-micro: 0.6875rem;

  --track-display: -0.03em;
  --track-eyebrow: 0.1em;

  /* --- Space: 4pt base, 8pt rhythm --- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* The phone's bottom section strip. Comfortably past the 44px touch floor,
     and named because the views have to reserve exactly this much room
     underneath themselves. */
  --rail-h: 54px;

  /* Radii are deliberately tighter than before. A keycap has a small, even
     corner; the pill shapes this app used read as consumer-app soft. */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-key: 7px;

  /* --- Elevation --- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.13);
  /* The keycap: a hairline of light along the top edge, weight underneath. */
  --key-face: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --key-lift: 0 1px 0 rgba(0, 0, 0, 0.18);

  /* --- Motion --- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-key: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --dur-1: 130ms;
  --dur-2: 190ms;
  --dur-3: 250ms;

  --maxw: 1160px;
}

/* Fallback dark = the "Instrument" theme. */
:root[data-theme="dark"],
:root[data-appearance="dark"] {
  --ink: #F4F4F5;
  --ink-2: #A9ABAF;
  --ink-3: #83868B;
  --accent: #D08A5E;
  --accent-ink: #1A1006;
  --accent-soft: rgba(208, 138, 94, 0.16);
  --accent-line: rgba(208, 138, 94, 0.34);
  --accent-wash: rgba(208, 138, 94, 0.09);
  /* Graphite, not black: the typing surface is the brightest thing on screen
     and a true-black field around it fatigues the eye over a long session. */
  --bg: #0F1011;
  --panel: #17181A;
  --panel-2: #212326;
  --hairline: #292B2E;
  --success: #74C0D9;
  --success-soft: rgba(116, 192, 217, 0.16);
  --error: #E5675C;
  --error-soft: rgba(229, 103, 92, 0.16);
  --warn: #D3A055;
  --warn-soft: rgba(211, 160, 85, 0.16);

  --type-pending: #6E7073;
  --type-correct: #F4F4F5;
  --type-wrong: #E5675C;
  --type-caret: #D08A5E;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.7);
}

/* High-contrast theme (§13) */
/* High contrast overrides whatever theme is active. It is an accessibility
   mode, not a look, so it wins over the inline theme variables via !important
   — the only place in the app that needs to. */
:root[data-contrast="high"] {
  --bg: #ffffff !important;
  --panel: #f0f0f0 !important;
  --panel-2: #e2e2e2 !important;
  --ink: #000000 !important;
  --ink-2: #2b2b2b !important;
  --ink-3: #4a4a4a !important;
  --accent: #6b3d00 !important;
  --accent-ink: #ffffff !important;
  --success: #0E4A5C !important;
  --hairline: #000000 !important;
  --type-pending: #5e5e5e !important;
  --type-correct: #000000 !important;
  --type-wrong: #8f0007 !important;
  --error: #8f0007 !important;
}
:root[data-appearance="dark"][data-contrast="high"] {
  --bg: #000000 !important;
  --panel: #141414 !important;
  --panel-2: #232323 !important;
  --ink: #ffffff !important;
  --ink-2: #e0e0e0 !important;
  --ink-3: #c0c0c0 !important;
  --accent: #ffc46b !important;
  --accent-ink: #201200 !important;
  --success: #A5DCEE !important;
  --hairline: #ffffff !important;
  --type-pending: #a8a8a8 !important;
  --type-correct: #ffffff !important;
  --type-wrong: #ff9a90 !important;
  --error: #ff9a90 !important;
}

/* Dyslexia-friendly reading mode (§13) */
:root[data-dyslexia="on"] {
  --font-ui: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif;
  letter-spacing: 0.02em;
  word-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
  }
}
:root[data-motion="reduced"] {
  --dur-1: 1ms;
  --dur-2: 1ms;
  --dur-3: 1ms;
}