/* ============================================================
   QUEDZAL DESIGN TOKENS  ·  tokens.css
   Single source of truth for color, type, spacing, motion.
   Import once, globally, before any other stylesheet.
   ============================================================ */

:root{

  /* ---- BRAND / IDENTITY (emerald family) ---- */
  --emerald:        #0B5D3B;   /* primary brand — logo, links, headings accent */
  --emerald-deep:   #062E1E;   /* dark surfaces, dark sections, footers of dark UI */
  --teal:           #0E8E6B;   /* secondary brand green — kickers, eyebrows */
  --jade:           #27D199;   /* bright highlight green — on-dark accents, success */

  /* ---- ACTION (crimson — the spark) ---- */
  --crimson:        #E0492F;   /* ALL primary CTAs, urgent/high signals, active dots */
  --crimson-ink:    #FFF1ED;   /* text on crimson */
  --crimson-tint:   rgba(224,73,47,.12);  /* crimson backgrounds (pills) */

  /* ---- ACCENT SET (icons & data-viz ONLY — never UI chrome) ---- */
  --coral:          #FF6A43;
  --gold:           #F2A938;
  --gold-ink:       #C9820F;   /* gold used as icon stroke (darker, legible) */
  --amber:          #FFC15A;
  --cyan:           #119FBC;
  --cyan-ink:       #0E8DA6;   /* cyan used as icon stroke (darker, legible) */
  --sky:            #46C9DD;

  /* ---- SURFACES (light, default) ---- */
  --bone:           #FAF8F2;   /* app/page background — warm near-white */
  --bone-2:         #F1ECE0;   /* alternating section / inset background */
  --paper:          #FFFFFF;   /* cards, panels, raised surfaces */

  /* ---- TEXT (on light) ---- */
  --ink:            #13201A;   /* primary text — near-black green-tinted */
  --ink-soft:       #41524A;   /* secondary text, body copy */
  --ink-faint:      #7A887F;   /* captions, meta, placeholders, disabled */

  /* ---- LINES ---- */
  --line:           rgba(19,32,26,.12);  /* hairlines, card borders */
  --line-strong:    rgba(19,32,26,.20);  /* outline buttons, dividers */

  /* ---- STATUS (mapped to brand palette) ---- */
  --success:        #0E8E6B;
  --success-tint:   rgba(14,142,107,.12);
  --warning:        #F2A938;
  --warning-tint:   rgba(242,169,56,.14);
  --danger:         #E0492F;
  --danger-tint:    rgba(224,73,47,.12);
  --info:           #119FBC;
  --info-tint:      rgba(17,159,188,.12);

  /* ---- BUYER-INTENT (product semantics) ---- */
  --intent-high:    var(--crimson);
  --intent-medium:  var(--gold);
  --intent-low:     var(--teal);
  --intent-none:    var(--ink-faint);

  /* ---- ELEVATION ---- */
  --shadow-sm: 0 1px 2px rgba(6,46,30,.06), 0 4px 14px rgba(6,46,30,.05);
  --shadow-md: 0 10px 30px rgba(6,46,30,.10), 0 2px 8px rgba(6,46,30,.06);
  --shadow-lg: 0 30px 70px rgba(6,46,30,.18), 0 8px 24px rgba(6,46,30,.10);

  /* ---- RADII ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 100px;

  /* ---- SPACING (4px base scale) ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- LAYOUT ---- */
  --maxw: 1180px;          /* marketing content width */
  --maxw-app: 1440px;      /* app shell width */
  --maxw-prose: 720px;     /* reading width */

  /* ---- TYPOGRAPHY ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(40px, 5.4vw, 68px);
  --fs-h1:      clamp(34px, 4.6vw, 56px);
  --fs-h2:      clamp(28px, 3.4vw, 44px);
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-lead:    19px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12.5px;
  --fs-kicker:  13px;

  --lh-tight: 1.04;   /* display + headings */
  --lh-snug:  1.3;
  --lh-body:  1.6;

  --ls-tight: -.015em;  /* headings */
  --ls-kicker: .13em;   /* uppercase eyebrows */

  --weight-display: 540;
  --weight-heading: 560;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- MOTION ---- */
  --ease-out: cubic-bezier(.2,.7,.2,1);     /* default reveal / entrance */
  --ease-spring: cubic-bezier(.2,.8,.2,1);  /* button press / hover lift */
  --dur-fast: .18s;
  --dur-base: .25s;
  --dur-slow: .7s;

  /* ---- FOCUS ---- */
  --focus-ring: 0 0 0 3px rgba(14,142,107,.35);
}

/* ============================================================
   DARK SURFACES  ·  apply via [data-theme="dark"] on a wrapper
   (used for: marketing showcase sections, optional inbox
   "focus mode". Brand + action + accent tokens are unchanged.)
   ============================================================ */

[data-theme="dark"]{
  --bg:           #062E1E;                      /* emerald-deep base */
  --surface:      rgba(255,255,255,.04);        /* raised panel */
  --surface-2:    rgba(255,255,255,.07);        /* hover / active panel */
  --paper:        rgba(255,255,255,.05);
  --line:         rgba(232,244,238,.12);
  --line-strong:  rgba(232,244,238,.22);
  --ink:          #F2FAF6;
  --ink-soft:     rgba(232,244,238,.72);
  --ink-faint:    rgba(232,244,238,.45);
  --bone:         #062E1E;
  --bone-2:       #04241844;
  /* on dark, the highlight green replaces emerald for accents */
  --emerald:      var(--jade);
}