/* ========================================================================
   ActionFlow — Colors & Type tokens
   Source of truth. Mirrors bootcamp-react (Tailwind @theme + Tailwind v4).
   ======================================================================== */

/* ── Web fonts ───────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

:root {
  /* ── Type families ────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* ── Core palette ─────────────────────────────────────────────────── */
  /* Dark obsidian is the one true background. Everything else sits on it. */
  --color-dark-obsidian: #050505;
  --color-obsidian-raise: #0c0c0e;   /* Testimonials section bg */
  --color-white: #ffffff;

  /* Zinc ramp (Tailwind v4 defaults — used throughout) */
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;   /* body copy default */
  --color-zinc-500: #71717a;   /* muted / meta */
  --color-zinc-600: #52525b;   /* eyebrow / very muted */
  --color-zinc-700: #3f3f46;

  /* Surface & border — translucent white overlays on obsidian */
  --color-surface:         rgba(255, 255, 255, 0.03);  /* card fills */
  --color-surface-hover:   rgba(255, 255, 255, 0.06);
  --color-surface-strong:  rgba(255, 255, 255, 0.08);
  --color-border:          rgba(255, 255, 255, 0.06);
  --color-border-strong:   rgba(255, 255, 255, 0.10);
  --color-border-subtle:   rgba(255, 255, 255, 0.03);

  /* ── Emerald (primary accent — "ça marche") ───────────────────────── */
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;   /* accent text, highlights */
  --color-emerald-500: #10b981;   /* glows, primary brand accent */
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;

  /* Emerald tints (used on surfaces) */
  --color-emerald-tint-8:  rgba(16, 185, 129, 0.08);  /* eyebrow badge bg */
  --color-emerald-tint-10: rgba(16, 185, 129, 0.10);  /* icon tile bg */
  --color-emerald-tint-15: rgba(16, 185, 129, 0.15);
  --color-emerald-glow:    rgba(16, 185, 129, 0.30);

  /* ── Red (problem / pain / urgency) ───────────────────────────────── */
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-tint-8: rgba(220, 38, 38, 0.08);
  --color-red-tint-10: rgba(220, 38, 38, 0.10);

  /* Semantic assignments */
  --fg-strong: var(--color-white);
  --fg:        var(--color-zinc-300);
  --fg-muted:  var(--color-zinc-400);
  --fg-meta:   var(--color-zinc-500);
  --fg-faint:  var(--color-zinc-600);

  --bg:        var(--color-dark-obsidian);
  --bg-raise:  var(--color-obsidian-raise);

  --accent:          var(--color-emerald-400);
  --accent-strong:   var(--color-emerald-500);
  --accent-tint:     var(--color-emerald-tint-8);
  --accent-border:   var(--color-emerald-tint-10);
  --accent-glow:     var(--color-emerald-glow);

  --danger:          var(--color-red-400);
  --danger-tint:     var(--color-red-tint-8);

  /* ── Radii ────────────────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;   /* rounded-xl for icon tiles */
  --radius-lg: 16px;   /* rounded-2xl cards */
  --radius-xl: 24px;   /* rounded-3xl / image frames */
  --radius-2xl: 32px;  /* double-bezel hero frames */
  --radius-pill: 9999px;

  /* ── Shadows + glows ─────────────────────────────────────────────── */
  --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.40);
  --shadow-cta-white: 0 0 40px rgba(255, 255, 255, 0.20);
  --shadow-cta-white-hover: 0 0 60px rgba(255, 255, 255, 0.35);
  --shadow-inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-glow-white: 0 0 24px rgba(255, 255, 255, 0.15);
  --shadow-glow-emerald: 0 0 60px rgba(16, 185, 129, 0.30);

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Spacing scale (matches Tailwind default rem scale) ───────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* ========================================================================
   Base type styles — semantic defaults matching the live site.
   ======================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg-muted);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display — Space Grotesk, tight tracking, bold. */
.af-display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h1, .af-h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);  /* 36 → 60 */
  font-weight: 700;
  line-height: 1.1;
}

h2, .af-h2 {
  font-size: clamp(1.875rem, 4vw, 3.25rem); /* 30 → 52 */
  font-weight: 700;
}

h3, .af-h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);    /* 24 → 32 */
  font-weight: 700;
}

h4, .af-h4 {
  font-size: 1.125rem;  /* 18 */
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Body */
p, .af-body {
  font-family: var(--font-sans);
  color: var(--fg-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.af-body-lg { font-size: 1.125rem; line-height: 1.7; }
.af-body-sm { font-size: 0.875rem; line-height: 1.6; }
.af-meta    { font-size: 0.75rem;  color: var(--fg-meta); line-height: 1.5; }

/* Eyebrow — the omnipresent uppercase-tracked pill label */
.af-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
}

/* Gradient-text headline (Hero, FAQ, GuideLuca use this trick) */
.af-gradient-text {
  background: linear-gradient(to bottom, #ffffff, var(--color-zinc-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Link + strong defaults */
strong, .af-strong { color: var(--fg-strong); font-weight: 600; }
a { color: var(--fg-strong); text-decoration: none; transition: color 0.3s var(--ease-expo-out); }
a:hover { color: var(--accent); }

/* Monospace — not used in the site, but included for parity */
code, kbd, .af-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
}