:root {
  /* ==========================================================================
     HAWK MEDIA — STRICT BLACK & GOLD ELEGANCE DESIGN TOKENS
     STRICT PALETTE (5 COLORS ONLY):
     - Pure Black:     #000000
     - Midnight Navy:  #14213D
     - Golden Amber:   #FCA311
     - Silver Mist:    #E5E5E5
     - Pure White:     #FFFFFF
     ========================================================================== */

  /* --- Core Palette --- */
  --c-black:   #000000;
  --c-navy:    #14213D;
  --c-amber:   #FCA311;
  --c-silver:  #E5E5E5;
  --c-white:   #FFFFFF;

  /* --- Semantic Backgrounds --- */
  --bg-page:        var(--c-white);
  --bg-surface:     var(--c-white);
  --bg-subtle:      var(--c-silver);
  --bg-dark:        var(--c-navy);
  --bg-dark-card:   #0b1324;
  --bg-black:       var(--c-black);
  
  /* --- Semantic Text & Contrast (WCAG AAA Compliant) --- */
  --text-primary:    var(--c-black);       /* On White / Silver */
  --text-secondary:  var(--c-navy);        /* Body & Subheads on Light */
  --text-muted:      rgba(20, 33, 61, 0.7);/* Secondary descriptions */
  --text-on-dark:    var(--c-white);       /* On Navy / Black */
  --text-muted-dark: rgba(255, 255, 255, 0.75); /* On Navy / Black */
  --text-on-amber:   var(--c-black);       /* On Golden Amber Buttons */
  --text-amber:      var(--c-amber);       /* Accent highlights */

  /* --- Borders & Accents --- */
  --border-subtle:   rgba(20, 33, 61, 0.12);
  --border-silver:   var(--c-silver);
  --border-navy:     var(--c-navy);
  --border-amber:    var(--c-amber);
  --border-dark:     rgba(255, 255, 255, 0.12);
  --border-dark-amber: rgba(252, 163, 17, 0.35);

  /* --- Typography: Apple San Francisco System Font Stack --- */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- Fluid Typography Hierarchy --- */
  --text-hero:       clamp(2.75rem, 5.5vw, 4.5rem);  /* 44px - 72px */
  --text-display:    clamp(2.35rem, 4.5vw, 3.75rem); /* 38px - 60px */
  --text-h1:         clamp(2.00rem, 3.8vw, 3.00rem); /* 32px - 48px */
  --text-h2:         clamp(1.65rem, 2.8vw, 2.35rem); /* 26px - 38px */
  --text-h3:         clamp(1.30rem, 2.0vw, 1.75rem); /* 21px - 28px */
  --text-h4:         1.25rem;                         /* 20px */
  --text-h5:         1.10rem;                         /* 17.6px */
  --text-body-lg:    1.125rem;                        /* 18px */
  --text-body:       1.000rem;                        /* 16px */
  --text-body-sm:    0.875rem;                        /* 14px */
  --text-caption:    0.750rem;                        /* 12px */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-normal:1.60;
  --leading-loose: 1.75;

  /* --- Spacing System --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.50rem;   /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1.00rem;   /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.50rem;   /* 24px */
  --space-8: 2.00rem;   /* 32px */
  --space-10: 2.50rem;  /* 40px */
  --space-12: 3.00rem;  /* 48px */
  --space-16: 4.00rem;  /* 64px */
  --space-20: 5.00rem;  /* 80px */
  --space-24: 6.00rem;  /* 96px */
  
  --container-max: 1280px;
  --container-editorial: 840px;
  --container-pad: clamp(1.0rem, 4.0vw, 3.5rem);

  /* --- Radii --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* --- Refined Apple Shadows --- */
  --shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-card:   0 12px 32px rgba(20, 33, 61, 0.07);
  --shadow-hover:  0 20px 48px rgba(20, 33, 61, 0.12);
  --shadow-dark:   0 16px 40px rgba(0, 0, 0, 0.35);

  /* --- Transitions & Timing --- */
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-medium: 320ms;
  --dur-slow: 500ms;
}