/* ========================================================================
   JMATHS BRAND THEME - STRICT COLOR PALETTE

   RULE: Only use these CSS variables. Never hardcode hex colors.
   ======================================================================== */

:root {
    /* ====================================================================
       BRAND COLORS - The only colors allowed
       ==================================================================== */

    /* Primary - Teal (use for: buttons, links, primary actions) */
    --color-primary: #14b8a6;
    --color-primary-hover: #0d9488;
    --color-primary-light: #5eead4;
    --color-primary-bg: rgba(20, 184, 166, 0.08);

    /* Success - Emerald (use for: completed, correct, positive) */
    --color-success: #10b981;
    --color-success-hover: #059669;
    --color-success-bg: rgba(16, 185, 129, 0.08);

    /* Warning - Amber (use for: caution, in-progress, attention) */
    --color-warning: #f59e0b;
    --color-warning-hover: #d97706;
    --color-warning-bg: rgba(245, 158, 11, 0.08);

    /* Danger - Red (use for: errors, delete, destructive) */
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-bg: rgba(239, 68, 68, 0.08);

    /* Info - Cyan (use for: informational, secondary highlight) */
    --color-info: #06b6d4;
    --color-info-hover: #0891b2;
    --color-info-bg: rgba(6, 182, 212, 0.08);

    /* Neutral - Slate (use for: text, borders, backgrounds) */
    --color-text: #1e293b;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    --color-secondary: #6c757d;         /* Bootstrap gray for secondary elements */
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-bg: #ffffff;
    --color-bg-subtle: #f8fafc;
    --color-bg-muted: #f1f5f9;

    /* Typography — question prose uses a math-matched serif so inline
       MathJax (STIX/TeX) blends into the sentence instead of clashing
       with sans-serif body text (same font the print paper uses). */
    --font-question: 'STIX Two Text', Georgia, 'Times New Roman', serif;

    /* Display serif — Fraunces (loaded in base.html <head>). Used wherever
       a component wants a distinct display face (science story titles,
       book-index jacket titles) rather than the body sans. */
    --jm-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    /* Bootstrap Standard Colors - For Bootstrap compatibility */
    --bs-blue: #0d6efd;
    --bs-green: #198754;
    --bs-orange: #fd7e14;
    --bs-cyan: #0dcaf0;
    --bs-gray: var(--color-secondary);
    --bs-gray-light: #e9ecef;

    /* ====================================================================
       SEMANTIC ALIASES - Use these in components
       ==================================================================== */
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --secondary: var(--color-info);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --info: var(--color-info);

    --text: var(--color-text);
    --text-muted: var(--color-text-muted);
    --text-light: var(--color-text-light);
    --border: var(--color-border);
    --background: var(--color-bg);
    --background-light: var(--color-bg-subtle);

    /* ====================================================================
       LEGACY JMATHS VARIABLES - Mapped to new color system
       (Maintain backward compatibility with existing components)
       ==================================================================== */

    /* Brand blues - mapped to teal primary */
    --jmaths-light-blue: #99f6e4;      /* teal-200 - light accent */
    --jmaths-medium-blue: var(--color-primary);  /* teal-500 - matches --color-primary */
    --jmaths-medium-blue-rgb: 20, 184, 166;
    --jmaths-dark-blue: #0f766e;       /* teal-700 - deep primary */

    /* Primary variants */
    --jmaths-primary: var(--color-primary);
    --jmaths-primary-light: var(--color-primary-light);
    --jmaths-primary-dark: var(--color-primary-hover);

    /* Backgrounds */
    --jmaths-cream: #f0fdfa;           /* teal-50 - soft background */
    --jmaths-bg-primary-soft: var(--color-primary-bg);

    /* Semantic colors */
    --jmaths-red: var(--color-danger);
    --jmaths-success: var(--color-success);
    --jmaths-warning: var(--color-warning);
    --jmaths-danger: var(--color-danger);
    --jmaths-info: var(--color-info);

    /* Gray scale (Slate) */
    --jmaths-gray-50: var(--color-bg-subtle);
    --jmaths-gray-100: var(--color-border-light);
    --jmaths-gray-200: var(--color-border);
    --jmaths-gray-300: #cbd5e1;
    --jmaths-gray-400: var(--color-text-light);
    --jmaths-gray-500: var(--color-text-muted);
    --jmaths-gray-600: #475569;
    --jmaths-gray-700: #334155;
    --jmaths-gray-800: var(--color-text);
    --jmaths-gray-900: #0f172a;

    /* ====================================================================
       RGB VALUES - For rgba() usage
       ==================================================================== */
    --color-primary-rgb: 20, 184, 166;
    --color-success-rgb: 16, 185, 129;
    --color-warning-rgb: 245, 158, 11;
    --color-danger-rgb: 239, 68, 68;
    --color-info-rgb: 6, 182, 212;
    --color-text-muted-rgb: 100, 116, 139;

    /* ====================================================================
       GRADIENTS - Consistent gradient definitions
       ==================================================================== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    --gradient-primary-soft: linear-gradient(135deg, var(--color-primary-bg) 0%, rgba(20, 184, 166, 0.12) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-hover) 100%);
    --gradient-cool: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
    --gradient-subtle: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-hover) 100%);
    --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-hover) 100%);
    --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-hover) 100%);
    --gradient-info: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-hover) 100%);

    /* ====================================================================
       SHADOWS, SPACING, RADIUS, TRANSITIONS
       Defined in core/variables.css and core/modern-bootstrap.css
       ==================================================================== */

    /* ====================================================================
       HOUSE STYLE (approved 2026-07-03) - cream/mint/teal/tangerine/gold.
       Additive layer for reports/artifacts and the site-UI rollout
       (courses first). Matches science's blend-vibrant reskin (#446) gold
       (--gold) and tangerine (--tangerine) values exactly - reuse, don't
       reinvent when reskinning other apps.
       ==================================================================== */
    --cream: #FBFAF5;
    --paper: #ffffff;
    --mint: #EAFBF6;
    --mint2: #D5F5EC;
    --teal: #12B5A6;
    --teal-deep: #0C7A70;
    --teal-ink: #0E2A28;
    --cyan: #22D3EE;
    --tangerine: #FF6B4A;
    --gold: #FFB020;
    --ink: #0E2A28;
    --muted: #5C7772;
    --line: #CDE9E1;
    --shadow: 0 12px 30px -14px rgba(12, 122, 112, .4);

    --jm-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --jm-font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ========================================================================
   BOOTSTRAP OVERRIDES
   ======================================================================== */
:root {
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-success: var(--color-success);
    --bs-success-rgb: var(--color-success-rgb);
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: var(--color-warning-rgb);
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: var(--color-danger-rgb);
    --bs-info: var(--color-info);
    --bs-info-rgb: var(--color-info-rgb);
    --bs-secondary: var(--color-text-muted);
    --bs-secondary-rgb: var(--color-text-muted-rgb);

    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);

    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-bg);
    --bs-border-color: var(--color-border);
}

/* Text on colored backgrounds */
.bg-primary, .bg-success, .bg-danger, .bg-info { color: white !important; }
.bg-warning { color: var(--color-text) !important; }
.bg-light { background-color: var(--color-bg-subtle) !important; }

/* ========================================================================
   SITE SHELL (sidebar layout, behind the site_shell_v2 flag)
   Light values point at the house-style tokens above; dark values are set
   here because the site has no dark mode of its own yet. The shell turns it
   on with <html data-theme="dark"> (static/js/site-shell-boot.js).
   ======================================================================== */
:root {
    --shell-paper: var(--paper);
    --shell-wash: var(--color-bg-muted);
    --shell-ink: var(--ink);
    --shell-muted: var(--muted);
    --shell-line: var(--color-border);
    --shell-teal: var(--teal-deep);
    --shell-teal-soft: var(--mint);
    --shell-tang: var(--tangerine);
    --shell-gold: var(--gold);
    --shell-cyan: var(--color-info-hover);
    --shell-leaf: #4d7c0f;
    --shell-on-accent: var(--paper);
    --shell-scrim: rgba(10, 25, 22, 0.45);
}

:root[data-theme="dark"] {
    --shell-paper: #17221f;
    --shell-wash: #1c2926;
    --shell-ink: #e5efec;
    --shell-muted: #9db1ad;
    --shell-line: #2a3a36;
    --shell-teal: #5eead4;
    --shell-teal-soft: #12302b;
    --shell-tang: #ff8a66;
    --shell-gold: #f5c45e;
    --shell-cyan: #67e8f9;
    --shell-leaf: #a3d65c;
    --shell-on-accent: #17221f;
    --shell-scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}