/* ═══════════════════════════════════════════════════════════════════════
   Study & Go Global — design tokens
   Colours are sampled from the official logo (assets/logo-wide.jpeg.png):
     cap / wordmark navy  ≈ #1f3d6e (cap #25426e, wordmark text #11233b)
     globe azure          ≈ #289bd1
     ring + "Go Global"   ≈ #b28a4c
   Every public page and both portals load this file first; components must use
   these variables rather than literal colours (docs/redesign/design-system.md).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* brand */
  --sg-navy-950: #0c1a2e;
  --sg-navy-900: #11233b;
  --sg-navy-800: #173054;
  --sg-navy-700: #1f3d6e;   /* primary */
  --sg-navy-600: #2a5192;
  --sg-navy-200: #c7d4e8;
  --sg-navy-100: #e6edf7;
  --sg-navy-50:  #f2f6fb;
  --sg-azure-700: #145e8a;
  --sg-azure-600: #1b78ad;  /* azure usable as text on white (≥ 4.5:1) */
  --sg-azure-500: #289bd1;  /* decorative / on dark */
  --sg-azure-100: #e1f2fa;
  --sg-gold-700: #7d5f27;   /* gold usable as text on white */
  --sg-gold-500: #b28a4c;   /* logo gold: borders, accents, buttons with navy text */
  --sg-gold-300: #d6bf95;
  --sg-gold-100: #f7f0e3;
  /* neutrals */
  --sg-ink: #17212f;
  --sg-text: #2b3646;
  --sg-muted: #4b5563;
  --sg-line: #e3e8ef;
  --sg-bg: #f6f8fb;
  --sg-surface: #ffffff;
  /* status */
  --sg-success: #17703f;  --sg-success-bg: #e6f4ec;
  --sg-warning: #8a5a00;  --sg-warning-bg: #fff4d6;
  --sg-danger:  #b42318;  --sg-danger-bg:  #fdeceb;
  --sg-info:    var(--sg-azure-600); --sg-info-bg: var(--sg-azure-100);
  /* type */
  --sg-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --sg-font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  /* shape + space (4px scale) */
  --sg-radius-sm: 6px; --sg-radius: 10px; --sg-radius-lg: 16px; --sg-radius-pill: 999px;
  --sg-s1: 4px; --sg-s2: 8px; --sg-s3: 12px; --sg-s4: 16px; --sg-s5: 24px; --sg-s6: 32px; --sg-s7: 48px; --sg-s8: 64px;
  --sg-shadow-1: 0 1px 2px rgba(17,35,59,.08), 0 1px 3px rgba(17,35,59,.06);
  --sg-shadow-2: 0 10px 25px -8px rgba(17,35,59,.22);
  --sg-focus: 0 0 0 3px #fff, 0 0 0 5px var(--sg-navy-700);
  /* breakpoints (documented; CSS media queries repeat the literals): 360 · 390 · 768 · 1024 · 1280 · 1440 */
}