/*
  Design tokens for choosewise.education
  Source of truth for colors, typography, spacing, motion.
  Locked by design spec §5.1 (brand system).
*/

:root {
  /* ───── Colors ───── */
  --color-bg:           #faf7f2;  /* off-white surface */
  --color-bg-alt:       #f2ede2;  /* tan — for sections */
  --color-text:         #1a1a18;  /* graphite */
  --color-text-soft:    #6b6b65;  /* muted caption */
  --color-accent:       #2d5a3f;  /* forest green */
  --color-accent-hover: #234730;  /* forest green hover */
  --color-highlight:    #c66b3d;  /* terracotta */
  --color-highlight-hover: #a85830;
  --color-border:       #e8e2d5;
  --color-focus:        #2d5a3f;

  /* Dark surfaces (for hero ambient etc.) */
  --color-dark-bg:      #1a1a18;
  --color-dark-text:    #f7f3ed;

  /* Semi-transparent (for glassy nav, subtle dividers) */
  --color-bg-blur:       rgba(250, 247, 242, 0.85); /* off-white with alpha for backdrop-filter */
  --color-border-subtle: rgba(247, 243, 237, 0.10); /* subtle light divider on dark surfaces */

  /* Copy-action accent (flipcard backs — contrasts with dark bg, non-green) */
  --color-copy:       #1e3a5f;   /* editorial midnight blue */
  --color-copy-hover: #152a46;

  /* ───── Typography ───── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Work Sans', -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'SF Mono', Menlo, Monaco, monospace;

  /* Fluid type scale — clamp() for responsive */
  --fs-display: clamp(2.5rem, 5vw + 1rem, 5rem);
  --fs-h1:      clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --fs-h2:      clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
  --fs-h3:      clamp(1.15rem, 1.5vw + 0.5rem, 1.5rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;

  --tracking-tight: -0.02em;
  --tracking-loose:  0.08em;

  /* ───── Spacing (4px base) ───── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ───── Layout ───── */
  --content-max:   72rem;      /* ~1152px */
  --content-text-max: 40rem;   /* readable prose width */
  --nav-height:    4rem;

  /* ───── Radius & shadows ───── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26,26,24,0.06);
  --shadow-md: 0 4px 12px rgba(26,26,24,0.08);
  --shadow-lg: 0 12px 40px rgba(26,26,24,0.12);
  --shadow-focus: 0 0 0 3px rgba(45,90,63,0.25);

  /* ───── Motion ───── */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0.2, 0.2, 1);
  --dur-fast:   150ms;
  --dur-medium: 300ms;
  --dur-slow:   600ms;
}

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