/* ==========================================================================
   Griefcase — Design tokens
   All visual decisions flow from this file. Change the palette, type scale,
   spacing, or motion timing here and the whole site follows.
   ========================================================================== */

:root {
  /* ---- Color: warm, restrained, editorial ---- */
  --color-paper:        #FBF8F3;   /* lightest paper / cards */
  --color-cream:        #F4EEE3;   /* base background */
  --color-cream-alt:    #ECE4D6;   /* alternate section background */
  --color-taupe:        #B7A896;   /* soft taupe — borders, muted UI */
  --color-taupe-deep:   #8F7F6B;   /* deeper taupe — secondary text */
  --color-dusty-blue:   #8B99A3;   /* dusty blue/grey — accents, links */
  --color-dusty-blue-deep: #5F7078;
  --color-charcoal:     #2A2724;   /* primary text / ink */
  --color-charcoal-soft:#4A453F;   /* secondary text */
  --color-accent:       #B06A4A;   /* single earthy accent — terracotta */
  --color-accent-soft:  #D8B49C;
  --color-line:         rgba(42, 39, 36, 0.12);
  --color-line-soft:    rgba(42, 39, 36, 0.07);

  /* mood accents — used sparingly, as small dots/edges, never loud */
  --mood-heavy:    #6E6459;
  --mood-angry:    #A34B3A;
  --mood-sad:      #6C7C93;
  --mood-confused: #8C7A9E;
  --mood-hopeful:  #7A9179;
  --mood-unspoken: #9C8F80;

  --overlay-scrim: rgba(24, 22, 20, 0.55);

  /* ---- Typography ---- */
  --font-serif: "Newsreader", "Iowan Old Style", "Georgia", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.4rem, 6vw, 5rem);
  --fs-h1: clamp(2rem, 4.2vw, 3.2rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.5rem);
  --fs-body-lg: clamp(1.1rem, 1.4vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-micro: 0.78rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-relaxed: 1.65;

  --tracking-wide: 0.14em;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.875rem;
  --space-4: 1.25rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;
  --space-9: 10rem;

  --content-max: 1180px;
  --content-narrow: 720px;
  --content-reading: 620px;

  /* ---- Radius & elevation ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --shadow-soft: 0 1px 2px rgba(42,39,36,0.04), 0 12px 32px -16px rgba(42,39,36,0.18);
  --shadow-lift: 0 2px 4px rgba(42,39,36,0.06), 0 24px 48px -20px rgba(42,39,36,0.28);

  /* ---- Motion ---- */
  --ease-quiet: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;
  --dur-breath: 4200ms;

  --focus-ring: 0 0 0 3px rgba(139, 153, 163, 0.45);
}

/* Reduced motion: shorten/neutralize durations globally rather than
   branching every animation individually. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med: 1ms;
    --dur-slow: 1ms;
    --dur-breath: 1ms;
  }
}