/* =====================================================================
   CoreAxis — design tokens (shared by the staff shell, platform console
   and marketing site). Role-named: use these in new CSS. The staff shell's
   older variable names (--navy, --navy2, --saffron, --text2 …) are kept as
   aliases in style.css so existing pages keep working.

   Theme: LIGHT is the default. Dark is opt-in via <html data-theme="dark">
   (the staff shell's theme toggle; saved per browser).
   Brand matches the CoreSchool mobile app: navy #0B1F3A + saffron #F59E0B.
   ===================================================================== */
:root {
  /* Brand (theme-independent) */
  --brand:        #0B1F3A;   /* navy — sidebar, primary chrome */
  --brand-2:      #132B4D;   /* navy raised (hover / active row on navy) */
  --brand-3:      #1C3A63;   /* navy lines / scrollbar on navy */
  --on-brand:     #E6ECF5;   /* text on navy */
  --on-brand-muted: #9FB0C8; /* secondary text on navy */
  --accent:       #F59E0B;   /* saffron */
  --accent-600:   #D97706;
  --accent-700:   #B45309;
  --on-accent:    #0B1F3A;
  /* Saffron for TEXT (ids, receipt / admission numbers, inline highlights). #F59E0B on white
     is ~2.1:1; amber-700 #B45309 is ~5:1 (WCAG AA). Dark theme keeps the bright saffron. */
  --accent-text:  #B45309;

  /* Status */
  --success:      #10B981;
  --success-600:  #059669;
  --danger:       #EF4444;
  --danger-600:   #DC2626;
  --warning:      #F59E0B;
  --info:         #3B82F6;
  --info-600:     #2563EB;
  --purple:       #8B5CF6;

  /* Surfaces (light) */
  --canvas:       #EEF2F7;   /* page background */
  --surface:      #FFFFFF;   /* cards, panels, modals */
  --surface-2:    #F1F5F9;   /* subtle fill: inputs, table head, hover */
  --surface-3:    #E2E8F0;   /* stronger fill: pressed, dividers on surface-2 */
  --chrome:       #FFFFFF;   /* top bar */
  --text:         #1E293B;
  --text-strong:  #0F172A;
  --heading:      #0B1F3A;   /* page / card / table headings */
  --muted:        #64748B;
  --line:         rgba(15, 23, 42, .12);
  --line-strong:  rgba(15, 23, 42, .20);
  --focus-ring:   0 0 0 3px rgba(245, 158, 11, .45);
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-md:    0 4px 20px rgba(15, 23, 42, .08);
  --shadow-lg:    0 20px 50px rgba(15, 23, 42, .18);

  /* Type scale */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-20: 20px; --fs-24: 24px; --fs-32: 32px;
  --font-body:    'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Rajdhani', 'Noto Sans', system-ui, sans-serif;
  --lh-tight: 1.25; --lh-normal: 1.5;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* Spacing (4-pt) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: .12s; --dur-2: .2s; --dur-3: .3s;

  color-scheme: light;
}

html[data-theme="dark"] {
  --canvas:       #0A1628;
  --surface:      #162447;
  --surface-2:    #1E3A5F;
  --surface-3:    #24456F;
  --chrome:       #0F1F3D;
  --text:         #E2E8F0;
  --text-strong:  #F8FAFC;
  --heading:      #F59E0B;
  --accent-text:  #F59E0B;
  --muted:        #94A3B8;
  --line:         rgba(255, 255, 255, .08);
  --line-strong:  rgba(255, 255, 255, .16);
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md:    0 4px 24px rgba(0, 0, 0, .35);
  --shadow-lg:    0 25px 60px rgba(0, 0, 0, .5);
  color-scheme: dark;
}