/* ============================================================
   SOLUTIONS DRIVEN — Core Design Tokens
   Colors + Typography. Import this first.
   <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — RAW PALETTE
     ============================================================ */

  /* Brand green — the single hero accent. */
  --sd-green:        #00A36D;  /* primary brand green (logo, buttons, links) */
  --sd-green-600:    #00875A;  /* hover / pressed green */
  --sd-green-400:    #4ADE80;  /* lighter green, used on dark surfaces */
  --sd-green-glow:   #00FF88;  /* electric green — wireframe glow, never as text on white */
  --sd-green-tint:   #0A2A1E;  /* green-tinted dark surface ("New World") */

  /* Ink — near-black greens. Backgrounds & deep surfaces. */
  --sd-ink-900:      #14181F;  /* deepest background */
  --sd-ink-800:      #141A18;  /* page background (dark mode) */
  --sd-ink-700:      #1A1F1E;  /* primary dark surface (deck base) */
  --sd-ink-600:      #2A2F2E;  /* raised card on dark */
  --sd-ink-500:      #2D3533;  /* border / divider on dark */
  --sd-ink-400:      #3A4A40;  /* hairline accent on dark */

  /* Neutral grey ramp — text & UI on light + muted text on dark */
  --sd-white:        #FFFFFF;
  --sd-grey-100:     #F4F5F5;  /* light page background */
  --sd-grey-200:     #E5E7EB;  /* light borders */
  --sd-grey-300:     #D1D5DB;  /* dividers, disabled */
  --sd-grey-400:     #B0B8B5;  /* muted text on dark */
  --sd-grey-500:     #9CA3AF;  /* secondary text */
  --sd-grey-600:     #6B7280;  /* tertiary text on light */
  --sd-grey-800:     #2D3533;  /* body text on light */

  /* Semantic accents (used sparingly — comparison / risk / data) */
  --sd-red:          #FF3B3B;  /* "Old World" / risk / mis-hire */
  --sd-red-deep:     #DE1A1B;
  --sd-red-tint:     #2A1614;  /* red-tinted dark surface */
  --sd-amber:        #F59F0A;  /* caution / cost stat */

  /* ============================================================
     COLOR — SEMANTIC ROLES
     ============================================================ */
  --bg:              var(--sd-ink-700);   /* default surface is DARK — brand is dark-first */
  --bg-deep:         var(--sd-ink-900);
  --surface:         var(--sd-ink-600);
  --surface-green:   var(--sd-green-tint);
  --border:          var(--sd-ink-500);
  --border-strong:   var(--sd-ink-400);

  --fg:              var(--sd-white);      /* primary text on dark */
  --fg-muted:        var(--sd-grey-400);   /* secondary text on dark */
  --fg-subtle:       var(--sd-grey-500);   /* tertiary / labels on dark */

  --accent:          var(--sd-green);
  --accent-hover:    var(--sd-green-600);
  --on-accent:       #06140F;              /* near-black text on green buttons */

  /* Light-mode roles (for documents / printed collateral) */
  --light-bg:        var(--sd-white);
  --light-surface:   var(--sd-grey-100);
  --light-fg:        var(--sd-ink-700);
  --light-fg-muted:  var(--sd-grey-600);
  --light-border:    var(--sd-grey-200);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;  /* headlines */
  --font-body:    "Inter", system-ui, -apple-system, sans-serif; /* body, UI */

  /* Weights — Outfit headlines run heavy (700/800), Inter body 400–600 */
  --w-regular: 400;  /* @kind font */
  --w-medium:  500;  /* @kind font */
  --w-semibold:600;  /* @kind font */
  --w-bold:    700;  /* @kind font */
  --w-extra:   800;  /* @kind font */

  /* Type scale (1.250 major-third-ish, tuned). --t-display is the hero headline size. */
  --t-display:  clamp(2.75rem, 5vw, 4.5rem);  /* @kind font */
  --t-h1:       clamp(2.25rem, 4vw, 3.25rem); /* @kind font */
  --t-h2:       clamp(1.75rem, 3vw, 2.5rem);  /* @kind font */
  --t-h3:       1.5rem;    /* @kind font */
  --t-h4:       1.25rem;   /* @kind font */
  /* --t-lead: intro paragraphs */
  --t-lead:     1.25rem;   /* @kind font */
  --t-body:     1rem;      /* @kind font */
  --t-small:    0.875rem;  /* @kind font */
  /* --t-label: uppercase eyebrow labels */
  --t-label:    0.75rem;   /* @kind font */

  --lh-tight:   1.05;  /* @kind font */
  --lh-snug:    1.2;   /* @kind font */
  --lh-body:    1.6;   /* @kind font */

  /* --track-tight: display headlines · --track-label: uppercase eyebrows */
  --track-tight:  -0.02em;   /* @kind font */
  --track-label:   0.14em;   /* @kind font */

  /* ============================================================
     RADII / SHADOW / SPACING
     ============================================================ */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.45);
  --glow-green: 0 0 32px rgba(0,255,136,.25);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --maxw: 1200px;  /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE CLASSES — apply directly or copy into your styles
   ============================================================ */
.sd-display {
  font-family: var(--font-display);
  font-weight: var(--w-extra);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}
.sd-h1 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--track-tight); }
.sd-h2 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--track-tight); }
.sd-h3 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--t-h3); line-height: var(--lh-snug); }
.sd-h4 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--t-h4); line-height: var(--lh-snug); }
.sd-lead { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--t-lead); line-height: var(--lh-body); color: var(--fg-muted); }
.sd-body { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--t-body); line-height: var(--lh-body); }
.sd-small { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; }
.sd-label {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}
/* Green emphasis word inside a headline (e.g. "...Get Wrong") */
.sd-accent-word { color: var(--accent); }