/* ==========================================================================
   ROBINSON NUTRITION - DESIGN TOKENS & VARIABLES
   Premium Light Theme (Royal Navy Blue, Majestic Gold & Clean Alabaster)
   ========================================================================== */

:root {
  /* --- Primary Brand Colors --- */
  --color-primary-navy: #0F2B5C;          /* Signature Robinson Navy */
  --color-primary-navy-dark: #0A1D3F;     /* Deep Navy / Dark Contrast */
  --color-primary-navy-light: #1A3E7A;    /* Interactive Navy Hover */
  --color-primary-navy-surface: #EBF2FA;  /* Ultra-light Navy Ice tint */

  /* --- Accent Colors (Luxury Gold & Energy) --- */
  --color-accent-gold: #D4AF37;           /* Royal Metallic Gold */
  --color-accent-gold-dark: #B59024;      /* Deep Gold Border/Hover */
  --color-accent-gold-light: #F5E8C7;     /* Soft Champagne Fill */
  --color-accent-gold-glow: rgba(212, 175, 55, 0.35);

  /* --- Secondary Accents --- */
  --color-accent-cyan: #00D2FF;           /* Ice Blue / Tech Glow */
  --color-accent-blue: #0066FF;           /* Vibrant Link / Button Blue */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;

  /* --- Background Surfaces (Crisp Light Theme) --- */
  --bg-body: #FFFFFF;                     /* Pure Base Canvas */
  --bg-surface: #F8FAFC;                  /* Soft Alabaster Section Alternation */
  --bg-surface-elevated: #FFFFFF;         /* Floating Glass / White Card */
  --bg-subtle: #F1F5F9;                   /* Pill fills & soft inputs */
  --bg-dark-contrast: #07152B;            /* High-contrast footer / accent sections */

  /* --- Typography Colors --- */
  --text-primary: #0F172A;                /* Deep Charcoal - High Legibility */
  --text-secondary: #334155;              /* Slate Medium Contrast */
  --text-muted: #64748B;                  /* Subtle Metadata & Subtitles */
  --text-white: #FFFFFF;                  /* Over Navy or dark backgrounds */
  --text-gold: #D4AF37;

  /* --- Borders & Outlines --- */
  --border-light: rgba(15, 43, 92, 0.08);
  --border-medium: rgba(15, 43, 92, 0.15);
  --border-gold: rgba(212, 175, 55, 0.4);
  --border-white-trans: rgba(255, 255, 255, 0.15);

  /* --- Shadows & Elevations (Luxury Soft Depth) --- */
  --shadow-sm: 0 2px 8px rgba(15, 43, 92, 0.04);
  --shadow-md: 0 8px 24px -4px rgba(15, 43, 92, 0.08);
  --shadow-lg: 0 16px 40px -8px rgba(15, 43, 92, 0.12);
  --shadow-xl: 0 24px 60px -12px rgba(15, 43, 92, 0.16);
  --shadow-gold: 0 8px 30px rgba(212, 175, 55, 0.25);
  --shadow-navy: 0 12px 35px rgba(15, 43, 92, 0.22);

  /* --- Typography Families --- */
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-badge: 'Montserrat', sans-serif;

  /* --- Transitions & Timings --- */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-base: 0.35s var(--ease-smooth);
  --transition-slow: 0.6s var(--ease-smooth);

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* --- Layout & Spacing --- */
  --container-max-width: 1440px;
  --header-height: 80px;
  --topbar-height: 38px;
}