/**
 * Dark One-Hue CSS Token Module
 * Derived from measured amctheatres.com design tokens (2026-09-10).
 *
 * Architecture:
 * - Pure black (#000000) ground with 10 cool-grey steps (blue-green cast).
 * - Single accent hue slot (customizable via --accent-*).
 * - 11-step type scale with single 768px breakpoint (display type grows, body copy fixed).
 * - Dual-axis typography: role sets weight/tracking/line-height, step sets font-size.
 */

:root {
  /* --- Ground & Neutral Cool-Grey Ramp (11 tokens) --- */
  --color-black: #000000;
  --color-gray-950: #0B0D0F;
  --color-gray-800: #131618;
  --color-gray-700: #1B2023;
  --color-gray-600: #2A3337;
  --color-gray-500: #404F55;
  --color-gray-400: #5B7178;
  --color-gray-300: #95A8AE;
  --color-gray-200: #A8B8BC;
  --color-gray-100: #C5CFD3;
  --color-white: #FFFFFF;

  /* --- Single Accent Hue (Default: Cyan / Blue-500, configurable) --- */
  --color-accent-50: #B1DFFF;
  --color-accent-500: #1AB7FD;
  --color-accent-600: #02A4EC;
  --color-accent-700: #0288C4;
  --color-accent-950: #17232E;

  /* --- Motion & Timing --- */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Focus Ring --- */
  --focus-ring: 3px solid var(--color-accent-500);

  /* --- Radii --- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-pill: 9999px;

  /* --- Font Family --- */
  --font-sans: Gordita, 'Poppins', 'Century Gothic', Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- 11-Step Type Scale (Mobile < 768px default) --- */
  --font-size-50: 0.625rem;
  --font-size-100: 0.75rem;
  --font-size-200: 0.875rem;
  --font-size-300: 1rem;
  --font-size-400: 1rem;
  --font-size-500: 1.125rem;
  --font-size-600: 1.25rem;
  --font-size-700: 1.5rem;
  --font-size-800: 1.75rem;
  --font-size-900: 2rem;
  --font-size-950: 2.25rem;
}

/* --- Single 768px Breakpoint: Display Type Doubles, Body Copy Fixed --- */
@media (min-width: 768px) {
  :root {
    --font-size-400: 1.125rem;
    --font-size-500: 1.25rem;
    --font-size-600: 1.5rem;
    --font-size-700: 1.75rem;
    --font-size-800: 2.25rem;
    --font-size-900: 3rem;
    --font-size-950: 3.5rem;
  }
}

/* --- Dual-Axis Typography: Role Classes --- */
.headline {
  font-family: var(--font-sans);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.label {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.03em;
}

.caption {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  background-color: var(--color-black);
  color: var(--color-white);
}

/* --- Step Classes --- */
.text-50 { font-size: var(--font-size-50); }
.text-100 { font-size: var(--font-size-100); }
.text-200 { font-size: var(--font-size-200); }
.text-300 { font-size: var(--font-size-300); }
.text-400 { font-size: var(--font-size-400); }
.text-500 { font-size: var(--font-size-500); }
.text-600 { font-size: var(--font-size-600); }
.text-700 { font-size: var(--font-size-700); }
.text-800 { font-size: var(--font-size-800); }
.text-900 { font-size: var(--font-size-900); }
.text-950 { font-size: var(--font-size-950); }