/* Nook design tokens: single source of truth for the UI.
   Mirrors STYLE.md §8 and BRAND_GUIDELINES.md §6–7. Keep these in parity (CLAUDE.md §4.2). */

/* Brand faces, self-hosted (the CSP is first-party only). Variable fonts, latin subset. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/static/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/static/fonts/hanken-grotesk.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Brand colour */
  --persimmon:#FF5A36; --jade:#00A98F; --cobalt:#3047FF; --amber:#FFB02E;
  --orchid:#C44BD9; --danger:#E5392B;
  /* Neutrals (warm) */
  --ink:#1A1410; --slate:#4A433B; --stone:#7A7268; --ash:#C9C1B5; --bone:#EBE5DA; --chalk:#FAF4EA;
  /* Semantic surfaces: light */
  --bg:var(--chalk); --surface:#FFFFFF; --surface-alt:#F2ECE0;
  --text:var(--ink); --text-muted:#6B6258; --border:#E2DACB;
  --accent:var(--persimmon); --accent-contrast:var(--ink);
  --success:var(--jade); --warning:var(--amber); --info:var(--cobalt);
  /* Spacing: rem so everything scales with the user's text size (0.25rem = 4px base) */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem;
  /* Page gutter: fluid between small phones and tablets (12px -> 24px equivalents) */
  --gutter:clamp(0.75rem, 4vw, 1.5rem);
  /* Type scale (1.25 ratio), rem with px equivalents: 12 14 16 20 25 31 39 49 */
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.25rem;
  --text-xl:1.5625rem; --text-2xl:1.9375rem; --text-3xl:2.4375rem; --text-4xl:3.0625rem;
  /* Fluid display sizes for titles/heroes: shrink gracefully on narrow phones */
  --text-title:clamp(1.5rem, 1rem + 2.6vw, 1.9375rem);
  --text-display:clamp(1.875rem, 1.25rem + 3.2vw, 2.4375rem);
  /* Radius (rem equivalents of 8 12 20) */
  --radius-sm:0.5rem; --radius-md:0.75rem; --radius-lg:1.25rem; --radius-full:9999px;
  /* Touch targets (BEST_PRACTICES §4: minimum 44px, prefer 48px) */
  --tap-min:2.75rem; --tap:3rem;
  /* Motion */
  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms;
  --ease:cubic-bezier(0.2,0,0,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  /* Liquid-glass material (STYLE.md §8.4): translucent surfaces over an ambient tint */
  --glass-bg:color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 86%, transparent);
  --glass-border:color-mix(in srgb, var(--ink) 12%, transparent);
  --glass-highlight:rgba(255,255,255,0.55);
  --glass-shadow:0 10px 32px -14px rgba(26,20,16,0.35);
  --glass-blur:blur(22px) saturate(1.5);
  /* Fonts */
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-util:var(--font-body); /* labels = body face, uppercased; no third font */
}

/* Dark: first-class (STYLE.md §8.1/8.4, BRAND §6.4) */
:root[data-theme="dark"],
:root.dark {
  --persimmon:#FF6E4D; --jade:#2BC9AE; --cobalt:#6A78FF; --amber:#FFC04F;
  --orchid:#D267E0; --danger:#FF6A5A;
  --bg:#14110D; --surface:#211C16; --surface-alt:#2C261E;
  --text:#F5EFE4; --text-muted:#B0A899; --border:#3A332A;
  --accent:var(--persimmon); --accent-contrast:var(--ink);
  --success:var(--jade); --warning:var(--amber); --info:var(--cobalt);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --persimmon:#FF6E4D; --jade:#2BC9AE; --cobalt:#6A78FF; --amber:#FFC04F;
    --orchid:#D267E0; --danger:#FF6A5A;
    --bg:#14110D; --surface:#211C16; --surface-alt:#2C261E;
    --text:#F5EFE4; --text-muted:#B0A899; --border:#3A332A;
  }
}

/* Quality floor (BEST_PRACTICES.md §4) */
*:focus-visible { outline:3px solid var(--cobalt); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}