/* ============================================================
   NOOK DESIGN TOKENS
   The single source of truth. Nothing else in the codebase
   should contain a raw colour, radius, shadow or duration.
   ============================================================ */

:root {
  /* ---------- Palette: raw ramps ----------
     Warm, paper-based. Derived from roasted coffee, clay brick,
     olive leaf and unbleached paper — not from a UI kit. */

  --n-cream-50:  #FBF7EE;
  --n-cream-100: #F7F1E4;
  --n-cream-200: #F3ECDE;   /* the original Nook cream — preserved */
  --n-cream-300: #EBE2D0;
  --n-cream-400: #E3D9C4;

  --n-paper:     #FFFCF6;   /* warm white, never pure #fff */
  --n-paper-alt: #FFFFFF;

  --n-espresso-900: #1A120B;
  --n-espresso-800: #241A12;  /* preserved */
  --n-espresso-700: #2C2015;
  --n-espresso-600: #3B2C1E;

  --n-brick-700: #8F3521;
  --n-brick-600: #A33D26;
  --n-brick-500: #B4432B;   /* preserved */
  --n-brick-300: #D98E77;
  --n-brick-100: #F5DED6;

  --n-olive-700: #333C2A;
  --n-olive-600: #454F3A;   /* preserved */
  --n-olive-400: #6E7D57;
  --n-olive-300: #8B9B72;   /* preserved */
  --n-olive-100: #E4E9DA;

  --n-amber-600: #8A6524;   /* darkened for AA on amber-100 (was #B8842F, 2.86:1) */
  --n-amber-500: #D9A24B;   /* preserved */
  --n-amber-200: #F0DBB4;
  --n-amber-100: #F9EEDA;

  --n-clay-500:  #9C6B4A;   /* mid-warm neutral, charts */
  --n-slate-500: #5A6470;   /* the one cool tone, used sparingly */

  /* ---------- Semantic surfaces ---------- */
  --nook-cream:        var(--n-cream-200);
  --nook-cream-deep:   var(--n-cream-300);
  --nook-paper:        var(--n-paper);
  --nook-espresso:     var(--n-espresso-800);
  --nook-espresso-ink: var(--n-espresso-900);
  --nook-brick:        var(--n-brick-500);
  --nook-olive:        var(--n-olive-600);
  --nook-amber:        var(--n-amber-500);

  --nook-bg:           var(--n-cream-200);
  --nook-bg-sunk:      var(--n-cream-300);
  --nook-surface:      var(--n-paper);
  --nook-surface-alt:  var(--n-cream-100);
  --nook-surface-ink:  var(--n-espresso-800);

  /* ---------- Text ---------- */
  --nook-ink:           var(--n-espresso-800);
  --nook-ink-strong:    var(--n-espresso-900);
  --nook-muted:         #5F5647;   /* was #8A7D68 — only 3.43:1 on cream, failed AA */
  --nook-muted-soft:    #6C6252;   /* was #A5977F — 2.44:1, failed AA outright */
  --nook-on-dark:       var(--n-cream-100);
  --nook-on-dark-muted: #B3A890;

  /* Brick as a *fill* is the brand colour and never changes. Brick as
     small text needs more weight to clear AA on the sunk background,
     so text use gets its own token. */
  --nook-brick-text:    var(--n-brick-600);

  /* ---------- Lines & borders ---------- */
  --nook-border:        var(--n-cream-400);
  --nook-border-strong: #CFC2A6;
  --nook-border-ink:    var(--n-espresso-800);
  --nook-border-dark:   rgba(255, 252, 246, 0.16);

  /* ---------- Glass ---------- */
  --nook-glass:        rgba(255, 252, 246, 0.72);
  --nook-glass-strong: rgba(255, 252, 246, 0.88);
  --nook-glass-dark:   rgba(26, 18, 11, 0.55);
  --nook-blur:         blur(14px) saturate(1.15);

  /* ---------- Elevation ----------
     Warm-tinted shadows. Coffee never casts a blue shadow. */
  --nook-shadow-0:  none;
  --nook-shadow-1:  0 1px 2px rgba(36, 26, 18, 0.05);
  --nook-shadow-2:  0 2px 6px rgba(36, 26, 18, 0.07), 0 1px 2px rgba(36, 26, 18, 0.05);
  --nook-shadow-3:  0 8px 22px rgba(36, 26, 18, 0.10), 0 2px 6px rgba(36, 26, 18, 0.05);
  --nook-shadow-4:  0 20px 48px rgba(36, 26, 18, 0.14), 0 4px 12px rgba(36, 26, 18, 0.06);
  --nook-shadow-in:      inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --nook-shadow-in-dark: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* ---------- Radius ----------
     Deliberately small. Paper and wood have crisp edges;
     only tactile controls get real curvature. */
  --nook-r-0:  0px;
  --nook-r-xs: 2px;
  --nook-r-sm: 4px;
  --nook-r-md: 8px;
  --nook-r-lg: 14px;
  --nook-r-xl: 22px;
  --nook-r-pill: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --nook-s-1:  4px;
  --nook-s-2:  8px;
  --nook-s-3:  12px;
  --nook-s-4:  16px;
  --nook-s-5:  20px;
  --nook-s-6:  24px;
  --nook-s-8:  32px;
  --nook-s-10: 40px;
  --nook-s-12: 48px;
  --nook-s-16: 64px;
  --nook-s-20: 80px;
  --nook-s-24: 96px;
  --nook-s-32: 128px;

  /* ---------- Layout ---------- */
  --nook-max:      1180px;
  --nook-max-wide: 1360px;
  --nook-max-read: 660px;
  --nook-gutter:   32px;
  --nook-nav-h:    68px;
  --nook-tabbar-h: 62px;

  /* ---------- Motion ----------
     Calm. Nothing bounces. Nothing overshoots. */
  --nook-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --nook-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nook-ease-in:  cubic-bezier(0.55, 0, 0.55, 0.2);
  --nook-t-fast:   120ms;
  --nook-t-base:   220ms;
  --nook-t-slow:   420ms;
  --nook-t-page:   520ms;

  /* ---------- Z ---------- */
  --nook-z-nav:    80;
  --nook-z-tabbar: 78;
  --nook-z-drop:   90;
  --nook-z-modal:  120;
  --nook-z-toast:  140;

  /* ---------- Type families ---------- */
  --nook-font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --nook-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --nook-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Focus ring — one definition, used everywhere ---------- */
  --nook-ring:      0 0 0 2px var(--nook-cream), 0 0 0 4px var(--nook-brick);
  --nook-ring-dark: 0 0 0 2px var(--nook-espresso-ink), 0 0 0 4px var(--nook-amber);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --nook-t-fast: 1ms;
    --nook-t-base: 1ms;
    --nook-t-slow: 1ms;
    --nook-t-page: 1ms;
  }
}