/* ============================================================================
   InsightLearn Design System — Tokens (Fase 3 Week 1, 2026-04-21)

   Tokens in OKLCH per stabilita' percettiva cross-display e dark mode coerente.
   OKLCH e' supportato da tutti i browser moderni (Chrome 111+, Safari 15.4+,
   Firefox 113+). Fallback automatico ai RGB equivalenti dove non supportato.

   REGOLA: nessun valore di colore hardcoded nei componenti. Sempre via var().
   ============================================================================ */

:root {
    /* === BRAND (scale L 10-95, C 0.18, H 260 = blu InsightLearn) ============ */
    --color-brand-50:  oklch(95% 0.02 260);
    --color-brand-100: oklch(90% 0.04 260);
    --color-brand-200: oklch(82% 0.08 260);
    --color-brand-300: oklch(74% 0.12 260);
    --color-brand-400: oklch(68% 0.15 260);
    --color-brand-500: oklch(62% 0.18 260);  /* primary */
    --color-brand-600: oklch(54% 0.17 260);
    --color-brand-700: oklch(44% 0.14 260);
    --color-brand-800: oklch(34% 0.11 260);
    --color-brand-900: oklch(25% 0.08 260);

    /* === ACCENT (ambra, CTA) =============================================== */
    --color-accent-300: oklch(86% 0.13 50);
    --color-accent-500: oklch(78% 0.17 50);   /* default accent */
    --color-accent-700: oklch(58% 0.14 50);

    /* === NEUTRAL (grigi con tinta blu sottile per coerenza) ================ */
    --color-neutral-0:   oklch(99% 0 0);
    --color-neutral-50:  oklch(97% 0.005 260);
    --color-neutral-100: oklch(94% 0.01 260);
    --color-neutral-200: oklch(88% 0.01 260);
    --color-neutral-300: oklch(78% 0.012 260);
    --color-neutral-400: oklch(64% 0.015 260);
    --color-neutral-500: oklch(52% 0.015 260);
    --color-neutral-600: oklch(42% 0.015 260);
    --color-neutral-700: oklch(32% 0.015 260);
    --color-neutral-800: oklch(22% 0.012 260);
    --color-neutral-900: oklch(14% 0.01 260);
    --color-neutral-950: oklch(8% 0.005 260);

    /* === SEMANTIC (assegnati ai token neutral/brand, mai hardcoded) ======== */
    --color-surface-0:     var(--color-neutral-0);     /* page bg */
    --color-surface-1:     var(--color-neutral-50);    /* card */
    --color-surface-2:     var(--color-neutral-100);   /* card hover */
    --color-surface-inverse: var(--color-neutral-900);

    --color-text-primary:   var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-600);
    --color-text-disabled:  var(--color-neutral-400);
    --color-text-on-brand:  var(--color-neutral-0);

    --color-border-subtle:  var(--color-neutral-200);
    --color-border-default: var(--color-neutral-300);
    --color-border-strong:  var(--color-neutral-500);

    --color-focus-ring:     var(--color-brand-500);

    --color-success: oklch(62% 0.16 145);
    --color-warning: oklch(72% 0.17 75);
    --color-danger:  oklch(58% 0.22 25);
    --color-info:    var(--color-brand-500);

    /* === SPACING (scala 4/8/12/16/24/32/48/64/96) ========================== */
    --space-1:  0.25rem;  /*  4 */
    --space-2:  0.5rem;   /*  8 */
    --space-3:  0.75rem;  /* 12 */
    --space-4:  1rem;     /* 16 */
    --space-6:  1.5rem;   /* 24 */
    --space-8:  2rem;     /* 32 */
    --space-12: 3rem;     /* 48 */
    --space-16: 4rem;     /* 64 */
    --space-24: 6rem;     /* 96 */

    /* === RADIUS =========================================================== */
    --radius-sm:    0.25rem;  /*  4 */
    --radius-md:    0.5rem;   /*  8 — card */
    --radius-lg:    0.75rem;  /* 12 — modal */
    --radius-xl:    1.5rem;   /* 24 — hero */
    --radius-pill:  999px;

    /* === TIPOGRAFIA (font Inter Variable, scala modular 1.25) ============== */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: var(--font-sans);  /* placeholder: sostituire con Fraunces se approvato dal brand */
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;

    --text-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.875rem);
    --text-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
    --text-base: clamp(1rem,     0.96rem + 0.2vw,  1.125rem);
    --text-lg:   clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
    --text-xl:   clamp(1.25rem,  1.2rem  + 0.25vw, 1.5rem);
    --text-2xl:  clamp(1.5rem,   1.4rem  + 0.5vw,  2rem);
    --text-3xl:  clamp(2rem,     1.8rem  + 1vw,    3rem);
    --text-4xl:  clamp(2.5rem,   2.2rem  + 1.5vw, 4rem);   /* hero */
    --text-5xl:  clamp(3rem,     2.5rem  + 2.5vw, 6rem);   /* mega hero */

    --leading-tight:  1.15;
    --leading-normal: 1.5;
    --leading-loose:  1.75;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.02em;

    /* === MOTION =========================================================== */
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);    /* default */
    --ease-out-back:     cubic-bezier(0.34, 1.56, 0.64, 1); /* entrate giocose */
    --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);     /* uscite nette */
    --ease-linear:       linear;

    --duration-instant:   80ms;
    --duration-fast:     160ms;
    --duration-normal:   280ms;
    --duration-slow:     500ms;
    --duration-cinematic: 900ms;  /* solo hero con reduced-motion OFF */

    /* === ELEVATION (ombre morbide, niente hard shadow nero) ================ */
    /* Shadow in rgb() per compatibilita' universale: box-shadow con oklch()
       non e' supportato in Firefox < 113 e Safari < 15.4 e verrebbe ignorato
       silenziosamente. rgb() zero-cost, identico visivamente. */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 1px rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 8px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 12px 24px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 24px 48px rgb(0 0 0 / 0.12), 0 8px 16px rgb(0 0 0 / 0.14);

    /* === BREAKPOINTS (per @container queries e JS) ========================= */
    --bp-sm:  30rem;    /* 480px */
    --bp-md:  48rem;    /* 768px */
    --bp-lg:  64rem;    /* 1024px */
    --bp-xl:  80rem;    /* 1280px */
    --bp-2xl: 100rem;   /* 1600px */

    /* === Z-INDEX (scala semantica, no valori arbitrari) ==================== */
    --z-base:      0;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-popover:   500;
    --z-toast:     600;
    --z-tooltip:   700;
}

/* === DARK MODE (auto via prefers-color-scheme, toggle-able via [data-theme]) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-surface-0:     var(--color-neutral-950);
        --color-surface-1:     var(--color-neutral-900);
        --color-surface-2:     var(--color-neutral-800);
        --color-surface-inverse: var(--color-neutral-0);

        --color-text-primary:   var(--color-neutral-50);
        --color-text-secondary: var(--color-neutral-300);
        --color-text-disabled:  var(--color-neutral-600);

        --color-border-subtle:  var(--color-neutral-800);
        --color-border-default: var(--color-neutral-700);
        --color-border-strong:  var(--color-neutral-500);

        /* Brand in dark: spostato +10 L per contrasto su sfondi scuri */
        --color-brand-500: oklch(72% 0.18 260);

        /* Focus ring e stati semantici tarati per WCAG AA su sfondi scuri */
        --color-focus-ring: oklch(82% 0.18 260);
        --color-success:    oklch(72% 0.16 145);
        --color-warning:    oklch(80% 0.17 75);
        --color-danger:     oklch(68% 0.22 25);
    }
}

:root[data-theme="dark"] {
    --color-surface-0:     var(--color-neutral-950);
    --color-surface-1:     var(--color-neutral-900);
    --color-surface-2:     var(--color-neutral-800);
    --color-surface-inverse: var(--color-neutral-0);

    --color-text-primary:   var(--color-neutral-50);
    --color-text-secondary: var(--color-neutral-300);
    --color-text-disabled:  var(--color-neutral-600);

    --color-border-subtle:  var(--color-neutral-800);
    --color-border-default: var(--color-neutral-700);
    --color-border-strong:  var(--color-neutral-500);

    --color-brand-500:  oklch(72% 0.18 260);
    --color-focus-ring: oklch(82% 0.18 260);
    --color-success:    oklch(72% 0.16 145);
    --color-warning:    oklch(80% 0.17 75);
    --color-danger:     oklch(68% 0.22 25);
}