/**
 * CurioChat Design Tokens
 * ======================
 * Single source of truth for all CSS custom properties used across:
 *   - curiochat.ai  (main site)
 *   - curiochat.com (academy / companion site)
 *   - curiochat_blog (Hugo blog)
 *
 * Usage: import this file first, then import design-system.css.
 *
 * Last extracted: 2026-04-25
 */

:root {

  /* ── Brand Palette ─────────────────────────────────────────────── */
  --navy:      #0d3b66;   /* Primary brand — nav, headings, CTA bg   */
  --amber:     #e2c547;   /* Accent — badges, highlights, star icons  */
  --warm:      #f4a261;   /* Warm orange — .btn--orange, warm accents */
  --sky:       #82cffd;   /* Sky blue — footer bg, .badge--sky        */
  --teal:      #2ec4b6;   /* Teal — .btn--teal, .badge--teal          */
  --sage:      #85bb65;   /* Sage green — .badge--green, .reflection  */
  --rust:      #e76f51;   /* Rust/coral — warning tones               */

  /* ── Neutral Scale ─────────────────────────────────────────────── */
  --ink:       #111111;   /* Body text                                */
  --graphite:  #333333;   /* Secondary text                           */
  --slate:     #3f5368;   /* Muted text, captions                     */
  --mist:      #eaf1f7;   /* Light background, section fills          */
  --light:     #c9d8e7;   /* Borders, dividers                        */
  --white:     #ffffff;

  /* ── Semantic / Named Surfaces ─────────────────────────────────── */
  --bg-body:      #f1faee;    /* Site body background (off-white green)  */
  --bg-light:     #f8f9fa;    /* Portal / card light surface             */
  --link-color:   #0a2a45;    /* Body link color                         */
  --sales-text:   #1a1a2e;    /* Sales page body text (slightly bluer)   */
  --cta-blue:     #2563eb;    /* Sales / academy CTA button blue         */

  /* ── Accessible Text Variants (WCAG AA on light backgrounds) ───── */
  /* Use these when the brand color must read AS TEXT on a light surface.
     The base brand tokens (--teal, --warm, --sage, --amber, --rust) are
     intentionally bright for use as backgrounds and large-format accents,
     and FAIL WCAG AA when used as 4.5:1-required body text.            */
  --teal-text:    #117a6f;    /* Darkened teal — 5.20:1 on white         */
  --rust-dark:    #c14b2e;    /* Darkened rust — 4.87:1 vs white text    */
  --warm-hover:   #d18548;    /* Orange hover — keeps navy-text AA-large */
  --teal-hover:   #25a99e;    /* Teal hover — preserves white-on-teal-dark */
  --sage-hover:   #6fa052;    /* Sage hover                              */

  /* ── Semantic Status ────────────────────────────────────────────── */
  --success:   #10b981;
  --warning:   #f59e0b;
  --danger:    #ef4444;
  --red:       #ef4444;   /* Alias used in portal */

  /* ── Extended Brand (Portal) ────────────────────────────────────── */
  --navy-light:   #1a4f80;
  --teal-light:   #5dd9cd;
  --coral:        #e76f51;   /* Alias of --rust for portal layer         */

  /* ── Layout ─────────────────────────────────────────────────────── */
  --maxw:       1120px;   /* Site content max-width                   */
  --essay-maxw: 38rem;    /* Long-form reading column (~608px / 60ch) */
  --radius:     14px;     /* Default border-radius                    */
  --radius-lg:  14px;     /* Large radius (same as default)           */
  --radius-sm:  6px;      /* Small radius                             */

  /* ── Soft tinted surfaces (long-form, qualification, banners) ────── */
  /* Each is a near-white wash that keeps body text contrast trivial   */
  /* (≥17:1 on --ink) but signals intent at a glance.                  */
  --rule-color:    #d4dde7;   /* Hairline separators, subtle dividers */
  --bg-amber-soft: #fff8e1;   /* Founding banner / legal-ack bg       */
  --bg-sage-soft:  #ecf6e2;   /* "Yes / Perfect Fit" qualification    */
  --bg-rust-soft:  #fdece7;   /* "No / Not a Fit" qualification       */
  --bg-sky-soft:   #f3f9ff;   /* Scenario / future-state narrative bg */

  /* ── Spacing (8-px grid) ────────────────────────────────────────── */
  --space-1:  0.5rem;   /*  8px */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-5:  3rem;     /* 48px */
  --space-6:  4rem;     /* 64px */

  /* ── Shadows (navy-tinted) ──────────────────────────────────────── */
  --shadow-1:  0 2px 10px rgba(13,59,102,0.06);
  --shadow-2:  0 10px 26px rgba(13,59,102,0.12);
  --shadow-3:  0 12px 30px rgba(13,59,102,0.15);

  /* ── Portal Shadow Scale (neutral, mapped alongside brand shadows) ─ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);

  /* ── Focus ─────────────────────────────────────────────────────── */
  --focus-ring:       0 0 0 3px rgba(130,207,253,0.55);
  --focus-ring-color: #0b5fff;

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Open Sans', sans-serif;
  --text-base:    1.125rem;   /* 18px */
  --line-height:  1.7;

  /* Fluid heading scale using clamp() */
  --text-h1: clamp(2rem,   4.6vw, 3.2rem);
  --text-h2: clamp(1.6rem, 3.4vw, 2.2rem);
  --text-h3: clamp(1.15rem,2.6vw, 1.35rem);
  --text-h4: 1.1rem;

  --weight-heading: 800;
  --weight-subhead: 700;
  --weight-semi:    600;
  --weight-normal:  400;

  /* ── Transitions ─────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;
}