/*
  Design tokens for Earley Bird Media.
  Palette is intentionally restricted to black / white / silver.

  Breakpoints (documented here for consistency; CSS custom properties
  cannot be used inside @media conditions, so these values are typed
  directly into each section's media queries):
    tablet:        768px
    desktop:       1024px
    desktop-large: 1440px
*/

:root {
  /* ---- Color: base ---- */
  --color-black: #0a0a0a;
  --color-white: #ffffff;

  /* ---- Color: silver scale ---- */
  --color-silver-100: #f5f5f5;
  --color-silver-200: #e2e2e2;
  --color-silver-300: #cfcfcf;
  --color-silver-400: #aaaaaa;
  --color-silver-500: #8a8a8a;
  --color-silver-600: #6f6f6f;
  --color-silver-700: #595959; /* AA-safe on white at body text sizes */
  --color-silver-800: #3d3d3d;
  --color-silver-900: #1f1f1f;

  /* ---- Color: semantic ----
     Site theme is dark by default; ".section--dark" is now the light
     variant used to alternate a couple of sections against it. */
  --color-bg: var(--color-black);
  --color-bg-inverse: var(--color-white);
  --color-text: var(--color-white);
  --color-text-inverse: var(--color-black);
  --color-text-muted: var(--color-silver-300); /* AA-safe on black */
  --color-text-muted-inverse: var(--color-silver-700);
  --color-border: var(--color-silver-800);
  --color-border-inverse: var(--color-silver-300);
  --color-focus-ring: var(--color-white);
  --color-focus-ring-inverse: var(--color-black);

  /* ---- Typography ---- */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.75rem, 5vw + 1.25rem, 7.5rem);
  --fs-h2: clamp(2.25rem, 3vw + 1.25rem, 4.5rem);
  --fs-h3: clamp(1.375rem, 1vw + 1rem, 2rem);
  --fs-lead: clamp(1.125rem, 0.6vw + 1rem, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-nav-link: 0.9375rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  --ls-tight: -0.02em;
  --ls-wide: 0.08em;

  /* ---- Spacing scale ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --space-7: 8rem;

  /* ---- Layout ---- */
  --container-max: 1440px;
  --container-padding: var(--space-3);
  --nav-height: 76px;

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}