/* ============================================================
   DANNY SHAKET — Design System Tokens
   "Elite dark tech. Near-black + electric magenta."
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&family=Heebo:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

:root {
  /* ── BRAND COLORS ─────────────────────────────────────── */
  --color-primary: #f8048a;          /* Hot magenta — the single brand accent  */
  --color-primary-hover: #d60376;    /* Magenta hover / press */
  --color-primary-bright: #e91e8c;   /* Slightly warmer for active step states */

  /* Tints (rgba magenta) */
  --color-primary-5: rgba(248, 4, 138, 0.05);
  --color-primary-10: rgba(248, 4, 138, 0.10);
  --color-primary-20: rgba(248, 4, 138, 0.20);
  --color-primary-30: rgba(248, 4, 138, 0.30);
  --color-primary-40: rgba(248, 4, 138, 0.40);

  /* ── SURFACES ─────────────────────────────────────────── */
  --color-bg: #050505;          /* Void black — page background */
  --color-surface: #0e0e10;     /* Cards, nav, elevated panels */
  --color-surface-2: #0a0a0a;   /* Alternate section bg */
  --color-step-bg: #111111;     /* Step-number badge default */

  /* ── TEXT ─────────────────────────────────────────────── */
  --color-fg: #ffffff;          /* Headlines, primary text */
  --color-fg-2: #e2e8f0;        /* Body large, slate-200 */
  --color-fg-3: #94a3b8;        /* Secondary, slate-400 */
  --color-fg-4: #64748b;        /* Muted, fine print, slate-500 */
  --color-fg-5: #475569;        /* Disabled / placeholders */

  /* ── BORDERS / GLASS ──────────────────────────────────── */
  --border-ghost: rgba(255, 255, 255, 0.05);   /* nav / section dividers */
  --border-soft:  rgba(255, 255, 255, 0.10);   /* glass card edges */
  --border-medium: rgba(255, 255, 255, 0.20);  /* hover edge */
  --glass-fill: rgba(255, 255, 255, 0.05);     /* card body */
  --glass-fill-hover: rgba(255, 255, 255, 0.08);

  /* ── SEMANTIC ─────────────────────────────────────────── */
  --color-success: #34d399;     /* emerald-400 — FIT checkmarks */
  --color-success-tint: rgba(52, 211, 153, 0.30);
  --color-danger: rgba(239, 68, 68, 0.70); /* red-500/70 — exclusion list */

  /* ── TYPOGRAPHY ───────────────────────────────────────── */
  --font-display: "Plus Jakarta Sans", "Heebo", system-ui, sans-serif;
  --font-body:    "Inter", "Heebo", system-ui, sans-serif;
  --font-hebrew:  "Heebo", "Plus Jakarta Sans", "Inter", sans-serif;
  --font-icon:    "Material Symbols Outlined";

  /* Type scale (px) — based on Tailwind defaults used in the site */
  --fs-hero-xl: clamp(48px, 8vw, 150px);   /* Hero H1 */
  --fs-hero:    clamp(40px, 6vw, 96px);    /* Section H2 */
  --fs-h2:      clamp(32px, 4.5vw, 60px);
  --fs-h3:      clamp(24px, 3vw, 36px);
  --fs-h4:      24px;                       /* Card title */
  --fs-body-lg: 20px;
  --fs-body:    18px;
  --fs-body-sm: 16px;
  --fs-eyebrow: 14px;                       /* All-caps category labels */
  --fs-micro:   11px;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
  --lh-loose: 1.85;

  /* Tracking — magenta eyebrows live wide */
  --track-tighter: -0.02em;
  --track-tight: -0.01em;
  --track-normal: 0em;
  --track-wide: 0.06em;
  --track-eyebrow: 0.25em;   /* default */
  --track-eyebrow-lg: 0.35em;

  /* ── LAYOUT ───────────────────────────────────────────── */
  --max-w: 1440px;
  --pad-x: clamp(16px, 4vw, 48px);   /* px-4 → px-12 */
  --section-y: clamp(48px, 8vw, 112px); /* py-12 → py-28 */
  --nav-h: 80px;

  /* ── RADII ────────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;        /* rounded-xl — default for cards & buttons */
  --r-xl: 24px;        /* rounded-2xl — logo tiles, large cards */
  --r-full: 9999px;

  /* ── SHADOWS ──────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 25px 60px rgba(0, 0, 0, 0.50);
  --shadow-2xl: 0 35px 80px rgba(0, 0, 0, 0.60);

  /* Magenta glow — for buttons & CTAs */
  --shadow-magenta-sm: 0 10px 30px rgba(248, 4, 138, 0.20);
  --shadow-magenta-md: 0 20px 50px rgba(248, 4, 138, 0.30);
  --shadow-magenta-lg: 0 30px 80px rgba(248, 4, 138, 0.40);

  /* Ambient glow filter values (apply to .glow div) */
  --glow-blur-sm: 100px;
  --glow-blur-md: 120px;
  --glow-blur-lg: 180px;

  /* ── MOTION ───────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --dur-reveal: 550ms;
}

/* ──────────────────────────────────────────────────────────
   BASE RESET
   ────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg-2);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[dir="rtl"] {
  font-family: var(--font-hebrew);
}

/* ──────────────────────────────────────────────────────────
   SEMANTIC TYPE STYLES
   ────────────────────────────────────────────────────────── */
.h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-hero-xl);
  line-height: 0.95;
  letter-spacing: var(--track-tighter);
  color: var(--color-fg);
  margin: 0 0 0.4em;
}

/* Gradient hero treatment — used on landing H1 */
.h1-gradient {
  background: linear-gradient(to bottom right, #ffffff 50%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--color-fg);
  margin: 0 0 0.5em;
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--color-fg);
}

.h4, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  margin: 0 0 1rem;
}

.eyebrow-lg { letter-spacing: var(--track-eyebrow-lg); font-size: 18px; }

.body-lg {
  font-size: var(--fs-body-lg);
  color: var(--color-fg-3);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
}

.body {
  font-size: var(--fs-body);
  color: var(--color-fg-3);
  line-height: var(--lh-relaxed);
}

.muted { color: var(--color-fg-4); }

.nav-link {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-fg-3);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.nav-link:hover { color: var(--color-primary); }

/* Drop number — large magenta numeral used in REAL PROBLEM cards */
.drop-number {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 36px;
  line-height: 1;
  color: rgba(248, 4, 138, 0.30);
  margin-bottom: 1.5rem;
}

/* Stat number — large magenta numeral, full opacity */
.stat-number {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 48px;
  line-height: 1;
  color: var(--color-primary);
}

/* ──────────────────────────────────────────────────────────
   LOGO LOCKUP — DANNY SHAKET
   The split color IS the logo: white + magenta, same font, same weight.
   ────────────────────────────────────────────────────────── */
.logo-lockup {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--color-fg);
  font-size: 30px;
  line-height: 1;
  display: inline-block;
}
.logo-lockup .magenta { color: var(--color-primary); }

/* ──────────────────────────────────────────────────────────
   MATERIAL SYMBOLS — icon font setup
   ────────────────────────────────────────────────────────── */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ──────────────────────────────────────────────────────────
   FOCUS / A11Y
   ────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}