@import 'tailwindcss';

@import 'tw-animate-css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@custom-variant dark (&:is(.dark *));

@theme {
    --font-sans:
        'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --color-background: var(--background);
    --color-foreground: var(--foreground);

    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);

    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-warning: var(--warning);
    --color-warning-foreground: var(--warning-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
}

/* ---------------------------------------------------------------------------
 * Palette unica — vedi docs/design-system.md §2 e §2 bis.
 *
 * I colori di marca vivono qui una volta sola, in oklch; l'esadecimale di
 * riferimento è nel commento a fianco. Tutto il resto li referenzia: i token
 * shadcn dell'app (`:root` e `.dark`) e i token `--marketing-*` delle pagine
 * pubbliche. Non scrivere mai un colore letterale altrove.
 * ------------------------------------------------------------------------- */

:root {
    /* Tema chiaro — la carta fredda del sito pubblico. */
    --brand-paper: oklch(0.9703 0.0041 157.18); /* #F3F6F4 */
    --brand-ink: oklch(0.2445 0.023 176.78); /* #142420 */
    --brand-ink-soft: oklch(0.5046 0.0281 170.01); /* #556A62 */
    --brand-surface: oklch(1 0 89.88); /* #FFFFFF */
    --brand-tint: oklch(0.9404 0.0083 157.08); /* #E7EDE9 */
    --brand-tint-strong: oklch(0.9308 0.0133 159.9); /* #E1EBE5 */
    --brand-paper-deep: oklch(0.9465 0.0083 157.09); /* #E9EFEB */
    --brand-paper-deeper: oklch(0.92 0.0159 160.6); /* #DCE8E1 */
    --brand-border: oklch(0.9129 0.0126 164.78); /* #DBE5E0 */
    --brand-border-deep: oklch(0.8747 0.0194 162.87); /* #CBDAD2 */
    --brand-rule: oklch(0.6407 0.0182 162.46); /* #839089 */

    /* Tema scuro — stesse tinte, fondo verde-notte. */
    --brand-night: oklch(0.2056 0.0178 169.92); /* #0F1A16 */
    --brand-night-deep: oklch(0.1847 0.016 173.8); /* #0B1512 */
    --brand-night-card: oklch(0.2422 0.0205 168.78); /* #16231E */
    --brand-night-pop: oklch(0.2648 0.0242 164.1); /* #1A2922 */
    --brand-night-tint: oklch(0.2844 0.025 165.75); /* #1E2E27 */
    --brand-night-tint-strong: oklch(0.3033 0.0267 164.03); /* #22332B */
    --brand-night-tint-2: oklch(0.2803 0.0251 165.7); /* #1D2D26 */
    --brand-night-border: oklch(0.3226 0.0274 161.26); /* #27382F */
    --brand-night-rule: oklch(0.5315 0.0192 167.94); /* #62706A */
    --brand-night-ink-soft: oklch(0.7151 0.0277 168.95); /* #93A9A0 */

    /* Accenti. Il verde è "presente/verificato", l'ambra "in corso", il
       rosso "non conforme". Le varianti `-light` servono solo su fondo
       scuro, dove le scure non reggerebbero il contrasto. */
    --brand-green: oklch(0.4703 0.0926 166.26); /* #0F6B4F */
    --brand-green-hover: oklch(0.4426 0.0859 166.95); /* #0E6249 */
    --brand-green-light: oklch(0.663 0.1082 165.42); /* #46A883 */
    --brand-amber: oklch(0.521 0.1121 64.08); /* #95590F */
    --brand-amber-light: oklch(0.7254 0.131 71.36); /* #D9973C */
    --brand-red: oklch(0.465 0.147 24.94); /* #9B2C2C */
    --brand-red-light: oklch(0.7346 0.1155 23.52); /* #E98B86 */

    /* Otto tinte per distinguere le aule nel calendario e le serie nei
       grafici: stessa chiarezza, tonalità a 45° l'una dall'altra, ≥3:1 su
       entrambi i fondi. Replicate in `Classroom::COLORS`. */
    --brand-hue-1: oklch(0.5797 0.1297 160.71); /* #009160 */
    --brand-hue-2: oklch(0.5906 0.103 212.12); /* #008DA1 */
    --brand-hue-3: oklch(0.5743 0.1345 252.1); /* #347BC5 */
    --brand-hue-4: oklch(0.5749 0.135 296.98); /* #8265BE */
    --brand-hue-5: oklch(0.5754 0.1347 342.04); /* #AD558F */
    --brand-hue-6: oklch(0.5742 0.1349 26.61); /* #BB544C */
    --brand-hue-7: oklch(0.5772 0.1262 68.57); /* #A96900 */
    --brand-hue-8: oklch(0.575 0.1326 117.04); /* #748200 */
}

/* Token shadcn dell'app — tema chiaro.
 *
 * `.marketing-scope` è nello stesso selettore perché le pagine pubbliche sono
 * chiare per scelta (§2): la classe rimette i valori chiari sul proprio
 * sottoalbero, quindi vetrina e componenti shadcn che ci finiscono dentro
 * restano chiari anche quando l'utente ha il tema scuro attivo. */
:root,
.marketing-scope {
    --background: var(--brand-paper);
    --foreground: var(--brand-ink);
    --card: var(--brand-surface);
    --card-foreground: var(--brand-ink);
    --popover: var(--brand-surface);
    --popover-foreground: var(--brand-ink);
    --primary: var(--brand-green);
    --primary-foreground: var(--brand-surface);
    /* `secondary` in shadcn è una superficie quieta (bottone "Annulla",
       badge neutri), non l'accento ambra: quello vive in `--warning`. */
    --secondary: var(--brand-tint);
    --secondary-foreground: var(--brand-ink);
    --muted: var(--brand-tint);
    --muted-foreground: var(--brand-ink-soft);
    --accent: var(--brand-tint-strong);
    --accent-foreground: var(--brand-ink);
    --warning: var(--brand-amber);
    --warning-foreground: var(--brand-surface);
    /* `destructive` fa da riempimento (con testo bianco imposto dalle
       varianti shadcn) e `destructive-foreground` da testo su fondo pagina:
       lo stesso rosso regge entrambi i ruoli in AA. */
    --destructive: var(--brand-red);
    --destructive-foreground: var(--brand-red);
    --border: var(--brand-border);
    --input: var(--brand-rule);
    --ring: var(--brand-green);
    --chart-1: var(--brand-hue-1);
    --chart-2: var(--brand-hue-2);
    --chart-3: var(--brand-hue-3);
    --chart-4: var(--brand-hue-4);
    --chart-5: var(--brand-hue-5);
    --radius: 0.5rem;
    --sidebar: var(--brand-paper-deep);
    --sidebar-foreground: var(--brand-ink);
    --sidebar-primary: var(--brand-green);
    --sidebar-primary-foreground: var(--brand-surface);
    --sidebar-accent: var(--brand-paper-deeper);
    --sidebar-accent-foreground: var(--brand-ink);
    --sidebar-border: var(--brand-border-deep);
    --sidebar-ring: var(--brand-green);
}

/* Tailwind 4 risolve i `--color-*` del blocco `@theme` su `:root`: il valore
 * di `var(--card)` viene sostituito lì e poi ereditato già risolto, quindi
 * ridichiarare solo `--card` più in basso non basterebbe. Qui la stessa
 * indirezione viene rifatta dentro lo scope, dove `--card` e compagni sono
 * già quelli chiari. */
.marketing-scope {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-warning: var(--warning);
    --color-warning-foreground: var(--warning-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
}

/* Token shadcn dell'app — tema scuro. Stessa famiglia di tinte: il fondo è
   un verde-notte, non un grigio, e gli accenti salgono di chiarezza quel
   tanto che basta a restare ≥4.5:1 sul fondo. */
.dark {
    --background: var(--brand-night);
    --foreground: var(--brand-paper);
    --card: var(--brand-night-card);
    --card-foreground: var(--brand-paper);
    --popover: var(--brand-night-pop);
    --popover-foreground: var(--brand-paper);
    --primary: var(--brand-green-light);
    --primary-foreground: var(--brand-night-deep);
    --secondary: var(--brand-night-tint);
    --secondary-foreground: var(--brand-paper);
    --muted: var(--brand-night-tint);
    --muted-foreground: var(--brand-night-ink-soft);
    --accent: var(--brand-night-tint-strong);
    --accent-foreground: var(--brand-paper);
    --warning: var(--brand-amber-light);
    --warning-foreground: var(--brand-night-deep);
    --destructive: var(--brand-red-light);
    --destructive-foreground: var(--brand-red-light);
    --border: var(--brand-night-border);
    --input: var(--brand-night-rule);
    --ring: var(--brand-green-light);
    --chart-1: var(--brand-hue-1);
    --chart-2: var(--brand-hue-2);
    --chart-3: var(--brand-hue-3);
    --chart-4: var(--brand-hue-4);
    --chart-5: var(--brand-hue-5);
    --sidebar: var(--brand-night-deep);
    --sidebar-foreground: var(--brand-paper);
    --sidebar-primary: var(--brand-green-light);
    /* Sulla piastrella del marchio, che è di tratto, l'inchiostro deve
       essere scuro: verde pieno sotto, notte sopra. */
    --sidebar-primary-foreground: var(--brand-night-deep);
    --sidebar-accent: var(--brand-night-tint-2);
    --sidebar-accent-foreground: var(--brand-paper);
    --sidebar-border: var(--brand-night-border);
    --sidebar-ring: var(--brand-green-light);
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }
}

/* ---------------------------------------------------------------------------
 * Marketing (pagine pubbliche: /, /prezzi, /privacy, /termini).
 *
 * Non è più una palette a parte: i token `--marketing-*` sono alias dei
 * `--brand-*`, cioè degli stessi valori che alimentano l'app. Restano come
 * nomi perché le pagine pubbliche parlano di ruoli propri (superficie,
 * segnale, inchiostro) e perché restano volutamente solo chiare — per
 * questo puntano ai valori del tema chiaro anche sotto `.dark`.
 * Vedi docs/design-system.md §2 bis.
 * ------------------------------------------------------------------------- */

:root {
    --marketing-bg: var(--brand-paper);
    --marketing-ink: var(--brand-ink);
    --marketing-primary: var(--brand-green);
    --marketing-primary-hover: var(--brand-green-hover);
    --marketing-primary-foreground: var(--brand-surface);
    --marketing-secondary: var(--brand-amber);
    --marketing-secondary-foreground: var(--brand-surface);
    --marketing-surface: var(--brand-surface);
    --marketing-border: var(--brand-border);
    --marketing-signal: var(--brand-red);
    --marketing-signal-foreground: var(--brand-surface);
    --marketing-radius: 0.5rem;
    --marketing-radius-sm: 0.25rem;
}

@theme {
    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-mono-data:
        'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --color-marketing-bg: var(--marketing-bg);
    --color-marketing-ink: var(--marketing-ink);
    --color-marketing-primary: var(--marketing-primary);
    --color-marketing-primary-hover: var(--marketing-primary-hover);
    --color-marketing-primary-foreground: var(--marketing-primary-foreground);
    --color-marketing-secondary: var(--marketing-secondary);
    --color-marketing-secondary-foreground: var(
        --marketing-secondary-foreground
    );
    --color-marketing-surface: var(--marketing-surface);
    --color-marketing-border: var(--marketing-border);
    --color-marketing-signal: var(--marketing-signal);
    --color-marketing-signal-foreground: var(--marketing-signal-foreground);

    --radius-marketing: var(--marketing-radius);
    --radius-marketing-sm: var(--marketing-radius-sm);
}

@keyframes marketing-ping-once {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

@layer utilities {
    /* Il pallino "in aula" pulsa una volta sola, poi resta fermo (§6). */
    .marketing-ping-once {
        animation: marketing-ping-once 900ms ease-out 1 both;
    }

    /* Cifre del registro e dei prezzi: mono tabulare (§3). */
    .marketing-data {
        font-family: var(--font-mono-data);
        font-variant-numeric: tabular-nums;
        font-weight: 500;
    }
}