/* ============================================================
   TOKENS — CSS variables shared across the site
   ============================================================
   This file centralizes all design values used
   across modules. To change the visual identity,
   edit here.

   Naming convention:
     --c-* : colors (color)
     --f-* : fonts (font)
     --r-* : corner radii (radius)
     --s-* : spacing — optional, add as needed
   ============================================================ */

:root {
  /* === BRAND COLORS === */
  --c-deep: #0A1F38;                       /* deep blue — hero background, headings, dark surfaces */
  --c-blue: #236FA8;                       /* brand blue — links, accents */
  --c-cyan: #32BCEC;                       /* bright cyan — CTAs, focus */
  --c-gold: #D4A24A;                       /* gold — editorial accents, premium badges */
  --c-cream: #F7F3EC;                      /* pale cream — soft backgrounds */
  --c-ink: #1A1A1A;                        /* editorial black — body text */
  --c-paper: #FDFCFA;                      /* off-white — card backgrounds */
  --c-line: rgba(10, 31, 56, 0.12);        /* separator lines */
  --c-mute: rgba(10, 31, 56, 0.6);         /* secondary text */

  /* === TYPOGRAPHY === */
  --f-body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --f-display: 'Fraunces', Georgia, serif;

  /* === LAYOUT === */
  --content-w: 1180px;                     /* max content width */
  --gutter: clamp(20px, 4vw, 48px);        /* responsive side margin */
  --header-h: 84px;                        /* sticky header height */

  /* === CORNER RADII === */
  /* All at 0: "sharp corners" design chosen for this site.
     To re-enable rounded corners, set for example:
       --r-sm: 4px; --r-md: 8px; --r-lg: 16px; */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;

  /* === ANIMATIONS === */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);  /* default animation curve */
}