/* ============================================================
 * VNUHCM K12 — Design tokens (single source of truth)
 * Mirrors DESIGN.md. Prefix --vnu- avoids clashing with
 * Bootstrap / Tailwind vars already in the theme.
 * Load this FIRST, before other stylesheets, in every layout.
 * ============================================================ */
:root {
  /* -- Brand: indigo primary -- */
  --vnu-primary:        #594f8d;
  --vnu-primary-dark:   #4a4278;
  --vnu-primary-tint:   #edecf5;   /* surfaces, hovers */
  --vnu-primary-light:  #a7b4d3;

  /* -- Ink / neutrals (text values verified ≥4.5:1 on white) -- */
  --vnu-ink:            #202c33;
  --vnu-ink-2:          #51616b;   /* secondary text */
  --vnu-muted:          #6b7780;   /* tertiary / meta */
  --vnu-bg:             #f3f5f9;   /* body */
  --vnu-surface:        #ffffff;
  --vnu-surface-alt:    #f5f7fa;
  --vnu-border:         #e6eaf1;
  --vnu-border-strong:  #d8dde5;

  /* -- Semantic -- */
  --vnu-info:           #299be8;   /* links */
  --vnu-success:        #4f8a2f;   /* green as text ≥4.5:1 */
  --vnu-success-fill:   #92cf5c;   /* progress fills (decorative) */
  --vnu-success-soft:   #eaf6df;
  --vnu-warning:        #fcc44d;
  --vnu-danger:         #fa5542;
  --vnu-accent:         #ff6600;   /* orange highlight */

  /* -- Dark chrome (nav / footer) -- */
  --vnu-nav-bg:         #202c33;
  --vnu-footer-bg:      #2c3039;
  --vnu-on-dark:        #fffbfa;
  --vnu-on-dark-muted:  #c3c9d4;   /* 7.9:1 on footer-bg */

  /* -- Typography -- */
  --vnu-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --vnu-font-body:    'Lato', system-ui, -apple-system, sans-serif;

  /* -- Radius -- */
  --vnu-radius-sm:   2px;
  --vnu-radius-md:   8px;
  --vnu-radius-lg:   16px;
  --vnu-radius-pill: 999px;

  /* -- Spacing scale -- */
  --vnu-space-xs: 4px;
  --vnu-space-sm: 8px;
  --vnu-space-md: 16px;
  --vnu-space-lg: 24px;
  --vnu-space-xl: 48px;

  /* -- Elevation -- */
  --vnu-shadow-sm: 0 1px 3px rgba(32, 44, 51, .08);
  --vnu-shadow-md: 0 6px 20px -8px rgba(32, 44, 51, .18);

  /* -- Semantic z-index scale (dropdown → sticky → modal → toast → tooltip) -- */
  --vnu-z-dropdown:       1000;
  --vnu-z-sticky:         1020;
  --vnu-z-modal-backdrop: 1040;
  --vnu-z-modal:          1050;
  --vnu-z-toast:          1080;
  --vnu-z-tooltip:        1090;
}