/* ============================================
   NGL Design Tokens
   All colors, typography, and spacing values
   derived from brand identity analysis.
   ============================================ */

:root {
  /* --- Primary Colors --- */
  --color-navy: #1B3A6B;
  --color-navy-deep: #0D1B2E;
  --color-red: #D42B2B;
  --color-red-hover: #B82424;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-near-black: #0A0A0A;

  /* --- Secondary Colors --- */
  --color-wood: #A37B4E;
  --color-gold: #D4942A;
  --color-green: #2D5A3A;
  --color-cyan: #5BC4D4;

  /* --- Neutrals --- */
  --color-off-white: #F5F5F5;
  --color-gray-100: #F8F8F8;
  --color-gray-200: #E0E0E0;
  --color-gray-400: #999999;
  --color-gray-500: #666666;
  --color-gray-600: #555555;
  --color-gray-700: #333333;

  /* --- Typography --- */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Barlow', sans-serif;

  /* Display sizes */
  --text-hero: 56px;
  --text-h2: 48px;
  --text-h3: 28px;
  --text-h4: 22px;

  /* Body sizes */
  --text-body: 18px;
  --text-body-sm: 16px;
  --text-caption: 14px;
  --text-overline: 13px;
  --text-fine: 12px;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.15;
  --leading-normal: 1.2;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight: 0.5px;
  --tracking-normal: 1px;
  --tracking-wide: 2px;
  --tracking-wider: 4px;
  --tracking-widest: 6px;

  /* --- Spacing (8px grid) --- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 120px;

  /* --- Layout --- */
  --max-width: 1200px;
  --max-width-narrow: 680px;
  --max-width-text: 480px;
  --border-radius: 4px;
  --nav-height: 64px;

  /* --- Transitions --- */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease-out;

  /* --- Shadows --- */
  --shadow-image: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-red-glow: 0 0 24px rgba(212, 43, 43, 0.3);
  --shadow-input-glow: 0 0 12px rgba(255, 255, 255, 0.1);
}