/* ============================================
   VARIABLES.CSS — Design System Tokens
   ============================================
   
   This is the SINGLE SOURCE OF TRUTH for the 
   entire site's visual identity.
   
   Change a color here → it updates everywhere.
   Change a font here → it updates everywhere.
   
   Think of this as your "brand settings" file.
   ============================================ */

:root {

  /* ----- COLORS ----- */

  /* Primary: Deep navy — confidence, trust, luxury */
  --color-navy:          #0B1D3A;
  --color-navy-light:    #132D54;
  --color-navy-dark:     #060F1F;

  /* Accent: Soft gold — warmth, premium feel */
  --color-gold:          #C9A96E;
  --color-gold-light:    #D4BC8E;
  --color-gold-dark:     #B08C4A;

  /* Neutrals: Clean backgrounds and text */
  --color-white:         #FFFFFF;
  --color-off-white:     #F7F7F5;
  --color-light-gray:    #EAEAE6;
  --color-mid-gray:      #8A8A8A;
  --color-dark-gray:     #3A3A3A;
  --color-black:         #111111;

  /* Functional colors (for alerts, success, etc. — use later) */
  --color-success:       #2E7D32;
  --color-error:         #C62828;


  /* ----- TYPOGRAPHY ----- */

  --font-heading:        'Outfit', sans-serif;
  --font-body:           'Outfit', sans-serif;

  /* Font sizes — using rem so they scale with user preferences */
  --text-xs:             0.75rem;
  --text-sm:             0.875rem;
  --text-base:           1rem;
  --text-md:             1.125rem;
  --text-lg:             1.25rem;
  --text-xl:             1.5rem;
  --text-2xl:            2rem;
  --text-3xl:            2.5rem;
  --text-4xl:            3.25rem;
  --text-5xl:            4rem;

  /* Font weights */
  --weight-light:        300;
  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  /* Line heights */
  --leading-tight:       1.1;
  --leading-snug:        1.3;
  --leading-normal:      1.6;
  --leading-relaxed:     1.8;


  /* ----- SPACING ----- */
  --space-xs:            0.25rem;
  --space-sm:            0.5rem;
  --space-md:            1rem;
  --space-lg:            1.5rem;
  --space-xl:            2rem;
  --space-2xl:           3rem;
  --space-3xl:           4rem;
  --space-4xl:           6rem;
  --space-5xl:           8rem;


  /* ----- LAYOUT ----- */
  --max-width:           1200px;
  --max-width-narrow:    800px;
  --border-radius:       4px;
  --border-radius-lg:    8px;


  /* ----- TRANSITIONS ----- */
  --transition-fast:     150ms ease;
  --transition-base:     250ms ease;
  --transition-slow:     400ms ease;


  /* ----- SHADOWS ----- */
  --shadow-sm:           0 1px 3px rgba(11, 29, 58, 0.06);
  --shadow-md:           0 4px 12px rgba(11, 29, 58, 0.08);
  --shadow-lg:           0 8px 30px rgba(11, 29, 58, 0.12);
}