/* ASR Quiz – design tokens v2.0 "Raso Brooklyn" (docs/DESIGN-V2.md §3)
 *
 * Base SCURA (nero profondo come autoscuolaraso.it). Il chiaro si attiva con
 * data-asr-theme="light" o con "auto" quando il sistema chiede il chiaro.
 *
 * Regola del petrolio (§4.1, vincolante):
 *   #014359 --asr-brand-petrol       SOLO superfici (1.85:1 su #090909: illeggibile come testo)
 *   #3A8BA6 --asr-brand-petrol-line  bordi, barre, grafici (≥3:1 sulle superfici scure)
 *   #6FB0C6 --asr-brand-petrol-light testo, icone, link, focus (≥6.2:1 sulle superfici scure)
 *   sopra il petrolio pieno si scrive solo in bianco (10.78:1).
 */

/* Raleway: variabile 400–800, latin + latin-ext (stesso nome di famiglia, unicode-range). */
@font-face { font-family: "ASR Raleway"; src: url("../fonts/raleway-variable-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "ASR Raleway"; src: url("../fonts/raleway-variable-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Cifre allineate a larghezza fissa (Raleway non ha "tnum"): solo 0-9, il resto ricade su "ASR Raleway". */
@font-face { font-family: "ASR Raleway Tabular"; src: url("../fonts/raleway-tabular-500.woff2") format("woff2"); font-weight: 400 649; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: "ASR Raleway Tabular"; src: url("../fonts/raleway-tabular-700.woff2") format("woff2"); font-weight: 650 749; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: "ASR Raleway Tabular"; src: url("../fonts/raleway-tabular-800.woff2") format("woff2"); font-weight: 750 900; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: "ASR Readable"; src: url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ASR Readable"; src: url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

.asr-scope {
  /* ---------- Marchio (costanti, uguali in tutti i temi) ---------- */
  --asr-brand-petrol: #014359;
  --asr-brand-petrol-hover: #025A75;
  --asr-brand-petrol-line: #3A8BA6;
  --asr-brand-petrol-light: #6FB0C6;
  --asr-brand-petrol-hero: #8CC4D6;
  --asr-brand-ink: #080808;

  /* ---------- Colori – tema SCURO (predefinito) ---------- */
  --asr-color-bg: #090909;
  --asr-color-bg-deep: #080808;
  --asr-color-surface: #141618;
  --asr-color-surface-2: #1B1E21;
  --asr-color-surface-3: #23272B;
  --asr-color-border: #2A2E33;          /* filetti decorativi: MAI unico confine di un controllo */
  --asr-color-border-strong: #6B7177;   /* confini dei controlli (3.67:1 su surface) */
  --asr-color-heading: #FFFFFF;
  --asr-color-text: #E6E6E6;
  --asr-color-text-muted: #A3A3A3;      /* sostituisce il #666 del sito (3.47:1, non AA) */
  --asr-color-primary: var(--asr-brand-petrol);
  --asr-color-primary-hover: var(--asr-brand-petrol-hover);
  --asr-color-primary-line: var(--asr-brand-petrol-line);
  --asr-color-on-primary: #FFFFFF;
  --asr-color-accent: var(--asr-brand-petrol-line);
  --asr-color-accent-text: var(--asr-brand-petrol-light);
  --asr-color-accent-soft: #0C2630;
  --asr-color-link: var(--asr-brand-petrol-light);
  --asr-color-link-hover: #FFFFFF;
  --asr-color-success: #5CC79A;
  --asr-color-success-soft: #0F2A1F;
  --asr-color-danger: #F2A097;
  --asr-color-danger-soft: #2E1715;
  --asr-color-warning: #E8B65A;
  --asr-color-warning-soft: #2B2211;
  --asr-color-info: #8CC4D6;
  --asr-color-info-soft: #0C2630;
  --asr-color-focus: var(--asr-brand-petrol-light);
  --asr-color-overlay: rgba(0, 0, 0, 0.75);
  --asr-color-selection-bg: var(--asr-brand-petrol);
  --asr-color-selection-text: #FFFFFF;
  --asr-color-input-bg: #0E1012;
  --asr-color-media-bg: #FFFFFF;        /* figure dei quesiti sempre su bianco */
  --asr-color-hover-veil: rgba(255, 255, 255, 0.05); /* hover dei pulsanti outline (sito) */
  /* Semaforo prontezza */
  --asr-color-ready-red: var(--asr-color-danger);
  --asr-color-ready-yellow: var(--asr-color-warning);
  --asr-color-ready-green: var(--asr-color-success);
  /* Grafici (ordine fisso delle serie) */
  --asr-chart-1: #6FB0C6;
  --asr-chart-2: #E6E6E6;
  --asr-chart-3: #A3A3A3;
  --asr-chart-4: #5CC79A;
  --asr-chart-grid: #2A2E33;
  --asr-chart-threshold: #F2A097;

  /* Hero e trama */
  --asr-hero-scrim: rgba(8, 8, 8, 0.7);
  --asr-hero-bg: #141618;
  --asr-pattern-diagonal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath fill-opacity='.7' d='M0 0h1v1H0zm1 1h1v1H1zm1 1h1v1H2zm1 1h1v1H3z'/%3E%3Cpath fill-opacity='.35' d='M2 0h1v1H2zm1 1h1v1H3zM0 2h1v1H0zm1 1h1v1H1z'/%3E%3C/svg%3E");

  /* ---------- Tipografia ---------- */
  --asr-font-brand: "ASR Raleway", Raleway, "Helvetica Neue", Arial, system-ui, sans-serif;
  --asr-font-display: var(--asr-font-brand);
  --asr-font-sans: var(--asr-font-brand);
  --asr-font-readable: "ASR Readable", "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
  --asr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --asr-font-body: var(--asr-font-sans);
  --asr-font-numeric: "ASR Raleway Tabular", var(--asr-font-body); /* timer, contatori, tabelle */
  --asr-font-scale: 1;
  --asr-text-xs: calc(0.75rem * var(--asr-font-scale));
  --asr-text-sm: calc(0.875rem * var(--asr-font-scale));
  --asr-text-md: calc(1rem * var(--asr-font-scale));
  --asr-text-lg: calc(1.125rem * var(--asr-font-scale));
  --asr-text-xl: calc(1.25rem * var(--asr-font-scale));
  --asr-text-2xl: calc(1.5rem * var(--asr-font-scale));
  --asr-text-3xl: calc(1.875rem * var(--asr-font-scale));
  --asr-text-4xl: calc(2.25rem * var(--asr-font-scale));
  --asr-text-5xl: calc(3rem * var(--asr-font-scale));
  --asr-text-section: calc(clamp(2rem, 1.35rem + 2.6vw, 3.125rem) * var(--asr-font-scale));
  --asr-text-hero: calc(clamp(2.5rem, 1.2rem + 5.4vw, 5rem) * var(--asr-font-scale));
  --asr-text-lead: calc(clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem) * var(--asr-font-scale));
  --asr-text-label: calc(0.8125rem * var(--asr-font-scale));
  --asr-leading-tight: 1.25;
  --asr-leading-snug: 1.4;
  --asr-leading-normal: 1.7;
  --asr-leading-lead: 1.5;
  --asr-tracking-caps: 0.2em;
  --asr-tracking-label: 0.16em;
  --asr-tracking-wide: 0.25em;
  --asr-tracking-title: 0.01em;
  --asr-transform-display: uppercase;
  --asr-weight-regular: 400;
  --asr-weight-medium: 500;
  --asr-weight-semibold: 600;
  --asr-weight-bold: 700;
  --asr-weight-extrabold: 800;
  --asr-numeric: lining-nums;
  --asr-numeric-tabular: lining-nums tabular-nums;

  /* ---------- Spaziature (base 4px) ---------- */
  --asr-space-0: 0;
  --asr-space-1: 0.25rem;
  --asr-space-2: 0.5rem;
  --asr-space-3: 0.75rem;
  --asr-space-4: 1rem;
  --asr-space-5: 1.5rem;
  --asr-space-6: 2rem;
  --asr-space-7: 3rem;
  --asr-space-8: 4rem;
  --asr-space-9: 6rem;
  --asr-space-10: 7.5rem;
  --asr-section-y: clamp(4.5rem, 3rem + 5vw, 7.5rem);

  /* ---------- Forme ---------- */
  --asr-radius-sm: 0;
  --asr-radius-md: 0;
  --asr-radius-lg: 0;
  --asr-radius-pill: 999px;
  --asr-border-width: 1px;
  --asr-border-btn: 2px;
  --asr-rule-w: 30px;
  --asr-rule-h: 2px;
  --asr-shadow-1: none;
  --asr-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --asr-shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6);

  /* ---------- Layout ---------- */
  --asr-container: 72rem;
  --asr-container-wide: 80rem;
  --asr-container-narrow: 44rem;
  --asr-measure: 68ch;
  --asr-sidebar-w: 18rem;
  --asr-gutter: var(--asr-space-4);
  --asr-header-h: 4rem;
  --asr-header-h-lg: 5rem;
  --asr-nav-w: 15rem;
  --asr-tap-min: 44px;
  --asr-answer-h: 64px;
  --asr-btn-h: 48px;
  --asr-btn-h-lg: 56px;
  --asr-input-h: 48px;

  /* ---------- Movimento ---------- */
  --asr-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --asr-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --asr-ease-reveal: cubic-bezier(0.39, 0.58, 0.57, 1);
  --asr-dur-fast: 200ms;
  --asr-dur-base: 300ms;
  --asr-dur-slow: 450ms;
  --asr-dur-reveal: 600ms;
  --asr-reveal-shift: 24px;

  /* ---------- Focus ---------- */
  --asr-focus-ring: 0 0 0 2px var(--asr-color-bg), 0 0 0 4px var(--asr-color-focus);

  /* ---------- Livelli ---------- */
  --asr-z-header: 100;
  --asr-z-overlay: 900;
  --asr-z-menu: 950;
  --asr-z-modal: 1000;
  --asr-z-toast: 1100;

  color-scheme: dark;
  background: var(--asr-color-bg);
  color: var(--asr-color-text);
  font-family: var(--asr-font-body);
  font-size: var(--asr-text-md);
  font-variant-numeric: var(--asr-numeric);
  line-height: var(--asr-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.asr-scope ::selection { background: var(--asr-color-selection-bg); color: var(--asr-color-selection-text); }

/* ---------- Tema CHIARO esplicito (§3.2) – tenere identico al blocco "auto" sotto ---------- */
.asr-scope[data-asr-theme="light"] {
  --asr-color-bg: #FFFFFF;
  --asr-color-bg-deep: #080808;
  --asr-color-surface: #FFFFFF;
  --asr-color-surface-2: #F4F4F2;
  --asr-color-surface-3: #ECECEA;
  --asr-color-border: #E2E2E0;
  --asr-color-border-strong: #7A7F85;
  --asr-color-heading: #252525;
  --asr-color-text: #333333;
  --asr-color-text-muted: #5E5E5E;
  --asr-color-primary: #014359;
  --asr-color-primary-hover: #01384A;
  --asr-color-primary-line: #014359;
  --asr-color-on-primary: #FFFFFF;
  --asr-color-accent: #014359;
  --asr-color-accent-text: #014359;
  --asr-color-accent-soft: #E3EEF2;
  --asr-color-link: #014359;
  --asr-color-link-hover: #025A75;
  --asr-color-success: #1E6B47;
  --asr-color-success-soft: #E3F1E9;
  --asr-color-danger: #A3262A;
  --asr-color-danger-soft: #F8E4E4;
  --asr-color-warning: #8A5A00;
  --asr-color-warning-soft: #FBF0D9;
  --asr-color-info: #014359;
  --asr-color-info-soft: #E3EEF2;
  --asr-color-focus: #014359;
  --asr-color-overlay: rgba(8, 8, 8, 0.6);
  --asr-color-input-bg: #FFFFFF;
  --asr-color-hover-veil: rgba(8, 8, 8, 0.04);
  --asr-color-ready-yellow: #8A5A00;
  --asr-chart-1: #014359;
  --asr-chart-2: #3A8BA6;
  --asr-chart-3: #7A7F85;
  --asr-chart-4: #1E6B47;
  --asr-chart-grid: #E2E2E0;
  --asr-chart-threshold: #A3262A;
  --asr-shadow-1: 0 1px 2px rgba(8, 8, 8, 0.06);
  --asr-shadow-2: 0 8px 24px rgba(8, 8, 8, 0.10);
  --asr-shadow-3: 0 24px 64px rgba(8, 8, 8, 0.18);
  color-scheme: light;
}

/* ---------- Tema automatico con sistema chiaro: stessi valori del blocco precedente ---------- */
@media (prefers-color-scheme: light) {
  .asr-scope[data-asr-theme="auto"] {
    --asr-color-bg: #FFFFFF;
    --asr-color-bg-deep: #080808;
    --asr-color-surface: #FFFFFF;
    --asr-color-surface-2: #F4F4F2;
    --asr-color-surface-3: #ECECEA;
    --asr-color-border: #E2E2E0;
    --asr-color-border-strong: #7A7F85;
    --asr-color-heading: #252525;
    --asr-color-text: #333333;
    --asr-color-text-muted: #5E5E5E;
    --asr-color-primary: #014359;
    --asr-color-primary-hover: #01384A;
    --asr-color-primary-line: #014359;
    --asr-color-on-primary: #FFFFFF;
    --asr-color-accent: #014359;
    --asr-color-accent-text: #014359;
    --asr-color-accent-soft: #E3EEF2;
    --asr-color-link: #014359;
    --asr-color-link-hover: #025A75;
    --asr-color-success: #1E6B47;
    --asr-color-success-soft: #E3F1E9;
    --asr-color-danger: #A3262A;
    --asr-color-danger-soft: #F8E4E4;
    --asr-color-warning: #8A5A00;
    --asr-color-warning-soft: #FBF0D9;
    --asr-color-info: #014359;
    --asr-color-info-soft: #E3EEF2;
    --asr-color-focus: #014359;
    --asr-color-overlay: rgba(8, 8, 8, 0.6);
    --asr-color-input-bg: #FFFFFF;
    --asr-color-hover-veil: rgba(8, 8, 8, 0.04);
    --asr-color-ready-yellow: #8A5A00;
    --asr-chart-1: #014359;
    --asr-chart-2: #3A8BA6;
    --asr-chart-3: #7A7F85;
    --asr-chart-4: #1E6B47;
    --asr-chart-grid: #E2E2E0;
    --asr-chart-threshold: #A3262A;
    --asr-shadow-1: 0 1px 2px rgba(8, 8, 8, 0.06);
    --asr-shadow-2: 0 8px 24px rgba(8, 8, 8, 0.10);
    --asr-shadow-3: 0 24px 64px rgba(8, 8, 8, 0.18);
    color-scheme: light;
  }
}

/* ---------- Zone sempre scure (header app, barra d'esame, pannello login, hero, footer) ---------- */
.asr-scope .asr-on-dark {
  --asr-color-bg: #080808;
  --asr-color-surface: #141618;
  --asr-color-surface-2: #1B1E21;
  --asr-color-surface-3: #23272B;
  --asr-color-border: #2A2E33;
  --asr-color-heading: #FFFFFF;
  --asr-color-text: #E6E6E6;
  --asr-color-text-muted: #A3A3A3;
  --asr-color-focus: #6FB0C6;
  --asr-color-link: #6FB0C6;
  --asr-color-link-hover: #FFFFFF;
  --asr-color-accent: #3A8BA6;
  --asr-color-accent-text: #6FB0C6;
  --asr-color-accent-soft: #0C2630;
  --asr-color-primary-line: #3A8BA6;
  --asr-color-border-strong: #6B7177;
  --asr-color-hover-veil: rgba(255, 255, 255, 0.05);
  --asr-color-warning: #E8B65A;
  --asr-color-warning-soft: #2B2211;
  --asr-color-danger: #F2A097;
  --asr-color-danger-soft: #2E1715;
  --asr-color-success: #5CC79A;
  color-scheme: dark;
}

/* ---------- Lettura facilitata (DSA) ---------- */
.asr-scope[data-asr-font="readable"] {
  --asr-font-body: var(--asr-font-readable);
  --asr-font-display: var(--asr-font-readable);
  --asr-font-brand: var(--asr-font-readable);
  --asr-font-numeric: var(--asr-font-readable);
  --asr-transform-display: none;
  --asr-tracking-caps: 0.06em;
  --asr-tracking-label: 0.04em;
  --asr-tracking-wide: 0.06em;
  --asr-tracking-title: 0;
  --asr-leading-normal: 1.75;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .asr-scope { --asr-dur-fast: 0ms; --asr-dur-base: 0ms; --asr-dur-slow: 0ms; --asr-dur-reveal: 0ms; --asr-reveal-shift: 0px; }
}

@media (forced-colors: active) {
  .asr-scope { --asr-focus-ring: 0 0 0 3px CanvasText; }
  .asr-scope .asr-btn, .asr-scope .asr-answer, .asr-scope .asr-option, .asr-scope .asr-card { border: 1px solid CanvasText; }
}