/* ============================================================
   colors.css — Master Color & Theme Tokens
   Edit this file to re-theme the entire public frontend at once.
   Palette: "Botanical Clinical" — natural green, warm parchment,
   clay accent, deep forest ink. Built for a supplements review site.
   ============================================================ */

:root {
  /* ---- Core Brand Greens ---- */
  --c-green-50:   #f2f7f0;
  --c-green-100:  #e1ede0;
  --c-green-200:  #bedebd;
  --c-green-400:  #6ba968;
  --c-green-500:  #3f8a4a;   /* primary */
  --c-green-600:  #2c6f3a;
  --c-green-700:  #1f5630;
  --c-green-900:  #11331d;

  /* ---- Ink / Text ---- */
  --c-ink-900:    #14201a;   /* near-black green-tinted ink */
  --c-ink-700:    #344139;
  --c-ink-500:    #5c6b60;
  --c-ink-300:    #93a397;

  /* ---- Warm Neutrals (parchment paper feel) ---- */
  --c-paper-0:    #fffefb;
  --c-paper-50:   #faf8f2;
  --c-paper-100:  #f3efe4;
  --c-paper-200:  #e9e2d0;

  /* ---- Accent: Clay / Terracotta (used sparingly, CTAs & highlights) ---- */
  --c-clay-400:   #c97b4a;
  --c-clay-500:   #b8602e;
  --c-clay-600:   #95491f;

  /* ---- Accent: Gold (ratings, badges) ---- */
  --c-gold-400:   #d4a13d;
  --c-gold-500:   #b8862a;

  /* ---- Status ---- */
  --c-success:    #2c6f3a;
  --c-danger:     #ab3a2c;
  --c-info:       #2c6f8a;

  /* ---- Gradients ---- */
  --grad-hero:    linear-gradient(135deg, var(--c-green-700) 0%, var(--c-green-500) 50%, var(--c-green-400) 100%);
  --grad-soft:    linear-gradient(180deg, var(--c-green-50) 0%, var(--c-paper-0) 100%);
  --grad-card:    linear-gradient(160deg, var(--c-paper-0) 0%, var(--c-green-50) 100%);
  --grad-clay:    linear-gradient(135deg, var(--c-clay-500) 0%, var(--c-clay-400) 100%);
  --grad-overlay: linear-gradient(180deg, rgba(17,51,29,0) 0%, rgba(17,51,29,.85) 100%);

  /* ---- Surfaces ---- */
  --surface-bg:       var(--c-paper-50);
  --surface-card:     var(--c-paper-0);
  --surface-border:   var(--c-green-100);
  --surface-elevated: #ffffff;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(20,32,26,.06), 0 1px 2px rgba(20,32,26,.08);
  --shadow-md: 0 4px 16px rgba(20,32,26,.08), 0 2px 6px rgba(20,32,26,.06);
  --shadow-lg: 0 12px 32px rgba(20,32,26,.12), 0 4px 12px rgba(20,32,26,.08);
  --shadow-glow: 0 0 0 4px rgba(63,138,74,.12);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:   180ms;
  --dur-med:    340ms;
  --dur-slow:   600ms;
}