/* ==========================================================================
   PATHASHALA — Design Tokens
   Academic blue + learning teal + warm gold design system
   (Requirement_Styles.pdf — Pathashala Production UI/UX & School Design System)
   ========================================================================== */

:root {
  /* ---- Surfaces & ink ---- */
  --bg-page: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-muted: #F1F5F9;
  --ink: #172033;
  --ink-secondary: #64748B;
  --ink-muted: #94A3B8;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  /* ---- Primary: learning / primary actions ---- */
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-tint: #EFF4FE;
  --navy: #172554;

  /* ---- Teal: AI / knowledge / insights ---- */
  --teal: #0F766E;
  --teal-tint: #E7F5F3;

  /* ---- Gold: achievements / rewards / highlights ---- */
  --gold: #F59E0B;
  --gold-tint: #FEF3E2;

  /* ---- Coral: attention / secondary accent ---- */
  --coral: #F97316;
  --coral-tint: #FFF1E7;

  /* ---- Subject colour-coding (mirrors notebook-cover colours, harmonized
     with the academic-blue palette above rather than the old warm-red one) ---- */
  --subj-maths: #4F46E5;
  --subj-maths-tint: #EEEDFC;
  --subj-science: #0F766E;
  --subj-science-tint: #E7F5F3;
  --subj-english: #F97316;
  --subj-english-tint: #FFF1E7;
  --subj-social: #F59E0B;
  --subj-social-tint: #FEF3E2;
  --subj-arts: #7C3AED;
  --subj-arts-tint: #F1EBFD;

  /* ---- Status (kept distinct from subject colours) ---- */
  --status-success: #16A34A;
  --status-success-tint: #E7F8ED;
  --status-progress: #F97316;
  --status-progress-tint: #FFF1E7;
  --status-idle: #94A3B8;
  --status-idle-tint: #F1F5F9;
  --status-danger: #DC2626;
  --status-danger-tint: #FDECEC;

  /* ---- Typography ---- */
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-xxl: 34px;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- Shape & elevation ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Level 1 — normal cards. Level 2 — important interactive cards/dialogs.
     Level 3 — modal/overlay/floating elements. (Level 0 is a flat surface:
     no shadow token needed.) */
  --shadow-card: 0 1px 2px rgba(23, 32, 51, 0.06), 0 1px 1px rgba(23, 32, 51, 0.04);
  --shadow-raised: 0 4px 16px rgba(23, 32, 51, 0.10);
  --shadow-overlay: 0 16px 48px rgba(23, 32, 51, 0.18);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 500ms;
}

/* Dark mode — flips surfaces, keeps hues legible on dark ink. Designed
   intentionally per-token (not a CSS invert filter): warmer near-black
   surfaces, desaturated-but-still-legible tints, softer shadows. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page: #0B1220;
    --bg-surface: #131B2C;
    --bg-surface-muted: #1A2439;
    --ink: #EEF2F9;
    --ink-secondary: #A6B0C3;
    --ink-muted: #78849B;
    --border: #263149;
    --border-strong: #33405C;

    --primary-tint: #16234A;
    --teal-tint: #12302C;
    --gold-tint: #3A2A0E;
    --coral-tint: #3A2412;

    --subj-maths-tint: #201C48;
    --subj-science-tint: #12302C;
    --subj-english-tint: #3A2412;
    --subj-social-tint: #3A2A0E;
    --subj-arts-tint: #281C48;

    --status-success-tint: #123322;
    --status-progress-tint: #3A2412;
    --status-idle-tint: #1E2738;
    --status-danger-tint: #3A1616;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-raised: 0 4px 20px rgba(0, 0, 0, 0.45);
    --shadow-overlay: 0 20px 56px rgba(0, 0, 0, 0.55);
  }
}