/* ============================================================
   colors.css — Master Color & Theme Tokens (SuppBest)
   Edit this file to re-theme the entire public frontend at once.
   Palette: "Clinical Trust" — deep teal primary, crisp cool-white
   paper, slate ink, coral accent. Modern, trustworthy, clean.
   ============================================================ */

:root {
  /* ---- Core Brand Teals (same variable names as the original
          gold/green palettes, so every existing file that reads
          --c-green-* automatically picks up this palette) ---- */
  --c-green-50:   #eefbf9;
  --c-green-100:  #d3f3ee;
  --c-green-200:  #a3e4da;
  --c-green-400:  #2ea89a;   /* mid teal  */
  --c-green-500:  #14827a;   /* primary   */
  --c-green-600:  #0f6862;   /* dark teal */
  --c-green-700:  #0b4f4b;   /* deep teal */
  --c-green-900:  #062825;   /* near-black teal */

  /* ---- Ink / Text (cool slate, not green-tinted) ---- */
  --c-ink-900:    #121a1f;
  --c-ink-700:    #33434b;
  --c-ink-500:    #5c6f78;
  --c-ink-300:    #9aacb3;

  /* ---- Cool Neutrals (crisp paper / mist) ---- */
  --c-paper-0:    #ffffff;
  --c-paper-50:   #f5fafa;
  --c-paper-100:  #e9f2f2;
  --c-paper-200:  #d7e6e6;

  /* ---- Accent: Coral (replaces clay/burgundy — CTAs & highlights) ---- */
  --c-clay-400:   #ff7a59;
  --c-clay-500:   #f2603c;
  --c-clay-600:   #cc4a2a;

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

  /* ---- Status ---- */
  --c-success:    #0f6862;
  --c-danger:     #cc4a2a;
  --c-info:       #2879b5;

  /* ---- Gradients ---- */
  --grad-hero:    linear-gradient(135deg, #0b4f4b 0%, #14827a 45%, #2ea89a 80%, #6fcabd 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(6,40,37,0) 0%, rgba(6,40,37,.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 (cool teal-tinted) ---- */
  --shadow-sm:   0 1px 3px rgba(6,40,37,.07), 0 1px 2px rgba(6,40,37,.09);
  --shadow-md:   0 4px 16px rgba(6,40,37,.10), 0 2px 6px rgba(6,40,37,.07);
  --shadow-lg:   0 12px 32px rgba(6,40,37,.14), 0 4px 12px rgba(6,40,37,.09);
  --shadow-glow: 0 0 0 4px rgba(20,130,122,.18);

  /* ---- 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;
}