/**
 * CUBE CSS - Layer 1: Design Tokens
 * CSS custom properties for colors, spacing, typography, and layout
 */

:root {
  /* Colors */
  --color-bg-dark: #1d1911;
  --color-text-gold: #c0a160;
  --color-link: #c0a160;

  /* Typography */
  --font-base: "Archivo", 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  --line-height-base: 1.25;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Spacing Scale (based on 8px grid) */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2.5rem;   /* 40px */
  --space-xl: 4rem;     /* 64px */

  /* Layout Constraints */
  --max-width-content: 960px;
  --max-width-narrow: 780px;
  --max-width-mobile: 300px;

  /* Breakpoints (for reference) */
  --breakpoint-lg: 996px;
  --breakpoint-md: 767px;
  --breakpoint-sm: 599px;
  --breakpoint-xs: 360px;

  /* Font Sizes (Fluid Typography) */
  --font-size-hero-title: clamp(2.5rem, 10vw, 4rem);
  --font-size-hero-subtitle: clamp(1rem, 3vw, 1.25rem);
  --font-size-hero-link: clamp(1rem, 3vw, 1.125rem);
  --font-size-timeline-item: 1rem;
  --font-size-timeline-active: 1.25rem;
  --font-size-nav-item: 1rem;

  /* Z-Index Scale */
  --z-media-nav: 99;
  --z-timeline-nav: 100;
  --z-main-nav: 101;
  --z-modal: 200;

  /* Opacity Scale */
  --opacity-subtle: 0.2;
  --opacity-border: 0.3;
  --opacity-muted: 0.5;
  --opacity-medium: 0.6;
  --opacity-hover: 0.7;
  --opacity-nav-hover: 0.8;
  --opacity-high: 0.9;
  --opacity-nav-bg: 0.95;
  --opacity-main-nav-bg: 0.98;
  --opacity-full: 1;

  /* Navigation Heights */
  --height-media-nav: 4rem;
  --height-nav: 3rem;
  --height-main-nav: 3.25rem;

  /* Borders */
  --border-nav-subtle: 1px solid rgba(192, 161, 96, var(--opacity-subtle));
  --border-nav: 1px solid rgba(192, 161, 96, var(--opacity-border));

  /* Backgrounds */
  --bg-nav: rgba(29, 25, 17, var(--opacity-nav-bg));
  --bg-main-nav: rgba(29, 25, 17, var(--opacity-main-nav-bg));
}