/* =====================================================================
   VideoART — Design Tokens
   Typography (Syne for headlines / Inter for text) + Colors
   ===================================================================== */

/* ---------- FONT FACES ---------- */
@font-face {
  font-family: "Syne";
  src: url("../fonts/Syne-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
:root {
  /* ---- Brand colors: the three strokes of the logo ---- */
  --va-red: #E30613;
  /* primary brand red (top stroke) */
  --va-red-600: #C70510;
  /* hover / pressed */
  --va-red-700: #A8040D;
  /* deep accent */
  --va-red-100: #FCE4E6;
  /* tint surface */
  --va-red-050: #FFF5F6;
  /* faintest wash */

  --va-blue: #0072CE;
  /* secondary accent (middle stroke) */
  --va-blue-600: #005FAB;
  --va-blue-100: #E1EEF9;

  --va-green: #1F8A5B;
  /* tertiary accent (bottom stroke) */
  --va-green-600: #167047;
  --va-green-100: #E1F1E9;

  /* ---- Neutrals ---- */
  --va-black: #0A0A0A;
  /* near-black ink */
  --va-ink: #111111;
  /* body text */
  --va-graphite: #2B2B2B;
  /* secondary text */
  --va-slate: #545454;
  /* tertiary text */
  --va-mute: #8A8A8A;
  /* placeholder, captions */
  --va-line: #E6E6E6;
  /* hairlines, dividers */
  --va-line-soft: #F0F0F0;
  /* subtle dividers */
  --va-surface: #F7F7F7;
  /* light surface fill */
  --va-paper: #FAFAFA;
  /* off-white page */
  --va-white: #FFFFFF;

  /* ---- Semantic foreground ---- */
  --fg-1: var(--va-ink);
  /* default body */
  --fg-2: var(--va-graphite);
  /* secondary */
  --fg-3: var(--va-slate);
  /* tertiary */
  --fg-mute: var(--va-mute);
  /* captions */
  --fg-on-red: var(--va-white);
  /* on red surfaces */
  --fg-accent: var(--va-red);
  /* accent text */

  /* ---- Semantic background ---- */
  --bg-1: var(--va-white);
  /* default page */
  --bg-2: var(--va-paper);
  /* alt page */
  --bg-3: var(--va-surface);
  /* cards / sections */
  --bg-ink: var(--va-black);
  /* dark surface */
  --bg-accent: var(--va-red);
  /* accent surface */
  --bg-accent-soft: var(--va-red-050);

  /* ---- Borders ---- */
  --border-1: var(--va-line);
  --border-2: var(--va-line-soft);
  --border-strong: var(--va-ink);
  --border-accent: var(--va-red);

  /* ---- Status (sparingly used; brand stays red/black/white) ---- */
  --status-ok: var(--va-green);
  --status-info: var(--va-blue);
  --status-err: var(--va-red);

  /* ---- Type families ---- */
  --font-display: "Syne", "Syne Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (modular, 1.250) ---- */
  --fs-12: 0.75rem;
  /* 12px caption / overline */
  --fs-13: 0.8125rem;
  /* 13px micro */
  --fs-14: 0.875rem;
  /* 14px small */
  --fs-16: 1rem;
  /* 16px body */
  --fs-18: 1.125rem;
  /* 18px lede */
  --fs-20: 1.25rem;
  /* 20px h6 */
  --fs-24: 1.5rem;
  /* 24px h5 */
  --fs-30: 1.875rem;
  /* 30px h4 */
  --fs-36: 2.25rem;
  /* 36px h3 */
  --fs-48: 3rem;
  /* 48px h2 */
  --fs-64: 4rem;
  /* 64px h1 */
  --fs-88: 5.5rem;
  /* 88px display */

  /* ---- Line heights ---- */
  --lh-tight: 1.05;
  /* display headlines */
  --lh-snug: 1.15;
  /* h2/h3 */
  --lh-normal: 1.45;
  /* body */
  --lh-loose: 1.65;
  /* long-form */

  /* ---- Tracking ---- */
  --tr-display: -0.02em;
  /* tighten Syne headlines */
  --tr-tight: -0.01em;
  --tr-normal: 0;
  --tr-wide: 0.04em;
  --tr-eyebrow: 0.16em;
  /* uppercase labels */

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

  /* ---- Spacing (4px base) ---- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- Radii — restrained, clinical ---- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* ---- Shadows — subtle, no glow ---- */
  --shadow-1: 0 1px 0 rgba(10, 10, 10, 0.04), 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-2: 0 1px 2px rgba(10, 10, 10, 0.04), 0 4px 12px rgba(10, 10, 10, 0.06);
  --shadow-3: 0 2px 4px rgba(10, 10, 10, 0.05), 0 12px 32px rgba(10, 10, 10, 0.08);
  --shadow-focus: 0 0 0 3px rgba(227, 6, 19, 0.25);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph: cubic-bezier(0.2, 0, 0.1, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- Layout ---- */
  --max-w-prose: 68ch;
  --max-w-content: 1200px;
  --container-pad: clamp(20px, 4vw, 56px);
}

/* ---------- BASE TYPOGRAPHY ---------- */
html {
  font-size: 16px;
}

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

/* Headlines — Syne, tight tracking */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}

h2 {
  font-size: var(--fs-48);
}

h3 {
  font-size: var(--fs-36);
}

h4 {
  font-size: var(--fs-30);
}

h5 {
  font-size: var(--fs-24);
  letter-spacing: var(--tr-tight);
}

h6 {
  font-size: var(--fs-20);
  letter-spacing: var(--tr-tight);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-88);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.lede {
  font-family: var(--font-text);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

p {
  margin: 0 0 var(--sp-4);
  color: var(--fg-1);
  text-wrap: pretty;
}

small,
.caption {
  font-size: var(--fs-13);
  color: var(--fg-3);
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}

a:hover {
  color: var(--va-red);
  text-decoration-color: var(--va-red);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

::selection {
  background: var(--va-red);
  color: var(--va-white);
}

/* Focus ring */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-2);
}