/* ============================================
   DAZZ — Design Tokens  (v2 · light · indigo)
   Clean, airy edtech system
   ============================================ */

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

:root {
  /* ── Backgrounds ── */
  --bg:            #FFFFFF;   /* cards / surfaces */
  --bg-page:       #F6F6FB;   /* app canvas */
  --bg-soft:       #F1F1F8;   /* subtle fills */
  --bg-ink:        #14122B;   /* dark sections / hero */
  --bg-ink-soft:   #1E1B3A;

  /* ── Brand — Indigo / Violet ── */
  --brand:         #6366F1;   /* indigo-500 primary */
  --brand-600:     #5145E0;
  --brand-700:     #4338CA;
  --brand-300:     #A5B4FC;
  --brand-soft:    #EEF0FF;   /* tinted backgrounds */
  --brand-softer:  #F5F6FF;
  --violet:        #8B5CF6;

  /* ── Functional accents ── */
  --success:       #16A34A;
  --success-soft:  #E7F6EC;
  --warning:       #F59E0B;
  --warning-soft:  #FEF3E2;
  --coral:         #FB7185;
  --gold:          #F59E0B;

  /* ── Gradients ── */
  --grad-brand:    linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --grad-brand-h:  linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
  --grad-hero:     linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #9333EA 100%);
  --grad-ink:      linear-gradient(180deg, rgba(20,18,43,0) 0%, rgba(20,18,43,0.85) 100%);
  --grad-card-tint:linear-gradient(135deg, #EEF0FF 0%, #F6F1FF 100%);

  /* ── Text ── */
  --ink:           #16142E;   /* primary */
  --ink-2:         #4B4869;   /* secondary */
  --ink-3:         #807CA0;   /* muted */
  --ink-4:         #ABA8C4;   /* faint */
  --on-dark:       #FFFFFF;
  --on-dark-2:     rgba(255,255,255,0.66);
  --on-dark-3:     rgba(255,255,255,0.42);

  /* ── Borders ── */
  --line:          #ECECF4;   /* default hairline */
  --line-strong:   #E0E0EC;
  --line-dark:      rgba(255,255,255,0.12);

  /* ── Fonts ── */
  --font-display:  'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:     'Inter', sans-serif;

  /* ── Type scale ── */
  --fs-hero:       clamp(40px, 5vw, 68px);
  --fs-display:    40px;
  --fs-h1:         32px;
  --fs-h2:         24px;
  --fs-h3:         20px;
  --fs-title:      18px;
  --fs-body-lg:    16px;
  --fs-body:       15px;
  --fs-sm:         13px;
  --fs-caption:    12px;

  /* ── Radii ── */
  --r-pill:   999px;
  --r-2xl:    24px;
  --r-xl:     20px;
  --r-lg:     16px;
  --r-md:     12px;
  --r-sm:     10px;
  --r-xs:     8px;

  /* ── Spacing ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Layout ── */
  --sidebar-w:   256px;
  --maxw:        1200px;

  /* ── Shadows (soft, edtech) ── */
  --shadow-xs:   0 1px 2px rgba(20,18,43,0.05);
  --shadow-sm:   0 2px 8px rgba(20,18,43,0.06);
  --shadow-md:   0 6px 20px rgba(20,18,43,0.08);
  --shadow-lg:   0 16px 40px rgba(20,18,43,0.12);
  --shadow-brand:0 12px 28px rgba(99,102,241,0.28);

  /* ── Motion ── */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
}