/* ==========================================================================
   THE AMERICA AWARDS 2026 — Design Tokens
   Gold sampled directly from 01_BRAND official logo: #D3B783
   ========================================================================== */

:root {
  /* ---- Color: core brand ---- */
  --gold: #D3B783;
  --gold-strong: #7C5F30;   /* darkened for AA text contrast on light/champagne backgrounds (5.3:1) — the base --gold fails contrast as text on champagne */
  --gold-soft: rgba(211, 183, 131, 0.14);
  --gold-line: rgba(211, 183, 131, 0.28);

  /* ---- Color: dark surface (primary background) ---- */
  --graphite-950: #0B0B0D;
  --graphite-900: #131316;
  --graphite-800: #1B1B1F;
  --graphite-700: #26262B;
  --graphite-line: rgba(245, 241, 232, 0.10);

  /* ---- Color: light surface (secondary background) ---- */
  --champagne-100: #F7F2E7;
  --champagne-200: #F1E9D9;
  --champagne-300: #E6DAC2;

  /* ---- Semantic: form validation (muted terracotta — reads as an error without breaking the gold/ivory palette) ---- */
  --form-danger: #A23B2E;

  /* ---- Text ---- */
  --ink-on-dark: #F5F1E8;
  --ink-on-dark-muted: rgba(245, 241, 232, 0.68);
  --ink-on-dark-faint: rgba(245, 241, 232, 0.42);
  --ink-on-light: #17171A;
  --ink-on-light-muted: rgba(23, 23, 26, 0.64);

  /* ---- Semantic aliases (used throughout components.css) ---- */
  --bg-primary: var(--graphite-950);
  --bg-primary-raised: var(--graphite-900);
  --bg-secondary: var(--champagne-100);
  --bg-secondary-raised: var(--champagne-200);
  --text-primary: var(--ink-on-dark);
  --text-primary-muted: var(--ink-on-dark-muted);
  --text-secondary: var(--ink-on-light);
  --text-secondary-muted: var(--ink-on-light-muted);
  --accent: var(--gold);
  --accent-strong: var(--gold-strong);
  --border-dark: var(--graphite-line);
  --border-gold: var(--gold-line);

  /* ---- Typography ---- */
  --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.6vw, 1.75rem);
  --step-3:  clamp(1.9rem, 1.65rem + 1.2vw, 2.5rem);
  --step-4:  clamp(2.6rem, 2.1rem + 2.3vw, 3.75rem);
  --step-5:  clamp(3.2rem, 2.4rem + 3.8vw, 5.25rem);

  /* ---- Spacing scale ---- */
  --space-2xs: 0.4rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;

  /* ---- Layout ---- */
  --content-max: 1240px;
  --content-narrow: 760px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-medium: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-medium: 0ms;
  }
}