/* ============================================
   Design Tokens — Rudy Romero Portfolio
   ============================================ */

:root {
  /* === Colors === */
  --color-bg-primary: #0A0A08;
  --color-bg-secondary: #1A1410;
  --color-bg-tertiary: #2A1E14;

  --color-accent-deep: #8B2500;
  --color-accent-warm: #A63D20;
  --color-accent-glow: #D4A843;
  --color-accent-gold-light: #E8C86A;

  --color-text-primary: #F5E6D0;
  --color-text-secondary: #BFA882;
  --color-text-muted: #E8C86A;
  --color-text-gold: #D4A843;

  --color-overlay-dark: rgba(10, 10, 8, 0.85);
  --color-overlay-warm: rgba(139, 37, 0, 0.35);

  /* === Typography === */
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --text-hero: clamp(4rem, 12vw, 10rem);
  --text-h1: clamp(2.5rem, 6vw, 5rem);
  --text-h2: clamp(1.75rem, 4vw, 3rem);
  --text-h3: clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body: clamp(0.95rem, 1.2vw, 1.125rem);
  --text-small: clamp(0.75rem, 1vw, 0.875rem);
  --text-label: clamp(0.625rem, 0.8vw, 0.75rem);

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-ultra: 0.15em;

  --leading-tight: 0.9;
  --leading-snug: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* === Spacing === */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 2rem);
  --space-lg: clamp(2rem, 4vw, 4rem);
  --space-xl: clamp(3rem, 6vw, 6rem);
  --space-2xl: clamp(4rem, 10vw, 10rem);

  /* === Layout === */
  --container-max: 1440px;
  --container-padding: clamp(1.25rem, 4vw, 4rem);

  /* === Transitions === */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;

  /* === Z-Index === */
  --z-base: 1;
  --z-overlay: 100;
  --z-nav: 200;
  --z-mobile-menu: 300;
  --z-transition: 1000;
}