/* ─── Fonts ─────────────────────────────────────────────── */
/* Self-hosted Lato — same three cuts Google Fonts served (300/400/900).
   600/700 in styles.css have no cut and fall back up to 900 (see modules.md). */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/Lato-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/Lato-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/Lato-Black.woff2") format("woff2");
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

/* ─── Design Tokens ──────────────────────────────────────── */
:root {
  /* Brand accent */
  --accent:       #FFCC00;
  --accent-hover: #CCAA00;
  --accent-rgb:   255 204 0;   /* for the live-dot pulse glow */

  /* Anthracite ramp. The -rgb triple feeds translucent chrome:
     rgb(var(--anthracite-900-rgb) / .82) */
  --ode-anthracite-900: #181B1F;
  --ode-anthracite-800: #20242A;
  --ode-anthracite-700: #2B3038;
  --ode-anthracite-600: #3A414A;
  --anthracite-900-rgb: 24 27 31;

  /* Grays */
  --ode-gray-100: #ECEEF0;
  --ode-gray-200: #DEE1E5;
  --ode-gray-300: #C7CCD2;
  --ode-gray-500: #7A8390;   /* header separators / social icons */
  --ode-gray-600: #5A626D;

  /* Dark surfaces: page-level dark → media stage → overlay layer.
     The scrim triple is for the lightbox backdrop overlays. */
  --color-dark:        #121417;
  --color-dark-rgb:    18 20 23;   /* header bar at .94 */
  --surface-0:         #0A0C0E;
  --surface-0-rgb:     10 12 14;   /* slider dock gradient */
  --surface-1:         #0F1114;
  --surface-scrim-rgb: 8 10 12;

  --color-white: #fff;

  /* Text */
  --color-bg:   transparent;   /* keeps the header backdrop-filter showing page content */
  --color-text: #111111;
  --fg1:        var(--ode-anthracite-900);
  --fg2:        var(--ode-gray-600);

  /* Typography */
  --font-sans: "Lato", system-ui, -apple-system, sans-serif;

  --text-body: 0.9375rem;  /* 15px running copy */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  3rem;       /* 48px */

  --leading-tight:  1.2;
  --leading-normal: 1.6;

  /* Spacing scale (4px base) */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;

  /* Layout */
  --container-max: 1180px;            /* the site's content width */
  --container-pad: var(--space-8);    /* 32px content gutter */

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  20px;   /* lightbox panel + media */
  --pill-radius: 999px;

  /* Transitions */
  --ease-default: 150ms ease;
}

/* ─── Base Styles ─────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  text-wrap: balance;
}

a {
  color: var(--accent);
  text-decoration: underline;
  transition: color var(--ease-default);
}

a:hover {
  color: var(--accent-hover);
}

/* Focus visible for keyboard nav */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}