/* ==========================================================================
   School Life — variables.css
   Design tokens. This is the ONLY file that defines raw color values.
   Every other stylesheet reads colors through these custom properties.
   Light theme lives on :root, dark theme on [data-theme="dark"].
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Surfaces & text ---------- */
  --color-bg: #f6f7fc;
  --color-bg-alt: #eef0fa;
  --color-surface: #ffffff;
  --color-surface-2: #f3f4fb;
  --color-surface-3: #e7e9f5;
  --color-border: #e1e4f0;
  --color-border-strong: #c7cce0;
  --color-text: #1a2140;
  --color-text-muted: #4e5675;
  --color-text-subtle: #646c8b;
  --color-heading: #0d1230;

  /* ---------- Brand ---------- */
  --color-primary: #4338ca;
  --color-primary-hover: #3730a3;
  --color-primary-active: #312e81;
  --color-primary-soft: #eef0ff;
  --color-primary-soft-2: #dfe3ff;
  --color-on-primary: #ffffff;

  --color-accent: #f59e0b;
  --color-accent-hover: #d97706;
  --color-accent-strong: #92400e;
  --color-accent-soft: #fff5dd;
  --color-on-accent: #1f1300;

  --color-secondary: #0f766e;
  --color-secondary-soft: #e3f5f2;

  /* ---------- Status ---------- */
  --color-success: #13723a;
  --color-success-soft: #e6f6eb;
  --color-warning: #a15c07;
  --color-warning-soft: #fff4dc;
  --color-danger: #c81e1e;
  --color-danger-hover: #a31616;
  --color-danger-soft: #fdeaea;
  --color-on-danger: #ffffff;
  --color-info: #0369a1;
  --color-info-soft: #e4f2fb;

  /* ---------- Category colors (used by tool icons, badges, chips) ---------- */
  --cat-admin: #4338ca;
  --cat-admin-soft: #eceeff;
  --cat-people: #0f766e;
  --cat-people-soft: #e1f4f1;
  --cat-academics: #7c3aed;
  --cat-academics-soft: #f1eaff;
  --cat-daily: #c2410c;
  --cat-daily-soft: #ffede3;
  --cat-reports: #0369a1;
  --cat-reports-soft: #e2f1fb;

  /* ---------- Chart palette (Chart.js reads these at runtime) ---------- */
  --chart-1: #4f46e5;
  --chart-2: #0d9488;
  --chart-3: #f59e0b;
  --chart-4: #e11d48;
  --chart-5: #7c3aed;
  --chart-6: #0284c7;
  --chart-grid: #e5e7f2;
  --chart-text: #4e5675;

  /* ---------- Utility colors ---------- */
  --color-focus: #4f46e5;
  --color-focus-ring: rgba(79, 70, 229, 0.35);
  --color-overlay: rgba(10, 14, 35, 0.55);
  --color-header-bg: rgba(255, 255, 255, 0.8);
  --color-mark: #fde68a;
  --color-on-mark: #1a2140;
  --color-scrollbar: #c7cce0;
  --color-white: #ffffff;
  --color-logo-1: #4f46e5;
  --color-logo-2: #7c3aed;
  --color-on-logo: #ffffff;
  --color-skeleton: #eceef7;

  /* ---------- Gradients ---------- */
  --gradient-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --gradient-brand-text: linear-gradient(120deg, #4338ca 0%, #7c3aed 60%, #0f766e 100%);
  --gradient-soft: radial-gradient(120% 120% at 100% 0%, rgba(124, 58, 237, 0.10) 0%, rgba(79, 70, 229, 0.05) 35%, rgba(255, 255, 255, 0) 70%);
  --gradient-hero: radial-gradient(60% 60% at 15% 10%, rgba(99, 102, 241, 0.16) 0%, rgba(99, 102, 241, 0) 70%),
                   radial-gradient(50% 50% at 90% 20%, rgba(13, 148, 136, 0.12) 0%, rgba(13, 148, 136, 0) 70%),
                   radial-gradient(60% 60% at 60% 100%, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0) 70%);
  --blob-1: rgba(99, 102, 241, 0.35);
  --blob-2: rgba(13, 148, 136, 0.28);
  --blob-3: rgba(245, 158, 11, 0.25);

  /* Call-to-action banner (same in both themes; white text ≥ 7:1) */
  --gradient-cta: linear-gradient(135deg, #312e81 0%, #4338ca 45%, #6d28d9 100%);
  --color-on-cta: #ffffff;
  --color-on-cta-muted: rgba(255, 255, 255, 0.88);
  --color-cta-ink: #312e81;
  --color-cta-btn-hover: #eef0ff;
  --cta-line: rgba(255, 255, 255, 0.5);
  --cta-hover-bg: rgba(255, 255, 255, 0.14);
  --cta-orb: rgba(255, 255, 255, 0.1);

  /* Used only as an alpha mask (fades decorative patterns) */
  --mask-solid: #000000;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 64, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 24, 64, 0.08), 0 1px 2px rgba(16, 24, 64, 0.04);
  --shadow-md: 0 8px 18px -6px rgba(16, 24, 64, 0.14), 0 2px 4px rgba(16, 24, 64, 0.05);
  --shadow-lg: 0 18px 40px -14px rgba(16, 24, 64, 0.24), 0 4px 8px rgba(16, 24, 64, 0.04);
  --shadow-xl: 0 30px 70px -20px rgba(16, 24, 64, 0.32), 0 8px 16px rgba(16, 24, 64, 0.06);
  --shadow-primary: 0 8px 20px -8px rgba(67, 56, 202, 0.6);

  /* ---------- Typography ---------- */
  --font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.05rem, 1rem + 0.25vw, 1.125rem);
  --fs-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-xl: clamp(1.3rem, 1.15rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --fs-4xl: clamp(2.35rem, 1.6rem + 3.8vw, 4.25rem);

  --lh-tight: 1.12;
  --lh-snug: 1.35;
  --lh-base: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --header-h: 68px;
  --tap: 44px;

  /* ---------- Layers ---------- */
  --z-base: 1;
  --z-dropdown: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 210;
  --z-modal: 300;
  --z-toast: 400;
  --z-skip: 500;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 420ms;
}

/* ==========================================================================
   Dark theme
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0a0f1f;
  --color-bg-alt: #0e1428;
  --color-surface: #121a2f;
  --color-surface-2: #18213a;
  --color-surface-3: #212b47;
  --color-border: #252f4c;
  --color-border-strong: #38436a;
  --color-text: #e3e7f5;
  --color-text-muted: #a8b0cc;
  --color-text-subtle: #8f98b8;
  --color-heading: #f5f7ff;

  --color-primary: #8b93ff;
  --color-primary-hover: #a7adff;
  --color-primary-active: #c3c7ff;
  --color-primary-soft: rgba(139, 147, 255, 0.13);
  --color-primary-soft-2: rgba(139, 147, 255, 0.24);
  --color-on-primary: #0a0f1f;

  --color-accent: #fbbf24;
  --color-accent-hover: #fcd34d;
  --color-accent-strong: #fcd34d;
  --color-accent-soft: rgba(251, 191, 36, 0.14);
  --color-on-accent: #1f1300;

  --color-secondary: #2dd4bf;
  --color-secondary-soft: rgba(45, 212, 191, 0.13);

  --color-success: #4ade80;
  --color-success-soft: rgba(74, 222, 128, 0.13);
  --color-warning: #fbbf24;
  --color-warning-soft: rgba(251, 191, 36, 0.13);
  --color-danger: #f87171;
  --color-danger-hover: #fca5a5;
  --color-danger-soft: rgba(248, 113, 113, 0.14);
  --color-on-danger: #1c0505;
  --color-info: #38bdf8;
  --color-info-soft: rgba(56, 189, 248, 0.13);

  --cat-admin: #a5abff;
  --cat-admin-soft: rgba(139, 147, 255, 0.15);
  --cat-people: #5eead4;
  --cat-people-soft: rgba(45, 212, 191, 0.14);
  --cat-academics: #c4a5ff;
  --cat-academics-soft: rgba(167, 139, 250, 0.16);
  --cat-daily: #fdba74;
  --cat-daily-soft: rgba(251, 146, 60, 0.15);
  --cat-reports: #7dd3fc;
  --cat-reports-soft: rgba(56, 189, 248, 0.14);

  --chart-1: #8b93ff;
  --chart-2: #2dd4bf;
  --chart-3: #fbbf24;
  --chart-4: #fb7185;
  --chart-5: #c4a5ff;
  --chart-6: #38bdf8;
  --chart-grid: #232c48;
  --chart-text: #a8b0cc;

  --color-focus: #a7adff;
  --color-focus-ring: rgba(139, 147, 255, 0.45);
  --color-overlay: rgba(2, 4, 12, 0.72);
  --color-header-bg: rgba(10, 15, 31, 0.76);
  --color-mark: rgba(251, 191, 36, 0.32);
  --color-on-mark: #fff7e0;
  --color-scrollbar: #303a5c;
  --color-logo-1: #6366f1;
  --color-logo-2: #8b5cf6;
  --color-skeleton: #1b2440;

  --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --gradient-brand-text: linear-gradient(120deg, #a7adff 0%, #c4a5ff 55%, #5eead4 100%);
  --gradient-soft: radial-gradient(120% 120% at 100% 0%, rgba(139, 92, 246, 0.16) 0%, rgba(99, 102, 241, 0.06) 35%, rgba(10, 15, 31, 0) 70%);
  --gradient-hero: radial-gradient(60% 60% at 15% 10%, rgba(99, 102, 241, 0.22) 0%, rgba(99, 102, 241, 0) 70%),
                   radial-gradient(50% 50% at 90% 20%, rgba(45, 212, 191, 0.14) 0%, rgba(45, 212, 191, 0) 70%),
                   radial-gradient(60% 60% at 60% 100%, rgba(251, 191, 36, 0.10) 0%, rgba(251, 191, 36, 0) 70%);
  --blob-1: rgba(99, 102, 241, 0.38);
  --blob-2: rgba(45, 212, 191, 0.22);
  --blob-3: rgba(251, 191, 36, 0.18);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 22px -8px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 44px -14px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 32px 80px -20px rgba(0, 0, 0, 0.8), 0 8px 18px rgba(0, 0, 0, 0.35);
  --shadow-primary: 0 8px 22px -8px rgba(139, 147, 255, 0.55);
}

/* ==========================================================================
   Print — force a clean black-on-white palette whatever the theme
   ========================================================================== */
@media print {
  :root,
  [data-theme="dark"] {
    color-scheme: light;
    --color-bg: #ffffff;
    --color-bg-alt: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #f2f2f2;
    --color-surface-3: #e6e6e6;
    --color-border: #bbbbbb;
    --color-border-strong: #888888;
    --color-text: #000000;
    --color-text-muted: #333333;
    --color-text-subtle: #444444;
    --color-heading: #000000;
    --color-primary: #000000;
    --color-on-primary: #ffffff;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
}