/* ═══════════════════════════════════════════
   HalloStu Design Tokens v2.0
   SOURCE OF TRUTH — all pages link to this file.
   Edit here → push to GitHub → site updates.
   Aligned with Brand Guide v2.0 (design/brand-guide.html)
   ═══════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --navy:      #1E3A5F;   /* primary — hero bg, nav bg, headings */
  --navy-dark: #152C48;   /* deeper navy for gradients, hover */
  --navy-deep: #0F1F33;   /* deepest — hero gradient end */
  --blue:      #6AAFE0;   /* accent — buttons, links, accents */
  --blue-mid:  #5DADE2;   /* mid blue — hover states */
  --sky:       #85C7F2;   /* alias: blue-light — gradients */
  --blue-light:#8EC5EB;   /* brand guide canonical blue-light */
  --pale:      #B8DFF5;   /* alias: blue-pale — borders, light accents */
  --blue-pale: #B8DFF5;   /* brand guide canonical */
  --frost:     #EAF5FB;   /* alias: blue-wash — card backgrounds */
  --blue-wash: #EAF5FB;   /* brand guide canonical */
  --white:     #FFFFFF;
  --off-white: #F7F9FB;   /* page background alt */
  --ink:       #2D3E4A;   /* body text (gray-700) */
  --muted:     #5E7383;   /* secondary text, labels (gray-500) */
  --bg:        #F0F3F6;   /* page background (gray-100) */
  --green:     #27AE60;   /* success states */

  /* ── Full Gray Scale (Brand Guide v2.0) ── */
  --gray-50:  #FAFBFC;
  --gray-100: #F0F3F6;
  --gray-200: #D9E2EA;
  --gray-300: #B0BEC9;
  --gray-400: #8A9BB0;
  --gray-500: #5E7383;
  --gray-600: #4A5E72;
  --gray-700: #2D3E4A;
  --gray-800: #1C2D3E;

  /* ── Status Colors ── */
  --success:       #27AE60;
  --success-light: #E8F8EE;
  --warning:       #F2994A;
  --warning-light: #FEF3E5;
  --error:         #EB5757;
  --error-light:   #FDE8E8;

  /* ── Accent Colors (VS comparison, feature icons — use sparingly) ── */
  --gold:  #F5A623;
  --coral: #FF6B6B;

  /* ── Utility Colors ── */
  --accent-glow: rgba(93, 173, 226, 0.2);
  --border:  #B8DFF5;
  --border2: rgba(30, 58, 95, 0.12);
  --text3:   #B0BEC9;   /* tertiary text (gray-300) */

  /* ── Typography ── */
  /* Headings: Fraunces (serif), weight 300–900 */
  /* Body: Plus Jakarta Sans (sans-serif), weight 300–800 */
  --font-heading: 'Fraunces', serif;
  --font-display: 'Fraunces', serif;   /* alias for headings */
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* ── Spacing Scale (4px grid) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border Radii ── */
  --radius:      12px;    /* default */
  --radius-sm:   8px;     /* small elements */
  --radius-md:   12px;    /* medium */
  --radius-lg:   16px;    /* cards */
  --radius-xl:   20px;    /* large panels */
  --radius-pill:  100px;  /* pills, fully rounded */
  --radius-btn:  10px;    /* buttons */

  /* ── Shadows (Brand Guide v2.0) ── */
  --shadow-sm:         0 1px 3px rgba(30, 58, 95, 0.06);
  --shadow-md:         0 4px 16px rgba(30, 58, 95, 0.08);
  --shadow-lg:         0 8px 32px rgba(30, 58, 95, 0.10);
  --shadow-blue:       0 4px 20px rgba(106, 175, 224, 0.15);
  --shadow-card:       0 2px 16px rgba(30, 58, 95, 0.07);
  --shadow-card-hover: 0 12px 40px rgba(30, 58, 95, 0.10);
  --shadow-hover:      0 4px 24px rgba(30, 58, 95, 0.12);
}

/* ═══ Dark Mode (Brand Guide v2.0, Section 11) ═══
   Implemented via element-level selectors in styles/app.css.
   Core brand colors (--navy, --blue) are NOT overridden here.
   Dark palette reference:
   - Background: #0C1220
   - Surface:    #111B2E
   - Border:     #1C2535
   - Text:       #E8EDF3
   - CTA:        var(--blue) #6AAFE0  ═══ */