/* ==========================================================================
   Design System Tokens & Variables - Always Clean SF
   ========================================================================== */

:root {
  /* Brand Palette */
  --primary-navy: #01243d;
  --primary-navy-dark: #001626;
  --primary-navy-light: #06385d;
  --accent-gold: #ffcd05;
  --accent-gold-hover: #e6b800;
  --secondary-amber: #fcb424;
  --text-dark: #1f2937;
  --text-muted: #504e4a;
  --bg-light: #f8fafc;
  --bg-card: #ffffff;
  --bg-dark: #011d31;
  --border-light: #e2e8f0;
  --success-green: #10b981;
  
  /* Gradients */
  --gradient-navy: linear-gradient(135deg, #01243d 0%, #001220 100%);
  --gradient-gold: linear-gradient(135deg, #ffcd05 0%, #fcb424 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  --gradient-card-hover: linear-gradient(180deg, rgba(255, 205, 5, 0.05) 0%, rgba(1, 36, 61, 0.02) 100%);

  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Elevations & Shadows */
  --shadow-sm: 0 2px 8px rgba(1, 36, 61, 0.06);
  --shadow-md: 0 10px 30px rgba(1, 36, 61, 0.08);
  --shadow-lg: 0 20px 40px rgba(1, 36, 61, 0.14);
  --shadow-gold: 0 10px 25px rgba(255, 205, 5, 0.35);

  /* Spacing & Layout */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --container-max-width: 1280px;
}