/* =============================================================
   Queen City AI — Core Tokens
   Foundations: dark navy/charcoal canvas, single restrained sky
   accent (with rare teal/emerald as category secondaries), and
   an editorial sans-serif type system.
   ============================================================= */

/* Space Grotesk — self-hosted from /fonts (brand-provided) */
@font-face {
  font-family: "Space Grotesk";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
}
/* Static weight fallbacks (older browsers / when variable axis fails) */
@font-face {
  font-family: "Space Grotesk";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Space Grotesk";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Space Grotesk";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Space Grotesk";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Space Grotesk";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype");
}

/* Inter — self-hosted variable font (brand-provided, opsz+wght axes) */
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations"),
       url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
}

/* JetBrains Mono — self-hosted variable font (brand-provided, wght axis) */
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype");
}

:root {
  /* ---------- Surfaces / ink (institutional navy + zinc) ---------- */
  --ink-000: #050608;            /* page void — beneath the canvas */
  --ink-50:  #09090b;            /* canvas / page bg */
  --ink-100: #0e1015;            /* deep navy surface */
  --ink-200: #18181b;            /* elevated surface */
  --ink-300: #27272a;            /* surface / chips */
  --ink-400: #3f3f46;            /* hairline-strong / divider */
  --ink-500: #52525b;            /* faint divider */
  --hair:    rgba(63, 63, 70, 0.50);     /* default hairline */
  --hair-strong: rgba(63, 63, 70, 0.85); /* hairline on hover */

  /* ---------- Foreground (warm-white through quiet grey) ---------- */
  --fg-1: #fafafa;   /* primary copy / headlines */
  --fg-2: #d4d4d8;   /* secondary copy / body */
  --fg-3: #a1a1aa;   /* tertiary copy / muted */
  --fg-4: #71717a;   /* labels / captions */
  --fg-5: #52525b;   /* disabled / faint */

  /* ---------- Primary accent (sky) — used sparingly ---------- */
  --accent:           #38bdf8;
  --accent-hover:     #7dd3fc;
  --accent-pressed:   #0ea5e9;
  --accent-quiet:     #38bdf81a;   /* 10% — chip backgrounds */
  --accent-glow:      #38bdf826;   /* 15% — glow halos */
  --accent-line:      #38bdf866;   /* 40% — bordered chips */
  --accent-ink:       #0c4a6e;     /* deep accent for fills on light */

  /* ---------- Category accents (used 1:1 with product class) ---------- */
  --cat-sky:     #38bdf8;   /* SDR Swarm / Game Plan */
  --cat-teal:    #2dd4bf;   /* Workflow Economics / Automation */
  --cat-emerald: #34d399;   /* Control Room / Agent Systems */

  /* ---------- Semantic ---------- */
  --success: #34d399;
  --warning: #f59e0b;
  --danger:  #f87171;
  --info:    #38bdf8;

  /* ---------- Type scale ---------- */
  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --fs-display-xl: clamp(56px, 7vw, 96px);  /* hero */
  --fs-display-lg: clamp(40px, 5vw, 64px);  /* section h2 */
  --fs-display-md: clamp(28px, 3.5vw, 40px);
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 24px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-label:   12px;   /* uppercased section labels */
  --fs-eyebrow: 11px;

  --lh-display: 1.04;
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-label:   0.2em;     /* uppercase eyebrow */

  /* ---------- Spacing scale (4px grid) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- Radii ---------- */
  --r-xs:  4px;     /* dense inputs */
  --r-sm:  8px;     /* chips, icon tiles */
  --r-md:  12px;    /* small cards */
  --r-lg:  16px;    /* cards */
  --r-xl:  24px;    /* big cards / CTAs banners */
  --r-2xl: 32px;
  --r-pill: 9999px; /* buttons, pills */

  /* ---------- Elevation (restrained — mostly hairlines + glows) ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
  --shadow-glow-sm: 0 0 20px rgba(56,189,248,0.10);
  --shadow-glow-md: 0 0 40px rgba(56,189,248,0.15);
  --shadow-glow-lg: 0 0 60px rgba(56,189,248,0.20);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 600ms;

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-pad: clamp(16px, 4vw, 32px);

  /* ---------- Background motifs ---------- */
  --grid-line: rgba(255,255,255,0.02);
  --grid-size: 64px;
  --noise-opacity: 0.025;
}

/* =============================================================
   Base elements (use only as a starting point, not a reset)
   ============================================================= */

html {
  background: var(--ink-50);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.display-xl  { font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--tracking-tighter); }
.display-lg  { font-size: var(--fs-display-lg); line-height: var(--lh-display); letter-spacing: var(--tracking-tighter); }
.display-md  { font-size: var(--fs-display-md); line-height: var(--lh-tight);   letter-spacing: var(--tracking-tight); }
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p, .p { color: var(--fg-2); font-size: var(--fs-body); line-height: var(--lh-body); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-2); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--fg-3); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--fg-4); }

.eyebrow, .section-label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 600;
  color: var(--accent);
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--fg-2);
}

/* Gradient text — reserved for ONE phrase per page, max */
.text-accent-gradient {
  background: linear-gradient(90deg, var(--cat-sky) 0%, var(--cat-teal) 50%, var(--cat-emerald) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Numerals for KPIs/metrics */
.tabular { font-variant-numeric: tabular-nums; }

/* Selection */
::selection { background: var(--accent); color: var(--ink-50); }