/* AZTEC Website 2026: design tokens
   Source of truth: docs/DESIGN.md. Colour source: assets/brand/aztec-colour-palette.json.
   These map 1:1 to Elementor global colours/fonts in Phase 6. */

:root {
  /* Brand (supplied, unchanged) */
  --brand-green: #A6CE39;
  --brand-dark: #09171A;
  --brand-teal: #036A75;
  --brand-cool-white: #F6FCFC;
  --brand-warm-white: #FBFDF3;

  /* Surface ramp (derived) */
  --bg-900: #060F11;
  --bg-800: #09171A;
  --bg-700: #0C1E22;
  --bg-600: #112A2F;
  --bg-500: #17363C;

  /* Lines */
  --line: rgba(246, 252, 252, 0.10);
  --line-strong: rgba(246, 252, 252, 0.18);

  /* Text */
  --text: #F6FCFC;
  --text-2: #9FB6B3;
  --text-3: #6C8481;

  /* Accents tuned for dark surfaces */
  --teal-bright: #3E97A4;
  --green-bright: #B8DC55;

  /* Feedback */
  --warning: #F2B84B;
  --error: #F08A7C;
  --success: var(--brand-green);

  /* Typography */
  --font-display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.6rem, 1.4rem + 6vw, 5.5rem);
  --fs-h1: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem);
  --fs-h2: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  --fs-h4: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.05rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;
  --section-y: clamp(4rem, 9vw, 9rem);

  /* Layout */
  --container: 1280px;
  --container-wide: 1480px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;

  /* Radius */
  --radius-panel: 2px;
  --radius-control: 4px;

  /* Shadows (used sparingly) */
  --shadow-1: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 24px 60px -20px rgba(0, 0, 0, 0.75);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.5s;

  /* Header */
  --header-h: 76px;

  /* Breakpoints (reference; used in media queries) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}