/* ============================================================
   Nutrifarm Landing - Design Tokens
   Brand palette from brand/nutrifarm_profile.md
   Accessibility overlay (Atkinson Hyperlegible, 56px taps)
   ============================================================ */

:root {
  /* Brand palette */
  --nutri-orange: #FEAA1B;
  --promo-yellow: #F7D11D;
  --warm-cream:   #F4EEE7;
  --soft-beige:   #F5ECD2;
  --pale-hay:     #EFE2C5;
  --bottle-amber: #A56021;
  --premium-gold: #D8932D;
  --barn-red:     #6B3A2E;
  --sage-green:   #7A9A6E;
  --bronze:       #B8860B;
  --earth-brown:  #432716;
  --strong-black: #111111;
  --dark-navy:    #1E2D5B;
  --white:        #FFFFFF;

  /* Semantic tokens */
  --bg:           var(--warm-cream);
  --surface:      #FFF8E7;
  --surface-alt:  var(--pale-hay);
  --text:         var(--strong-black);
  --text-muted:   #3A3A3A;
  --border:       #D4C4A0;
  --border-strong:#B8A27A;
  --primary:      var(--nutri-orange);
  --on-primary:   var(--white);
  --accent:       var(--nutri-orange);
  --success:      #0F7B3E;
  --error:        #B3261E;
  --star:         #F59E0B;

  /* Typography */
  --font-head: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale - tuned for older users */
  --fs-micro: 16px;
  --fs-small: 18px;
  --fs-body:  20px;
  --fs-h3:    24px;
  --fs-h2:    30px;
  --fs-h1:    38px;
  --fs-hero:  44px;

  --lh-tight: 1.2;
  --lh-body:  1.55;

  /* Touch targets */
  --tap-min:    56px;
  --tap-cta:    64px;
  --tap-submit: 72px;

  /* Spacing rhythm (8px) */
  --sp-0: 4px;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(17,17,17,0.06), 0 2px 8px rgba(17,17,17,0.06);
  --shadow-2: 0 4px 12px rgba(17,17,17,0.1), 0 8px 24px rgba(17,17,17,0.08);
  --shadow-3: 0 10px 30px rgba(17,17,17,0.18);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  200ms;
  --dur-slow: 320ms;

  /* Layout */
  --content-max: 480px;

  /* Focus */
  --focus-ring: 0 0 0 3px var(--dark-navy), 0 0 0 5px var(--promo-yellow);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}