/* =========================================================================
   impAct Design System — Colors & Type (landing tokens)
   Ported from handoff_landing/colors_and_type.css.
   Font URLs rewritten to /static/font/ (server-resident files).
   ========================================================================= */

/* ---- Webfonts ------------------------------------------------------------
   PP Neue Machina → /static/font/PPNeueMachina-*.otf (exact match)
   Inter, Roboto, etc. → Google Fonts (online import; no local woff2 needed)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700;900&family=Patrick+Hand&family=Work+Sans:wght@400;600;700&family=Golos+Text:wght@400;500&family=Bungee&family=Fraunces:wght@400;700;900&display=swap');

/* PP Neue Machina — brand display face */
@font-face {
  font-family: "PP Neue Machina";
  src: url("/static/font/PPNeueMachina-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("/static/font/PPNeueMachina-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("/static/font/PPNeueMachina-Ultrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("/static/font/PPNeueMachina-Regular.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("/static/font/PPNeueMachina-Ultrabold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("/static/font/PPNeueMachina-Ultrabold.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}

:root {
  /* ── Raw palette ───────────────────────────────────────────────── */
  --navy-900: rgb(6, 11, 28);
  --navy-850: rgb(10, 17, 41);
  --navy-800: rgb(11, 17, 31);
  --navy-750: rgb(14, 25, 60);
  --navy-700: rgb(16, 26, 61);
  --navy-600: rgb(25, 44, 100);
  --navy-500: rgb(35, 36, 55);

  --slate-50:  rgb(235, 242, 254);
  --slate-100: rgb(229, 231, 235);
  --slate-200: rgb(217, 217, 217);
  --slate-300: rgb(203, 213, 225);
  --slate-400: rgb(156, 163, 175);
  --slate-500: rgb(100, 116, 139);
  --slate-600: rgb(71, 85, 105);
  --slate-700: rgb(51, 65, 85);
  --slate-800: rgb(30, 41, 59);
  --slate-900: rgb(15, 23, 42);
  --ink-900:   rgb(17, 17, 17);
  --ink-950:   rgb(27, 27, 27);
  --ink-1000:  rgb(0, 0, 0);

  --red-700: rgb(193, 30, 30);
  --red-600: rgb(220, 54, 46);
  --red-500: rgb(235, 77, 70);
  --red-glow: rgba(220, 54, 46, 0.35);

  --blue-700: rgb(29, 78, 216);
  --blue-500: rgb(59, 130, 246);
  --blue-300: rgba(59, 130, 246, 0.3);
  --blue-150: rgba(59, 130, 246, 0.15);

  --teal-500: rgb(20, 184, 166);

  /* ── Semantic tokens ──────────────────────────────────────────── */
  --bg:             var(--navy-900);
  --bg-elevated:    var(--navy-800);
  --bg-card:        var(--navy-850);
  --bg-card-hover:  var(--navy-700);
  --bg-overlay:     rgba(6, 11, 28, 0.5);

  --fg:             rgb(255, 255, 255);
  --fg-muted:       var(--slate-400);
  --fg-subtle:      var(--slate-500);
  --fg-on-light:    var(--slate-900);

  --border:         var(--slate-800);
  --border-subtle:  rgba(255, 255, 255, 0.1);
  --border-strong:  var(--slate-700);
  --divider:        var(--slate-100);

  --accent:         var(--navy-600);
  --accent-soft:    rgba(25, 44, 100, 0.35);
  --accent-hover:   rgb(35, 60, 130);
  --danger:         var(--red-600);
  --danger-soft:    var(--red-glow);
  --interactive:    var(--blue-500);
  --interactive-soft: var(--blue-150);
  --focus-ring:     var(--blue-500);

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.25);
  --shadow-lg:  0 12px 40px rgba(10,17,41,0.4);
  --shadow-glow: 0 0 0 4px rgba(59,130,246,0.2);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --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;

  --font-display: "PP Neue Machina", "Neue Machina", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-ui:      "Roboto", system-ui, sans-serif;
  --font-serif:   "Fraunces", "PT Serif", Georgia, serif;
  --font-hand:    "Patrick Hand", cursive;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ── Base type scale ────────────────────────────────────────────── */
.h-display { font-family: var(--font-display); font-weight: 900; font-size: 79px; line-height: 0.95; letter-spacing: -0.03em; }
.h1 { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1.0; letter-spacing: -0.025em; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.h4 { font-family: var(--font-display); font-weight: 700; font-size: 21.6px; line-height: 1.15; letter-spacing: -0.01em; }
.body-lg { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.55; }
.body { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; }
.body-sm { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 1.4; }
.label { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: 0.005em; }
.button-text { font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: 0.005em; }
.mono { font-family: var(--font-mono); font-size: 13px; }
.hand { font-family: var(--font-hand); font-size: 42px; line-height: 1; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}