/*
 * SPEDGenie™ Design Tokens
 * Single source of truth for typography, color, and spacing.
 * Import this file in every page: <link rel="stylesheet" href="/design-tokens.css">
 */

:root {
  /* ── COLORS ─────────────────────────────────────── */
  --navy:       #0f2b3d;
  --navy-mid:   #1a3d52;
  --navy-lt:    #e8edf3;
  --teal:       #0d9488;
  --teal-mid:   #0f766e;
  --teal-dk:    #085f59;
  --teal-lt:    #e0f4f2;
  --gold:       #c9a84c;
  --gold-dk:    #9e7a2a;
  --gold-lt:    #fef9ec;
  --purple:     #6d28d9;
  --purple-lt:  #ede9fe;
  --white:      #ffffff;
  --bg:         #f7f9fb;
  --border:     #e2eaf0;
  --muted:      #64748b;
  --text:       #1a2b3c;
  --red:        #dc2626;
  --red-lt:     #fef2f2;
  --green:      #16a34a;
  --green-lt:   #f0fdf4;
  --amber:      #d97706;

  /* ── TYPOGRAPHY SCALE ───────────────────────────── */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  /* Display — hero numbers, prices */
  --text-display:       32px;
  --text-display-wt:    700;
  --text-display-lh:    1.0;

  /* Section title — major headings */
  --text-title:         clamp(26px, 3.5vw, 38px);
  --text-title-wt:      600;
  --text-title-lh:      1.25;

  /* Card title — module names, card headers */
  --text-card-title:    18px;
  --text-card-title-wt: 700;
  --text-card-title-lh: 1.3;

  /* Body — paragraphs, descriptions */
  --text-body:          14px;
  --text-body-wt:       400;
  --text-body-lh:       1.7;

  /* UI / compact body — form text, list items */
  --text-ui:            13px;
  --text-ui-wt:         400;
  --text-ui-lh:         1.5;

  /* Feature list — plan feature items */
  --text-feature:       13px;
  --text-feature-wt:    400;
  --text-feature-lh:    1.5;

  /* Eyebrow / section label — uppercase labels */
  --text-eyebrow:       11px;
  --text-eyebrow-wt:    700;
  --text-eyebrow-ls:    0.5px;

  /* Caption / meta — footnotes, fine print */
  --text-caption:       11px;
  --text-caption-wt:    400;
  --text-caption-lh:    1.5;

  /* Button text */
  --text-btn:           14px;
  --text-btn-wt:        700;

  /* Nav text */
  --text-nav:           12px;
  --text-nav-wt:        600;

  /* ── SPACING SCALE ──────────────────────────────── */
  --gap-xs:    4px;
  --gap-sm:    8px;
  --gap-md:    16px;   /* card gap standard */
  --gap-lg:    24px;
  --gap-xl:    32px;
  --gap-2xl:   48px;   /* section padding */
  --gap-3xl:   64px;

  /* ── CARD / SURFACE ─────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --card-bg:     #ffffff;
  --card-border: 1.5px solid #e2eaf0;
  --card-pad:    20px 24px;
}

/* ── GLOBAL RESETS ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── UTILITY CLASSES ────────────────────────────────── */
.sg-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--text-eyebrow-wt);
  letter-spacing: var(--text-eyebrow-ls);
  text-transform: uppercase;
  color: var(--teal);
}

.sg-section-title {
  font-family: var(--font-serif);
  font-size: var(--text-title);
  font-weight: var(--text-title-wt);
  line-height: var(--text-title-lh);
  color: var(--navy);
}

.sg-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-card-title);
  font-weight: var(--text-card-title-wt);
  line-height: var(--text-card-title-lh);
  color: var(--navy);
}

.sg-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--text-body-wt);
  line-height: var(--text-body-lh);
  color: var(--text);
}

.sg-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: var(--text-display-wt);
  line-height: var(--text-display-lh);
  color: var(--navy);
}

.sg-btn {
  font-family: var(--font-sans);
  font-size: var(--text-btn);
  font-weight: var(--text-btn-wt);
}

.sg-caption {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--text-caption-wt);
  line-height: var(--text-caption-lh);
  color: var(--muted);
}