/*
 * Singing Carrots — Canonical Design Tokens
 * ─────────────────────────────────────────
 * New-era (staslib + AI) is the system. All new work uses these tokens.
 * Legacy Bootstrap-4 tokens live in legacy.css — only include when
 * working on un-migrated surfaces for visual compatibility.
 *
 * Source anchors: mission.html, funnel-survey.html, virtual-coach page,
 * plus design-system calls made with the project owner (Dec 2024).
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════
     BRAND · orange owns identity, purple is feature-only
     ═══════════════════════════════════════════════════════════════════ */
  --sc-carrot:         #FF9126;   /* primary brand orange */
  --sc-carrot-hover:   #E88020;   /* hover darken */
  --sc-carrot-tint:    #FFF5EA;   /* pale orange wash */
  --sc-gold:           #FFD843;   /* gradient partner */
  --sc-gold-tint:      #FFF7DA;   /* pale gold — warning surface (caution, not danger) */
  --sc-warning-ink:    #8A6100;   /* on-tint text/icon for warning surfaces (#FFD843 itself is too bright on tint) */
  --sc-beige:          #FEF8EA;   /* soft callout background */

  /* Mascot accent (carrot illustration, not a UI token) */
  --sc-cape:           #ED5B3E;
  --sc-mouth:          #6D3A24;

  /* ═══════════════════════════════════════════════════════════════════
     AI ACCENT · violet — used as small feature touch-ups only.
     Never as a dominant page background. Max ~10% of visible surface.
     ═══════════════════════════════════════════════════════════════════ */
  --sc-ai:             #6B4EFF;
  --sc-ai-hover:       #5A3EE8;
  --sc-ai-tint:        #F1EDFF;   /* for chat bubbles, badges, AI cards */
  --sc-ai-magenta:     #A855F7;   /* gradient partner */

  /* ═══════════════════════════════════════════════════════════════════
     SEMANTIC · keep narrow — we don't need 5 greens
     ═══════════════════════════════════════════════════════════════════ */
  --sc-success:        #28A745;   /* "in range", streaks, success states */
  --sc-success-tint:   #E9F7EC;
  --sc-danger:         #C33C22;   /* warnings only — no destructive CTAs */
  --sc-danger-tint:    #FBEDE9;

  /* ═══════════════════════════════════════════════════════════════════
     SURFACES & INK
     ═══════════════════════════════════════════════════════════════════ */
  --sc-bg:             #FFFFFF;
  --sc-bg-soft:        #FAFAF9;   /* page-section alt background */
  --sc-bg-footer:      #232323;
  --sc-ink:            #1A1A1A;   /* headings, primary text */
  --sc-ink-2:          #333333;   /* body */
  --sc-ink-3:          #555555;   /* subdued body */
  --sc-muted:          #A1A8AD;   /* placeholder, meta, captions */
  --sc-rule:           #E2E2E2;   /* 1px hairlines */
  --sc-rule-soft:      #F0F0F0;   /* inner dividers, card borders */

  /* ═══════════════════════════════════════════════════════════════════
     GRADIENTS · two, both 94.09deg for brand consistency
     ═══════════════════════════════════════════════════════════════════ */
  --sc-grad-brand:     linear-gradient(94.09deg, #FFD843 0%, #FF9126 83.75%);
  --sc-grad-ai:        linear-gradient(94.09deg, #6B4EFF 0%, #A855F7 83.75%);
  /* Subtle page-hero wash (soft radial, not a linear gradient) */
  --sc-wash-brand:
    radial-gradient(ellipse at 20% -10%, rgba(255,216,67,.25), transparent 55%),
    radial-gradient(ellipse at 110% 10%, rgba(255,145,38,.18), transparent 55%);
  --sc-wash-ai:
    radial-gradient(ellipse at 50% -20%, rgba(107,78,255,.15), transparent 60%),
    radial-gradient(ellipse at 90% 50%, rgba(168,85,247,.08), transparent 50%);

  /* ═══════════════════════════════════════════════════════════════════
     RADII · collapsed from 8 values to 3
     ═══════════════════════════════════════════════════════════════════ */
  --sc-r-sm:           8px;       /* inputs, buttons, small chips, note-chips (2026 rounded) */
  --sc-r-md:           12px;      /* cards, chat bubbles, mocks, CTAs in hero */
  --sc-r-pill:         999px;     /* badges, ring circles, avatars */

  /* ═══════════════════════════════════════════════════════════════════
     SHADOWS · 3 tiers
     ═══════════════════════════════════════════════════════════════════ */
  --sc-shadow-1:       0 2px 20px rgba(0,0,0,0.05);           /* resting cards */
  --sc-shadow-2:       0 8px 30px rgba(0,0,0,0.08);           /* hover / elevated */
  --sc-shadow-3:       0 20px 60px -20px rgba(0,0,0,0.18);    /* floated, hero mocks */
  --sc-shadow-brand:   0 6px 20px rgba(255,145,38,0.28);      /* brand CTA glow */
  --sc-shadow-ai:      0 6px 20px rgba(107,78,255,0.32);      /* AI CTA glow */

  /* ═══════════════════════════════════════════════════════════════════
     SPACING (em-independent; use these instead of hard pixels)
     ═══════════════════════════════════════════════════════════════════ */
  --sc-s-1: 4px;
  --sc-s-2: 8px;
  --sc-s-3: 12px;
  --sc-s-4: 16px;
  --sc-s-5: 24px;
  --sc-s-6: 32px;
  --sc-s-7: 48px;
  --sc-s-8: 64px;
  --sc-s-9: 96px;

  /* ═══════════════════════════════════════════════════════════════════
     TYPE
     Display = Poppins (headings, numbers, CTAs)
     Body    = system stack (Latin + international legibility)
     Mono    = SF Mono / Menlo (note names, specs)
     ═══════════════════════════════════════════════════════════════════ */
  --sc-font-display: "Poppins", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --sc-font-body:    system-ui, "Segoe UI", Roboto, Inter, "Noto Sans", Arial, sans-serif;
  --sc-font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --sc-w-regular:  400;
  --sc-w-medium:   500;
  --sc-w-semibold: 600;
  --sc-w-bold:     700;
  --sc-w-black:    800;

  /* Canonical type scale — Poppins for all headings, `-0.02em` tracking at h3+ */
  --sc-h1:   56px;
  --sc-h2:   40px;
  --sc-h3:   32px;
  --sc-h4:   24px;
  --sc-h5:   18px;
  --sc-h6:   14px;
  --sc-body: 16px;
  --sc-sm:   14px;
  --sc-xs:   12px;

  --sc-lh-tight: 1.1;
  --sc-lh-snug:  1.25;
  --sc-lh-body:  1.5;
  --sc-lh-loose: 1.65;
}

/* ═════════════════════════════════════════════════════════════════════
   HEADING UTILITIES · use `.sc-h1 … .sc-h6` for consistency
   ═════════════════════════════════════════════════════════════════════ */
.sc-h1 { font: var(--sc-w-black)    var(--sc-h1)/var(--sc-lh-tight) var(--sc-font-display); letter-spacing: -0.025em; color: var(--sc-ink); }
.sc-h2 { font: var(--sc-w-black)    var(--sc-h2)/var(--sc-lh-tight) var(--sc-font-display); letter-spacing: -0.02em;  color: var(--sc-ink); }
.sc-h3 { font: var(--sc-w-bold)     var(--sc-h3)/var(--sc-lh-snug)  var(--sc-font-display); letter-spacing: -0.02em;  color: var(--sc-ink); }
.sc-h4 { font: var(--sc-w-bold)     var(--sc-h4)/var(--sc-lh-snug)  var(--sc-font-display); letter-spacing: -0.01em;  color: var(--sc-ink); }
.sc-h5 { font: var(--sc-w-semibold) var(--sc-h5)/var(--sc-lh-snug)  var(--sc-font-display); color: var(--sc-ink); }
.sc-h6 { font: var(--sc-w-semibold) var(--sc-h6)/var(--sc-lh-snug)  var(--sc-font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-ink-3); }
.sc-body  { font: var(--sc-w-regular) var(--sc-body)/var(--sc-lh-body) var(--sc-font-body); color: var(--sc-ink-2); }
.sc-sm    { font-size: var(--sc-sm); color: var(--sc-ink-3); }
.sc-xs    { font-size: var(--sc-xs); color: var(--sc-muted); }
.sc-mono  { font-family: var(--sc-font-mono); }

/* Gradient-clipped text — the single most load-bearing new-era signature */
.sc-grad-text    { background: var(--sc-grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.sc-grad-text-ai { background: var(--sc-grad-ai);    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Text color utilities */
.sc-text-carrot  { color: var(--sc-carrot); }
.sc-text-ai      { color: var(--sc-ai); }
.sc-text-success { color: var(--sc-success); }
.sc-text-muted   { color: var(--sc-muted); }
.sc-text-ink     { color: var(--sc-ink); }