/* ─────────────────────────────────────────────────────────────────────
 * design-tokens.css — Single source of truth for the entire site.
 * Loaded FIRST in templates/header.php (before any page-specific CSS).
 *
 * EdTech SaaS palette: teal · emerald · cyan · amber · gray.
 * Strict rule: NO blue, NO purple, NO red anywhere in the brand.
 *
 * USAGE: never hardcode hex colors / random spacing / random radius.
 * Always reference these tokens via var(--token-name).
 * ───────────────────────────────────────────────────────────────────── */

:root {
    /* ── Typography ─────────────────────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --fs-h1-desktop: 32px;
    --fs-h1-mobile:  26px;
    --fs-h2-desktop: 26px;
    --fs-h2-mobile:  22px;
    --fs-h3:         20px;
    --fs-h4:         18px;
    --fs-body:       16px;
    --fs-small:      13px;
    --fs-micro:      12px;

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

    --lh-tight:      1.2;
    --lh-normal:     1.5;
    --lh-body:       1.6;
    --lh-loose:      1.75;

    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.04em;
    --tracking-mono:    0.06em;

    /* ════════════════════════════════════════════════════════════
     * COLOR SYSTEM (strict — only these palettes)
     * ════════════════════════════════════════════════════════════ */

    /* Primary — TEAL (main CTA, buttons, links) */
    --color-primary:        #14B8A6;
    --color-primary-hover:  #0F766E;
    --color-primary-soft:   #CCFBF1;
    --color-primary-deep:   #134E4A;

    /* Secondary — EMERALD (progress, success, learning states) */
    --color-secondary:        #10B981;
    --color-secondary-hover:  #059669;
    --color-secondary-soft:   #D1FAE5;
    --color-secondary-deep:   #064E3B;

    /* Accent — CYAN (highlight, AI, special features, premium) */
    --color-accent:        #06B6D4;
    --color-accent-hover:  #0891B2;
    --color-accent-soft:   #CFFAFE;
    --color-accent-deep:   #155E75;

    /* Status: warning amber + locked gray ONLY (no danger red) */
    --color-warning:       #F59E0B;
    --color-warning-soft:  #FEF3C7;
    --color-warning-deep:  #92400E;

    --color-locked:        #94A3B8;
    --color-locked-soft:   #F1F5F9;
    --color-locked-deep:   #475569;

    /* ── Surface ────────────────────────────────────────────────── */
    --color-bg:       #F8FAFC;
    --color-surface:  #FFFFFF;
    --color-soft:     #F4F4F5;
    --color-border:   #E5E7EB;
    --color-line:     #F1F5F9;

    /* ── Text ───────────────────────────────────────────────────── */
    --color-ink:      #0F172A;
    --color-text:     #0F172A;
    --color-secondary-text: #334155;
    --color-muted:    #64748B;
    --color-mute2:    #94A3B8;
    --color-on-dark:  #FFFFFF;

    /* ── Aliases for legacy code ────────────────────────────────────
     * Old names retained but pointed at new palette so existing code
     * (.btn-success / .btn-danger / .badge-success etc.) still resolves.
     * NEW code: use --color-primary / --color-secondary directly.
     * ──────────────────────────────────────────────────────────── */
    --color-success:       var(--color-secondary);
    --color-success-soft:  var(--color-secondary-soft);
    /* "Danger" in this brand = amber warning (no red allowed) */
    --color-danger:        var(--color-warning);
    --color-danger-soft:   var(--color-warning-soft);
    --color-info:          var(--color-accent);
    --color-info-soft:     var(--color-accent-soft);
    /* Legacy "highlight" yellow → cyan accent (no yellow brand) */
    --color-highlight:        var(--color-accent);
    --color-highlight-soft:   var(--color-accent-soft);
    --color-highlight-deep:   var(--color-accent-deep);

    /* ── Radius ─────────────────────────────────────────────────── */
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    14px;
    --radius-xl:    20px;
    --radius-pill:  999px;

    /* ── Shadow ─────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, .10);
    --shadow-focus: 0 0 0 3px rgba(20, 184, 166, .25); /* teal focus */

    /* ── Spacing scale (4px base) ───────────────────────────────── */
    --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;

    /* ── Component sizing ───────────────────────────────────────── */
    --btn-h-sm: 32px;
    --btn-h-md: 40px;
    --btn-h-lg: 48px;
    --btn-px-sm: 14px;
    --btn-px-md: 18px;
    --btn-px-lg: 24px;

    --input-h: 40px;
    --input-px: 14px;

    /* ── Motion ─────────────────────────────────────────────────── */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;

    /* ── Z-index ────────────────────────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    1000;
    --z-toast:    2000;
}

/* Global typography defaults — applied site-wide */
html { font-size: 16px; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-bg);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    color: var(--color-ink);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-3);
}
h1 { font-size: var(--fs-h1-desktop); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2-desktop); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3);         font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4);         font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-3); }
small { font-size: var(--fs-small); }
code, kbd, pre { font-family: var(--font-mono); }

@media (max-width: 768px) {
    h1 { font-size: var(--fs-h1-mobile); }
    h2 { font-size: var(--fs-h2-mobile); }
}

/* Highlight helpers — never use random colors for emphasis */
.highlight    { color: var(--color-primary); font-weight: var(--fw-bold); }
.highlight-2  { color: var(--color-accent);  font-weight: var(--fw-bold); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}