/* ============================================================================
   APRENDIZZAJE DESIGN SYSTEM · V2 FOUNDATION
   Canonical tokens shared by student, teacher, admin and public surfaces.
   V2 scope: typography, hierarchy, spacing, grids, surfaces and components.
   Priority-forcing declarations are intentionally avoided in this file.
   ============================================================================ */
:root {
    color-scheme: light;

    /* Ink */
    --al-ink-950: #0b1324;
    --al-ink-900: #142039;
    --al-ink-850: #1b2944;
    --al-ink-800: #263653;
    --al-ink-700: #3f506c;
    --al-ink-600: #5d6d85;
    --al-ink-500: #7b899e;
    --al-ink-400: #99a5b6;

    /* Canvas / surfaces */
    --al-canvas: #f4f7fc;
    --al-canvas-cool: #edf3fb;
    --al-surface: #ffffff;
    --al-surface-soft: #f8faff;
    --al-surface-tint: #eff5ff;
    --al-surface-raised: rgba(255, 255, 255, .96);
    --al-surface-interactive: #fbfdff;
    --al-surface-active: #edf6ff;
    --al-surface-locked: #f0f3f8;
    --al-surface-reward: #fff9e9;

    /* Functional colors */
    --al-primary: #1d72e8;
    --al-primary-deep: #1556b7;
    --al-primary-soft: #eaf3ff;
    --al-secondary: #6b55db;
    --al-secondary-soft: #f0edff;
    --al-info: #0b8fc5;
    --al-info-soft: #e7f7fd;
    --al-success: #16845d;
    --al-success-soft: #e8f8f1;
    --al-warning: #b96b07;
    --al-warning-soft: #fff5de;
    --al-danger: #bf4050;
    --al-danger-soft: #fff0f2;
    --al-reward: #d39215;
    --al-reward-soft: #fff7d8;
    --al-locked: #708097;

    /* Lines */
    --al-line-soft: #e7edf6;
    --al-line: #d9e2ef;
    --al-line-strong: #c3cfdf;
    --al-line-accent: rgba(29, 114, 232, .22);

    /* Typography. System/local stacks only; no remote font dependency. */
    --al-font-display: "Bahnschrift SemiCondensed", "Aptos Display", "Segoe UI Variable Display", "Arial Narrow", system-ui, sans-serif;
    --al-font-display-wide: "Bahnschrift", "Aptos Display", "Segoe UI Variable Display", system-ui, sans-serif;
    --al-font-body: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --al-font-kid: "Trebuchet MS", "Segoe UI Rounded", ui-rounded, system-ui, sans-serif;
    --al-font-data: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace;

    --al-text-display-xl: clamp(2.35rem, 4.4vw, 4.8rem);
    --al-text-display: clamp(2rem, 3.2vw, 3.45rem);
    --al-text-h1: clamp(1.72rem, 2.4vw, 2.45rem);
    --al-text-h2: clamp(1.38rem, 1.75vw, 1.82rem);
    --al-text-h3: clamp(1.12rem, 1.35vw, 1.35rem);
    --al-text-h4: 1rem;
    --al-text-body-lg: 1.0625rem;
    --al-text-body: .975rem;
    --al-text-body-sm: .875rem;
    --al-text-label: .78rem;
    --al-text-caption: .75rem;
    --al-text-metric-xl: clamp(1.85rem, 2.8vw, 3rem);
    --al-text-metric: clamp(1.4rem, 2vw, 2rem);

    --al-leading-display: .98;
    --al-leading-heading: 1.12;
    --al-leading-body: 1.62;
    --al-leading-compact: 1.38;
    --al-reading-measure: 68ch;
    --al-track-display: -.035em;
    --al-track-heading: -.022em;
    --al-track-label: .085em;

    /* Spacing scale */
    --al-space-1: 4px;
    --al-space-2: 8px;
    --al-space-3: 12px;
    --al-space-4: 16px;
    --al-space-5: 20px;
    --al-space-6: 24px;
    --al-space-7: 32px;
    --al-space-8: 40px;
    --al-space-9: 48px;
    --al-space-10: 64px;
    --al-space-11: 80px;
    --al-page-gutter: clamp(16px, 2.25vw, 34px);
    --al-section-gap: clamp(18px, 2.2vw, 32px);
    --al-card-gap: clamp(14px, 1.5vw, 22px);

    /* Layout */
    --al-page-max: 1480px;
    --al-content-max: 1180px;
    --al-copy-max: 72ch;
    --al-grid-cols: 12;
    --al-grid-gap: clamp(14px, 1.5vw, 24px);

    /* Shape */
    --al-radius-xs: 8px;
    --al-radius-sm: 12px;
    --al-radius-md: 16px;
    --al-radius-lg: 22px;
    --al-radius-xl: 30px;
    --al-radius-hero: 36px;
    --al-radius-pill: 999px;

    /* Shadows / materiality */
    --al-shadow-xs: 0 2px 7px rgba(20, 32, 57, .055);
    --al-shadow-sm: 0 7px 20px rgba(20, 32, 57, .075), 0 1px 2px rgba(20, 32, 57, .04);
    --al-shadow-card: 0 14px 36px rgba(20, 32, 57, .09), 0 2px 7px rgba(20, 32, 57, .04);
    --al-shadow-float: 0 22px 56px rgba(20, 32, 57, .14), 0 4px 12px rgba(20, 32, 57, .05);
    --al-shadow-modal: 0 32px 90px rgba(8, 18, 35, .24);
    --al-shadow-reward: 0 18px 44px rgba(211, 146, 21, .18);
    --al-shadow-glow: 0 0 0 1px rgba(29, 114, 232, .08), 0 16px 42px rgba(29, 114, 232, .14);
    --al-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, .82);

    /* Motion primitives only; full choreography belongs to V5. */
    --al-ease-out: cubic-bezier(.2, .8, .2, 1);
    --al-ease-spring: cubic-bezier(.2, 1.15, .32, 1);
    --al-fast: 140ms;
    --al-medium: 240ms;
    --al-slow: 420ms;

    /* Controls */
    --al-control-height: 44px;
    --al-control-height-lg: 50px;
    --al-focus-ring: 0 0 0 3px rgba(29, 114, 232, .22), 0 0 0 1px rgba(29, 114, 232, .72);

    /* Compatibility aliases for legacy views. */
    --bg: var(--al-canvas);
    --bg-soft: var(--al-canvas-cool);
    --surface: var(--al-surface-raised);
    --surface-strong: var(--al-surface);
    --surface-alt: var(--al-surface-soft);
    --primary: var(--al-primary);
    --primary-dark: var(--al-primary-deep);
    --secondary: var(--al-reward);
    --secondary-dark: #8a5b05;
    --success: var(--al-success);
    --error: var(--al-danger);
    --warning: var(--al-warning);
    --text: var(--al-ink-900);
    --muted: var(--al-ink-600);
    --border: var(--al-line);
    --border-strong: var(--al-line-strong);
    --radius: var(--al-radius-lg);
    --radius-lg: var(--al-radius-xl);
    --shadow: var(--al-shadow-float);
    --shadow-soft: var(--al-shadow-card);
    --focus: var(--al-focus-ring);
    --font-body: var(--al-font-body);
    --font-heading: var(--al-font-display-wide);
    --title-hero: var(--al-text-h1);
    --title-xl: var(--al-text-h2);
    --title-lg: var(--al-text-h3);
    --title-md: var(--al-text-h4);
    --title-sm: var(--al-text-label);
    --body-lg: var(--al-text-body-lg);
    --body-md: var(--al-text-body);
    --body-sm: var(--al-text-body-sm);
    --line-copy: var(--al-leading-body);
    --line-tight: var(--al-leading-heading);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --al-canvas: #0b1320;
    --al-canvas-cool: #101b2b;
    --al-surface: #111d2e;
    --al-surface-soft: #152338;
    --al-surface-tint: #172a43;
    --al-surface-raised: rgba(17, 29, 46, .96);
    --al-surface-interactive: #16253a;
    --al-surface-active: #173151;
    --al-surface-locked: #172235;
    --al-surface-reward: #2a2415;
    --al-ink-950: #f5f9ff;
    --al-ink-900: #eaf2ff;
    --al-ink-850: #dce8f8;
    --al-ink-800: #c8d7e9;
    --al-ink-700: #afc1d6;
    --al-ink-600: #90a6bf;
    --al-ink-500: #748aa5;
    --al-line-soft: #1e3049;
    --al-line: #29405e;
    --al-line-strong: #385777;
    --al-primary: #5ba2ff;
    --al-primary-deep: #86baff;
    --al-primary-soft: #122f55;
    --al-secondary-soft: #2a2851;
    --al-info-soft: #102f42;
    --al-success-soft: #12382b;
    --al-warning-soft: #3a2b13;
    --al-danger-soft: #3d2027;
    --al-reward-soft: #352d13;
    --al-shadow-xs: 0 2px 7px rgba(0, 0, 0, .18);
    --al-shadow-sm: 0 8px 24px rgba(0, 0, 0, .22);
    --al-shadow-card: 0 16px 38px rgba(0, 0, 0, .26);
    --al-shadow-float: 0 26px 62px rgba(0, 0, 0, .34);
    --al-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, .055);
}

/* Role-aware typography */
body {
    font-family: var(--al-font-body);
    color: var(--al-ink-900);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.role-teacher,
body.role-admin {
    --al-font-heading-role: var(--al-font-display);
}

body.role-student,
.student-mode-kid {
    --al-font-heading-role: var(--al-font-kid);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--al-font-heading-role, var(--al-font-display));
    color: var(--al-ink-950);
    text-wrap: balance;
}

h1 { font-size: var(--al-text-h1); line-height: 1.02; letter-spacing: var(--al-track-display); font-weight: 800; }
h2 { font-size: var(--al-text-h2); line-height: var(--al-leading-heading); letter-spacing: var(--al-track-heading); font-weight: 800; }
h3 { font-size: var(--al-text-h3); line-height: 1.18; letter-spacing: -.015em; font-weight: 760; }
h4 { font-size: var(--al-text-h4); line-height: 1.25; letter-spacing: -.008em; font-weight: 750; }
p, li, td, th, input, select, textarea, button { font-family: var(--al-font-body); }
p, li { line-height: var(--al-leading-body); }

/* Shared primitives */
.al-sr-only,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.al-focusable:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--al-focus-ring);
}

.al-progress {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: var(--al-radius-pill);
    background: color-mix(in srgb, var(--al-line) 72%, transparent);
    box-shadow: inset 0 1px 2px rgba(20, 32, 57, .08);
}

.al-progress__bar {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--al-primary), #6f85ff);
    transform-origin: left center;
    animation: al-progress-in .64s var(--al-ease-out) both;
}

@keyframes al-progress-in {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.al-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius-pill);
    background: var(--al-surface-raised);
    color: var(--al-ink-800);
    font: 700 var(--al-text-caption)/1 var(--al-font-body);
    box-shadow: var(--al-shadow-xs);
}

.al-icon-disc {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--al-radius-md);
    background: var(--al-primary-soft);
    border: 1px solid var(--al-line-accent);
    box-shadow: var(--al-inset-highlight), var(--al-shadow-xs);
}

.al-card {
    background: var(--al-surface-raised);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius-lg);
    box-shadow: var(--al-inset-highlight), var(--al-shadow-card);
}

.al-grid {
    display: grid;
    grid-template-columns: repeat(var(--al-grid-cols), minmax(0, 1fr));
    gap: var(--al-grid-gap);
}

.al-copy {
    max-width: var(--al-reading-measure);
}

@media (prefers-reduced-motion: reduce) {
    .al-progress__bar { animation: none; }
}

.is-reduced-motion .al-progress__bar { animation: none; }