/* ============================================================
   JewelLink EDU — Color & Type Foundations
   "Connecting Schools & Families"
   ------------------------------------------------------------
   Source of truth: brand style guide (wireframe doc) + the
   reference mockup (uploads/demo_design.png).
   Brand colors per style guide: Navy #1A3A6D, Gold #F0B540,
   Light Gray #F5F7FA, White #FFFFFF — extended into full
   scales below to support real UI (gradients, states, badges).

   FONT NOTE: the original product font file was not provided.
   We substitute "Plus Jakarta Sans" (Google Fonts) as the
   nearest match to the clean, geometric, friendly sans used in
   the mockup. Swap in the real font files under /fonts if you
   have them and point --font-sans at them.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND: NAVY (primary) ---------- */
  --navy-900: #001533;   /* deepest — admin sidebar, darkest fills */
  --navy-800: #0B1F45;   /* deep nav surfaces */
  --navy-700: #14274E;   /* login background base */
  --navy-600: #1A3A6D;   /* ★ brand primary navy (style guide) */
  --navy-500: #234B8A;   /* raised navy */
  --navy-400: #3560A6;   /* hover on navy buttons */

  /* ---------- BRAND: ROYAL BLUE (secondary / interactive) ---------- */
  --blue-700: #1935B4;   /* AI / feature accents */
  --blue-600: #2456C4;
  --blue-500: #2A69BC;   /* active nav icon, links */
  --blue-400: #3F84D6;
  --blue-100: #E3EDFB;   /* info tint */

  /* ---------- BRAND: CYAN (logo node accent, sparingly) ---------- */
  --cyan-500: #2FB6E0;
  --cyan-300: #8FD9F0;

  /* ---------- BRAND: GOLD (accent / CTA) ---------- */
  --gold-600: #E0A41C;   /* gold pressed */
  --gold-500: #F5B82E;   /* ★ brand gold (style guide #F0B540 ≈) */
  --gold-400: #FCC13E;   /* button fill in mockup */
  --gold-200: #FCE3A0;
  --gold-100: #FEF3D6;   /* gold tint surface */

  /* ---------- NEUTRALS ---------- */
  --white:    #FFFFFF;
  --gray-50:  #F9FAFC;   /* app page background */
  --gray-100: #F5F7FA;   /* ★ light gray surface (style guide) */
  --gray-200: #EDF0F5;   /* subtle fills */
  --gray-300: #DEE3EC;   /* hairline borders */
  --gray-400: #C2C9D6;   /* disabled borders */
  --gray-500: #8A93A6;   /* secondary / muted text */
  --gray-600: #5E6677;   /* body-muted text */
  --gray-700: #3A4252;   /* strong secondary text */

  /* ---------- TEXT ---------- */
  --ink:      #131C30;   /* primary text (near-navy black) */
  --ink-soft: #3A4252;   /* secondary heading text */
  --on-navy:  #FFFFFF;   /* text on navy/blue */
  --on-navy-soft: #B9C6DE;/* muted text on navy */
  --on-gold:  #1A1304;   /* text on gold buttons */

  /* ---------- SEMANTIC ---------- */
  --success-600: #15834A;
  --success-500: #1F9D57; /* on-time, completed */
  --success-100: #E6F7EF;
  --success-tint: #AEE9C9;

  --danger-600: #C7332F;
  --danger-500: #E5484D;  /* high priority, alerts, errors */
  --danger-100: #FEEBE6;

  --warning-600: #C98A12;
  --warning-500: #F0B540; /* medium priority, pending */
  --warning-100: #FEF3D6;

  --info-500:   #2A69BC;  /* informational */
  --info-100:   #E3EDFB;

  /* ---------- GRADIENTS ---------- */
  --grad-hero:  linear-gradient(135deg, #1A3A6D 0%, #0E5D99 100%);  /* bus-status / hero cards */
  --grad-login: linear-gradient(180deg, #14274E 0%, #002152 60%, #001533 100%);
  --grad-ai:    linear-gradient(135deg, #1935B4 0%, #2A69BC 100%);  /* AI feature cards */

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;   /* default card radius */
  --r-lg: 18px;   /* hero cards */
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, per style guide) ---------- */
  --shadow-xs: 0 1px 2px rgba(19,28,48,.06);
  --shadow-sm: 0 1px 3px rgba(19,28,48,.08), 0 1px 2px rgba(19,28,48,.04);
  --shadow-md: 0 4px 14px rgba(19,28,48,.08);
  --shadow-lg: 0 10px 30px rgba(19,28,48,.12);
  --shadow-navy: 0 12px 28px rgba(10,31,69,.30);   /* lifted navy/gold cards */
  --shadow-gold: 0 8px 20px rgba(245,184,46,.35);

  /* ---------- SPACING (4pt base) ---------- */
  --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;
  --sp-16: 64px;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (base type styles) ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.jl-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-extra);
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.jl-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.jl-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.jl-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink);
}
.jl-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}
.jl-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.jl-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 13px;
  line-height: 1.45;
  color: var(--gray-600);
}
.jl-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 1.35;
  color: var(--gray-500);
}
.jl-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.jl-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.jl-stat {
  font-family: var(--font-sans);
  font-weight: var(--fw-extra);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}