/* ══════════════════════════════════════════════
   NXTHARBOR — BRAND VARIABLES
   ══════════════════════════════════════════════ */

:root {
  /* Surfaces — dark navy scale */
  --surface-1: #071528;   /* page background          */
  --surface-2: #0A1C37;   /* cards, forms, modals     */
  --surface-3: #0D2144;   /* inputs, inner elements   */

  /* Brand colours */
  --teal:  #00C2A8;
  --gold:  #F0A500;
  --blue:  #1A6BF0;
  --warm:  #FFF8EE;
  --white: #FFFFFF;

  /* Border */
  --border-subtle: rgba(0,194,168,0.18);  /* universal card / input border */

  /* Text hierarchy */
  --text-primary:   var(--warm);                                          /* headings, important  */
  --text-secondary: color-mix(in srgb, var(--warm) 68%, transparent);    /* body text            */
  --text-muted:     color-mix(in srgb, var(--warm) 35%, transparent);    /* meta, labels, hints  */

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Spacing scale */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  80px;

  /* Border radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 100px;

  /* Transitions */
  --transition-fast: 0.22s ease;
  --transition-med:  0.35s ease;
  --transition-slow: 0.72s ease;
}