/* ==========================================================================
   Design Tokens — the Enterprise Design System's single source of truth
   for color, typography, spacing, radius, elevation, motion, and
   breakpoints. Every token here is a plain CSS custom property; no
   selectors, no component styling lives in this file (see
   design-system.css for standardized component classes, and
   shared-components.css for the Shared Component Library's own
   classes, both of which consume these tokens).

   Values were not invented from scratch: they were chosen to match the
   hex colors, radii, and shadows that already recur most often across
   the sixteen existing Student Portal page stylesheets (see the
   Analyze First evidence in app/Presentation/Shared/DesignSystem/docs/
   color-reference.md), so adopting this file unifies the codebase
   around its own de facto standard rather than introducing a
   visually unrelated palette every page would need to be redesigned
   to match.

   Portal-agnostic: nothing here mentions "student" — Teacher/Parent/
   Admin Portals (not yet built) can consume this same file unmodified.
   ========================================================================== */

:root {
    /* ---------- Color: brand + semantic (light theme, the default) ---------- */
    --ds-color-primary: #6c4ee3;
    --ds-color-primary-contrast: #ffffff;
    --ds-color-secondary: #4a3f7a;
    --ds-color-secondary-contrast: #ffffff;
    --ds-color-accent: #ff9d3d;
    --ds-color-accent-contrast: #2b2440;
    --ds-color-success: #2fb380;
    --ds-color-success-contrast: #ffffff;
    --ds-color-danger: #e2564f;
    --ds-color-danger-contrast: #ffffff;
    --ds-color-warning: #e0a52c;
    --ds-color-warning-contrast: #2b2440;
    --ds-color-info: #3aa0ff;
    --ds-color-info-contrast: #ffffff;

    --ds-color-bg: #f7f5ff;
    --ds-color-surface: #ffffff;
    --ds-color-surface-alt: #f1eefc;
    --ds-color-border: #e4dffa;
    --ds-color-text-primary: #2b2440;
    --ds-color-text-secondary: #6b6480;
    --ds-color-disabled-bg: #e4dffa;
    --ds-color-disabled-text: #a49bc2;
    --ds-color-hover-overlay: rgba(43, 36, 64, 0.06);
    --ds-color-focus-ring: #6c4ee3;

    /* ---------- Typography ---------- */
    --ds-font-heading: 'Baloo 2', sans-serif;
    --ds-font-body: 'Nunito', system-ui, sans-serif;
    --ds-font-code: 'Courier New', monospace;

    --ds-text-display-size: 2.5rem;
    --ds-text-display-weight: 800;
    --ds-text-display-line: 1.15;
    --ds-text-display-tracking: -0.01em;

    --ds-text-h1-size: 2rem;
    --ds-text-h1-weight: 800;
    --ds-text-h1-line: 1.2;

    --ds-text-h2-size: 1.5rem;
    --ds-text-h2-weight: 700;
    --ds-text-h2-line: 1.25;

    --ds-text-h3-size: 1.25rem;
    --ds-text-h3-weight: 700;
    --ds-text-h3-line: 1.3;

    --ds-text-h4-size: 1.1rem;
    --ds-text-h4-weight: 700;
    --ds-text-h4-line: 1.35;

    --ds-text-body-lg-size: 1rem;
    --ds-text-body-lg-weight: 400;
    --ds-text-body-lg-line: 1.6;

    --ds-text-body-size: 0.9rem;
    --ds-text-body-weight: 400;
    --ds-text-body-line: 1.6;

    --ds-text-small-size: 0.8rem;
    --ds-text-small-weight: 400;
    --ds-text-small-line: 1.5;

    --ds-text-caption-size: 0.75rem;
    --ds-text-caption-weight: 600;
    --ds-text-caption-line: 1.4;
    --ds-text-caption-tracking: 0.03em;

    --ds-text-code-size: 0.85rem;
    --ds-text-code-weight: 400;
    --ds-text-code-line: 1.5;

    /* ---------- Spacing scale (px values expressed in rem, 16px root) ---------- */
    --ds-space-4: 0.25rem;
    --ds-space-8: 0.5rem;
    --ds-space-12: 0.75rem;
    --ds-space-16: 1rem;
    --ds-space-20: 1.25rem;
    --ds-space-24: 1.5rem;
    --ds-space-32: 2rem;
    --ds-space-40: 2.5rem;
    --ds-space-48: 3rem;
    --ds-space-64: 4rem;
    --ds-space-80: 5rem;
    --ds-space-96: 6rem;

    /* ---------- Border radius ---------- */
    --ds-radius-none: 0;
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-xl: 24px;
    --ds-radius-pill: 999px;
    --ds-radius-circle: 50%;

    /* ---------- Elevation (shadow), tinted with the brand accent per the
       codebase's own dominant existing shadow color rather than plain
       black, so adopting this scale doesn't clash with already-shipped
       pages ---------- */
    --ds-elevation-0: none;
    --ds-elevation-1: 0 2px 8px rgba(90, 70, 180, 0.12);
    --ds-elevation-2: 0 6px 16px rgba(90, 70, 180, 0.15);
    --ds-elevation-3: 0 12px 24px rgba(90, 70, 180, 0.2);
    --ds-elevation-4: 0 20px 40px rgba(90, 70, 180, 0.28);

    /* ---------- Motion ---------- */
    --ds-motion-fast: 120ms;
    --ds-motion-base: 200ms;
    --ds-motion-slow: 350ms;
    --ds-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- Breakpoints (documented as custom properties for
       reference/tooling; media queries themselves cannot read var(), so
       every @media rule in this file and design-system.css repeats the
       literal px value — see docs/theme-guide.md for the full table.
       Values match Bootstrap 5.3's own grid tier breakpoints exactly,
       so this scale is Bootstrap-compatible by construction. ---------- */
    --ds-breakpoint-tablet: 576px;
    --ds-breakpoint-laptop: 768px;
    --ds-breakpoint-desktop: 1200px;
    --ds-breakpoint-wide: 1400px;

    /* ---------- Backward-compatible alias layer: every existing page
       stylesheet already maps its own --{prefix}-* palette onto these
       generic --shared-* names (see shared-components.css). Rather
       than rename that established contract, the Design System supplies
       DEFAULT values for it here, keyed off the new --ds-* tokens, so
       any page (or future Teacher/Parent/Admin page) that forgets to
       define its own palette still renders correctly instead of
       silently breaking. Pages that DO define their own --rs-*/--rv-*
       etc. mapping continue to win, since :root declarations of the
       same property later in the cascade — i.e. a page's own
       stylesheet, loaded after this file — override these defaults. ---------- */
    --shared-bg: var(--ds-color-bg);
    --shared-surface: var(--ds-color-surface);
    --shared-surface-alt: var(--ds-color-surface-alt);
    --shared-text: var(--ds-color-text-primary);
    --shared-text-muted: var(--ds-color-text-secondary);
    --shared-border: var(--ds-color-border);
    --shared-accent: var(--ds-color-primary);
    --shared-accent-contrast: var(--ds-color-primary-contrast);
    --shared-success: var(--ds-color-success);
    --shared-warning: var(--ds-color-warning);
    --shared-danger: var(--ds-color-danger);
    --shared-radius: var(--ds-radius-lg);
    --shared-font-heading: var(--ds-font-heading);
    --shared-font-body: var(--ds-font-body);
}

/* ---------- Dark theme ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --ds-color-primary: #9a86f2;
        --ds-color-primary-contrast: #171327;
        --ds-color-secondary: #b3a9d6;
        --ds-color-secondary-contrast: #171327;
        --ds-color-accent: #ffb35c;
        --ds-color-accent-contrast: #171327;
        --ds-color-success: #34c26e;
        --ds-color-danger: #ff6b63;
        --ds-color-warning: #ffcd3c;
        --ds-color-info: #6cbcff;

        --ds-color-bg: #171327;
        --ds-color-surface: #211a38;
        --ds-color-surface-alt: #2a2247;
        --ds-color-border: #392f5c;
        --ds-color-text-primary: #eee9ff;
        --ds-color-text-secondary: #b3a9d6;
        --ds-color-disabled-bg: #332c54;
        --ds-color-disabled-text: #6b6690;
        --ds-color-hover-overlay: rgba(238, 233, 255, 0.08);
        --ds-color-focus-ring: #9a86f2;

        --ds-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.35);
        --ds-elevation-2: 0 6px 16px rgba(0, 0, 0, 0.4);
        --ds-elevation-3: 0 12px 24px rgba(0, 0, 0, 0.45);
        --ds-elevation-4: 0 20px 40px rgba(0, 0, 0, 0.55);
    }
}

/* Explicit theme override hooks, for a future in-app theme toggle (not
   built this milestone — see docs/dark-mode-guide.md) to force a theme
   regardless of OS preference by stamping data-theme on <html>. */
:root[data-theme="dark"] {
    --ds-color-primary: #9a86f2;
    --ds-color-primary-contrast: #171327;
    --ds-color-secondary: #b3a9d6;
    --ds-color-secondary-contrast: #171327;
    --ds-color-accent: #ffb35c;
    --ds-color-accent-contrast: #171327;
    --ds-color-success: #34c26e;
    --ds-color-danger: #ff6b63;
    --ds-color-warning: #ffcd3c;
    --ds-color-info: #6cbcff;
    --ds-color-bg: #171327;
    --ds-color-surface: #211a38;
    --ds-color-surface-alt: #2a2247;
    --ds-color-border: #392f5c;
    --ds-color-text-primary: #eee9ff;
    --ds-color-text-secondary: #b3a9d6;
    --ds-color-disabled-bg: #332c54;
    --ds-color-disabled-text: #6b6690;
    --ds-color-hover-overlay: rgba(238, 233, 255, 0.08);
    --ds-color-focus-ring: #9a86f2;
    --ds-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.35);
    --ds-elevation-2: 0 6px 16px rgba(0, 0, 0, 0.4);
    --ds-elevation-3: 0 12px 24px rgba(0, 0, 0, 0.45);
    --ds-elevation-4: 0 20px 40px rgba(0, 0, 0, 0.55);
}
:root[data-theme="light"] {
    --ds-color-primary: #6c4ee3;
    --ds-color-primary-contrast: #ffffff;
    --ds-color-secondary: #4a3f7a;
    --ds-color-secondary-contrast: #ffffff;
    --ds-color-accent: #ff9d3d;
    --ds-color-accent-contrast: #2b2440;
    --ds-color-success: #2fb380;
    --ds-color-danger: #e2564f;
    --ds-color-warning: #e0a52c;
    --ds-color-info: #3aa0ff;
    --ds-color-bg: #f7f5ff;
    --ds-color-surface: #ffffff;
    --ds-color-surface-alt: #f1eefc;
    --ds-color-border: #e4dffa;
    --ds-color-text-primary: #2b2440;
    --ds-color-text-secondary: #6b6480;
    --ds-color-disabled-bg: #e4dffa;
    --ds-color-disabled-text: #a49bc2;
    --ds-color-hover-overlay: rgba(43, 36, 64, 0.06);
    --ds-color-focus-ring: #6c4ee3;
    --ds-elevation-1: 0 2px 8px rgba(90, 70, 180, 0.12);
    --ds-elevation-2: 0 6px 16px rgba(90, 70, 180, 0.15);
    --ds-elevation-3: 0 12px 24px rgba(90, 70, 180, 0.2);
    --ds-elevation-4: 0 20px 40px rgba(90, 70, 180, 0.28);
}

/* ---------- High contrast ---------- */
@media (prefers-contrast: more) {
    :root {
        --ds-color-border: #000000;
        --ds-color-text-secondary: var(--ds-color-text-primary);
        --ds-color-focus-ring: #000000;
        --ds-elevation-1: none;
        --ds-elevation-2: none;
        --ds-elevation-3: none;
        --ds-elevation-4: none;
    }
}
:root[data-theme="high-contrast"] {
    --ds-color-bg: #ffffff;
    --ds-color-surface: #ffffff;
    --ds-color-surface-alt: #ffffff;
    --ds-color-border: #000000;
    --ds-color-text-primary: #000000;
    --ds-color-text-secondary: #000000;
    --ds-color-primary: #3300cc;
    --ds-color-primary-contrast: #ffffff;
    --ds-color-focus-ring: #000000;
    --ds-elevation-1: none;
    --ds-elevation-2: none;
    --ds-elevation-3: none;
    --ds-elevation-4: none;
}

/* Global, codebase-wide reduced-motion guarantee. Individual component
   stylesheets are free to keep their own explicit
   `@media (prefers-reduced-motion: reduce)` overrides (many already do)
   — this is a safety net, not a replacement, so removing a page's own
   override is not required for this rule to take effect. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}