/* UI Overhaul: variables.css — canonical design tokens.
   Replaces Plan 006 content. */

:root {
    /* ── Z-index scale (canonical — no raw integers elsewhere in CSS) ── */
    --z-base:        0;
    --z-raised:      10;
    --z-nav:         30;
    --z-sidebar:     40;
    --z-dropdown:    50;
    --z-modal:       60;
    --z-settings:    70;
    --z-toast:       80;

    /* ── Surface hierarchy ── */
    --surface:                  #f8f9fa;
    --surface-container-low:    #f1f4f5;
    --surface-container-lowest: #ffffff;
    --surface-container:        #ebeef0;
    --surface-container-high:   #e5e9eb;
    --surface-container-highest:#dee3e6;

    /* ── Primary palette ── */
    --primary:             #005bc1;
    --primary-container:   #3d89ff;
    --primary-dim:         #0050aa;
    --secondary:           #595f72;
    --secondary-container: #dce2f9;
    --tertiary:            #6b567f;
    --tertiary-container:  #e8cdfd;
    --on-surface:          #2d3335;
    --on-surface-variant:  #5a6062;
    --on-secondary-container: #4b5164;
    --on-tertiary-container:  #56426a;
    --outline-variant:     #adb3b5;
    --error:               #a83836;

    /* ── Typography ── */
    --font-headline: 'Manrope', sans-serif;
    --font-body:     'Inter', sans-serif;

    /* ── Ghost border — mandatory on ALL interactive elements ── */
    --ghost-border: 1px solid rgba(173, 179, 181, 0.15);

    /* ── Ambient shadow — floating elements only ── */
    --ambient-shadow: 0 0 32px -4px rgba(45, 51, 53, 0.06);

    /* ── Settings layer animation timing (preserved) ── */
    --settings-layer-duration-ms: 220ms;
    --settings-layer-ease: cubic-bezier(0.2, 0.9, 0.3, 1);

    /* ── Form tokens (preserved for auth forms) ── */
    --form-radius:            8px;
    --form-border-color:      #e5e7eb;
    --form-surface-shadow:    0 2px 4px rgba(0, 0, 0, 0.05);
    --form-field-shadow-inset:inset 0 1px 2px rgba(15, 23, 42, 0.04);
    --form-focus-color:       var(--primary);
    --form-focus-ring:        0 0 0 3px rgba(0, 91, 193, 0.20);
    --form-line-height:       1.5;

    /* ── Design-system color scale (Academic Curator) ── */
    --color-white:          #ffffff;
    --color-primary-900:    #0f2a6e;
    --color-primary-800:    #143899;
    --color-primary-700:    #1a4fcf;   /* Deep Cobalt — brand primary */
    --color-primary-600:    #2563eb;
    --color-primary-500:    #3b82f6;
    --color-primary-400:    #60a5fa;
    --color-primary-300:    #93c5fd;
    --color-primary-200:    #bfdbfe;
    --color-primary-100:    #dbeafe;
    --color-primary-50:     #eff6ff;
    --color-primary-light:  #e8effe;

    /* ── Neutral scale ── */
    --color-neutral-950: #0a0f1e;
    --color-neutral-900: #0f172a;
    --color-neutral-800: #1e293b;
    --color-neutral-700: #334155;
    --color-neutral-600: #475569;
    --color-neutral-500: #64748b;
    --color-neutral-400: #94a3b8;
    --color-neutral-300: #cbd5e1;
    --color-neutral-200: #e2e8f0;
    --color-neutral-100: #f1f5f9;
    --color-neutral-50:  #f8fafc;

    /* ── Semantic colors ── */
    --color-success:       #16a34a;
    --color-success-light: #dcfce7;
    --color-warning:       #d97706;
    --color-warning-light: #fef3c7;
    --color-warning-dark:  #b45309;
    --color-danger:        #dc2626;
    --color-danger-light:  #fee2e2;
    --color-danger-dark:   #b91c1c;
    --color-info:          #0891b2;
    --color-info-light:    #e0f2fe;

    /* ── Department colors ── */
    --color-dept-math:       #1a4fcf;
    --color-dept-physics:    #3b82f6;
    --color-dept-humanities: #ef4444;
    --color-dept-cs:         #7c3aed;
    --color-dept-science:    #059669;
    --color-dept-arts:       #f59e0b;

    /* ── Semantic role aliases ── */
    --bg-page:        var(--color-neutral-50);
    --bg-surface:     var(--color-white);
    --bg-surface-alt: var(--color-neutral-100);
    --bg-dark:        var(--color-neutral-800);
    --border-default: var(--color-neutral-200);
    --border-strong:  var(--color-neutral-300);
    --border-focus:   var(--color-primary-700);
    --fg-primary:     var(--color-neutral-900);
    --fg-secondary:   var(--color-neutral-600);
    --fg-tertiary:    var(--color-neutral-400);
    --fg-on-primary:  var(--color-white);
    --fg-on-dark:     var(--color-white);
    --fg-link:        var(--color-primary-700);
    --fg-success:     var(--color-success);
    --fg-danger:      var(--color-danger);

    /* ── Spacing (8px grid) ── */
    --space-0:  0px;
    --space-px: 1px;
    --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;

    /* ── Border radius ── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* ── Shadows (multi-layer soft-UI) ── */
    --shadow-xs:           0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm:           0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md:           0 4px 6px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-lg:           0 10px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-xl:           0 20px 40px rgba(15, 23, 42, 0.10), 0 8px 16px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-inner:        inset 0 1px 3px rgba(15, 23, 42, 0.06), inset 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-focus:        0 0 0 3px rgba(26, 79, 207, 0.18);
    --shadow-primary:      0 4px 14px rgba(26, 79, 207, 0.28), 0 2px 6px rgba(26, 79, 207, 0.18);
    --shadow-slider-thumb: 0 2px 8px rgba(26, 79, 207, 0.35);

    /* ── Subject pill colors (categorical, matches student-card palette) ── */
    --color-subject-math-bg:    #e0ecff;
    --color-subject-math-fg:    #1a4fcf;
    --color-subject-english-bg: #d6f5e3;
    --color-subject-english-fg: #047857;
    --color-subject-science-bg: #fef0d6;
    --color-subject-science-fg: #b45309;
    --color-subject-chinese-bg: #ece4fb;
    --color-subject-chinese-fg: #6d28d9;
    --color-subject-malay-bg:   #d1fae5;
    --color-subject-malay-fg:   #065f46;
    --color-subject-history-bg: #ece4fb;
    --color-subject-history-fg: #6d28d9;
    --color-subject-music-bg:   #fde2ee;
    --color-subject-music-fg:   #be185d;
    --color-subject-art-bg:     #ffe2e6;
    --color-subject-art-fg:     #be123c;

    /* ── Mobile nav backdrop ── */
    --backdrop-mobile: rgba(15, 23, 42, 0.6);   /* --color-neutral-900 at 60% opacity */

    /* ── Type scale ── */
    --text-display: 32px;
    --text-h1:      24px;
    --text-h2:      18px;
    --text-h3:      15px;
    --text-body:    14px;
    --text-sm:      13px;
    --text-xs:      12px;
    --text-micro:   11px;

    /* ── Font weights ── */
    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    /* ── Font families (used by classrooms redesign) ── */
    --font-sans: 'Inter', 'Geist', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* ── Line heights ── */
    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    /* ── Letter spacing ── */
    --tracking-tight:  -0.02em;
    --tracking-normal: -0.01em;
    --tracking-wide:    0.04em;
    --tracking-wider:   0.08em;

    /* ── Transitions ── */
    --transition-fast: all 0.1s ease;
    --transition-base: all 0.15s ease;
    --transition-slow: all 0.25s ease;

    /* ── Layout ── */
    --sidebar-width:     180px;
    --header-height:     56px;
    --content-max-width: 1200px;
}

body {
    font-family: var(--font-body);
    background: var(--surface);
    color: var(--on-surface);
}

h1, h2, h3 {
    font-family: var(--font-headline);
}

/* Material Symbols — reserve 24×24 before variable font loads */
.material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 24px;
    vertical-align: middle;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon--sm { width: 20px; height: 20px; }
.icon--xs { width: 16px; height: 16px; }