/*
 * Token di design, direzione C "Vivace" (anteprima-design/C-vivace/NOTE.md),
 * allineati ai colori del logo Aelyna® Keys (fondo #0B1020, blu #3A5BFF,
 * verde #14B88A, inchiostro #0E1525). Tema scuro "notte" predefinito; il
 * tema chiaro ridefinisce gli stessi token `--c-*` sotto [data-theme='light'].
 *
 * Regole:
 * - gli stili usano solo questi token: niente colori esadecimali fuori da
 *   questo file (theme.test.ts);
 * - ogni colore usato come testo supera WCAG AA (≥ 4,5:1) su tutti gli
 *   sfondi, ogni colore di categoria sul proprio fondo tenue, il testo dei
 *   pulsanti su ogni punto dei gradienti; focus e stella ≥ 3:1
 *   (theme.test.ts calcola tutte le coppie);
 * - il contorno visibile dei controlli che altrimenti si confondono con la
 *   superficie (pulsanti secondari, Copia, chip-filtro, segmenti,
 *   interruttori rapidi, caselle) supera 3:1 su ogni superficie (WCAG 1.4.11):
 *   `--c-control-line` e `--c-copy-line`;
 * - `--c-grad` (marchio) solo per righe, barre, anelli e bordi, mai sotto il
 *   testo; sotto lettere e icone bianche si usa `--c-grad-deep`.
 * - I fondi tenui di categoria sono opachi (fusi sulla superficie), così il
 *   contrasto si può verificare.
 */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  /* Superfici */
  --c-ink: #0b1020; /* sfondo principale (fondo del logo) */
  --c-side: #0e1428; /* barra laterale */
  --c-panel: #141b34; /* superficie: schede, pannelli, toast */
  --c-raised: #1b2444; /* superficie 2: campi, pulsanti tenui */
  --c-hover: #1f2a4f; /* passaggio del mouse */
  --c-selected: #141b34; /* voce selezionata (superficie + ombra) */
  --c-line: #27315a; /* bordi */
  --c-line-soft: #1e2748; /* separatori interni */
  --c-control-line: #6673a3; /* bordo dei controlli (pulsanti secondari, chip, segmenti): ≥ 3:1 */
  --c-copy-line: #6378e0; /* bordo del pulsante Copia: ≥ 3:1 */
  --c-overlay: rgb(11 16 32 / 0.72);

  /* Testo */
  --c-text: #f1f3fa;
  --c-text-dim: #aab4cd; /* etichette, descrizioni */
  --c-text-faint: #8792b0; /* titoletti in maiuscoletto, contatori */
  --c-accent: #4fdcb3; /* verde pieno: stato positivo, riempimenti */
  --c-accent-text: #4fdcb3; /* verde come testo */
  --c-on-accent: #0b1020; /* testo sopra il verde pieno */
  --c-info: #9aacff; /* blu come testo: collegamenti, informazioni */
  --c-warn: #f5bd62; /* ambra: avvisi */
  --c-warn-bg: #31303a;
  --c-danger: #ff8a80; /* errori, azioni distruttive */
  --c-danger-bg: #372438;
  --c-focus: #9aacff;
  --c-star: #f5bd62; /* stella dei preferiti (icona, ≥ 3:1) */

  /* Colori per tipo di voce: segno chiaro + fondo tenue */
  --c-cat-login: #8ea2ff;
  --c-cat-login-bg: #1c285d;
  --c-cat-note: #f5bd62;
  --c-cat-note-bg: #38353b;
  --c-cat-card: #ff9a85;
  --c-cat-card-bg: #3c2b3c;
  --c-cat-id: #c3a6ff;
  --c-cat-id-bg: #2f2d5b;
  --c-cat-ok: #4fdcb3;
  --c-cat-ok-bg: #143743;

  /* Marchio e gradienti */
  --c-brand-blue: #3a5bff; /* colori fissi del marchio (logo, gradienti) */
  --c-brand-green: #14b88a;
  --c-logo-ink: #ffffff; /* lettere del logo su fondo scuro (logo "negativo") */
  --c-grad: linear-gradient(120deg, #3a5bff 0%, #14b88a 100%);
  --c-grad-deep: linear-gradient(135deg, #3a5bff 0%, #2a6fd6 45%, #0f7f60 100%);
  --c-on-deep: #ffffff; /* testo e icone su --c-grad-deep (≥ 4,8:1) */
  --c-grad-btn: linear-gradient(120deg, #93a6ff 0%, #4fdcb3 100%);
  --c-grad-btn-hover: linear-gradient(120deg, #a9b8ff 0%, #6fe6c3 100%);
  --c-on-grad: #0b1020; /* testo sul pulsante principale (≥ 8,2:1) */
  --c-grad-soft: linear-gradient(120deg, #1b2a5c 0%, #123a44 100%); /* consiglio amichevole */
  --c-paper: #f1f3fa; /* foglio del Kit disegnato in CSS */
  --c-paper-ink: #0b1020;

  /* Bagliori, ombre e trama (sblocco, primo avvio, dettaglio) */
  --c-halo-blue: rgb(58 91 255 / 0.3);
  --c-halo-green: rgb(20 184 138 / 0.24);
  --c-halo-blue-soft: rgb(58 91 255 / 0.2);
  --c-halo-green-soft: rgb(20 184 138 / 0.16);
  --c-dots: rgb(255 255 255 / 0.07);
  --c-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 12px 32px -12px rgb(0 0 0 / 0.55);
  --c-shadow-lg: 0 40px 80px -30px rgb(0 0 0 / 0.7), 0 1px 0 rgb(255 255 255 / 0.05) inset;
  --c-glow: 0 10px 30px -10px rgb(58 91 255 / 0.55);
  --c-glow-strong: 0 14px 30px -12px rgb(58 91 255 / 0.8);
}

:root[data-theme='light'] {
  color-scheme: light;

  --c-ink: #f6f7fc;
  --c-side: #eef1fa;
  --c-panel: #ffffff;
  --c-raised: #f3f5fb;
  --c-hover: #e8ecf8;
  --c-selected: #ffffff;
  --c-line: #d9dfee;
  --c-line-soft: #e6eaf4;
  --c-control-line: #7a849e;
  --c-copy-line: #6479e0;
  --c-overlay: rgb(246 247 252 / 0.8);

  --c-text: #0e1525; /* inchiostro del logo */
  --c-text-dim: #4a5268;
  --c-text-faint: #5d6680;
  --c-accent: #0f7f60; /* verde del marchio scurito: bianco sopra ≥ 4,5:1 */
  --c-accent-text: #0d6f54;
  --c-on-accent: #ffffff;
  --c-info: #2f49d8;
  --c-warn: #8a5a00;
  --c-warn-bg: #fdf3e1;
  --c-danger: #b3261e;
  --c-danger-bg: #fde7e5;
  --c-focus: #2f49d8;
  --c-star: #b07400;

  --c-cat-login: #2f49d8;
  --c-cat-login-bg: #e4e9ff;
  --c-cat-note: #8a5a00;
  --c-cat-note-bg: #fdf0d9;
  --c-cat-card: #b5402c;
  --c-cat-card-bg: #ffe6e0;
  --c-cat-id: #6a3fc6;
  --c-cat-id-bg: #efe7ff;
  --c-cat-ok: #0d6f54;
  --c-cat-ok-bg: #dcf5ec;

  --c-brand-blue: #3a5bff;
  --c-brand-green: #14b88a;
  --c-logo-ink: #0e1525; /* lettere del logo su fondo chiaro */
  --c-grad: linear-gradient(120deg, #3a5bff 0%, #14b88a 100%);
  --c-grad-deep: linear-gradient(135deg, #3a5bff 0%, #2a6fd6 45%, #0f7f60 100%);
  --c-on-deep: #ffffff;
  --c-grad-btn: linear-gradient(120deg, #3a5bff 0%, #1f6fd0 55%, #0f7f60 100%);
  --c-grad-btn-hover: linear-gradient(120deg, #2f4ef0 0%, #1a62bd 55%, #0c7055 100%);
  --c-on-grad: #ffffff;
  --c-grad-soft: linear-gradient(120deg, #eaeeff 0%, #e3f6ef 100%);
  --c-paper: #ffffff;
  --c-paper-ink: #0e1525;

  --c-halo-blue: rgb(58 91 255 / 0.16);
  --c-halo-green: rgb(20 184 138 / 0.14);
  --c-halo-blue-soft: rgb(58 91 255 / 0.12);
  --c-halo-green-soft: rgb(20 184 138 / 0.12);
  --c-dots: rgb(14 21 37 / 0.07);
  --c-shadow: 0 1px 2px rgb(14 21 37 / 0.05), 0 12px 32px -14px rgb(14 21 37 / 0.18);
  --c-shadow-lg: 0 30px 70px -30px rgb(14 21 37 / 0.3), 0 1px 2px rgb(14 21 37 / 0.05);
  --c-glow: 0 10px 26px -10px rgb(58 91 255 / 0.5);
  --c-glow-strong: 0 14px 30px -12px rgb(58 91 255 / 0.55);
}

:root {
  /* Tipografia: IBM Plex Sans 400 testo, 500 etichette, 600 pulsanti e
     voci, 700 titoli; IBM Plex Mono per password, codici e Chiave segreta. */
  --font-sans: 'IBM Plex Sans', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  --fs-display: 32px; /* titolo di schermata (sblocco, primo avvio) */
  --fs-title: 26px; /* titolo del dettaglio */
  --fs-heading: 20px; /* titolo dell'elenco e degli strumenti */
  --fs-subheading: 16px; /* titoli di scheda */
  --fs-body-lg: 15px; /* valori dei campi */
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-label: 12.5px; /* etichette, chip */
  --fs-caps: 11.5px; /* titoletti in maiuscoletto (+0,06em) */
  --tracking-caps: 0.06em;

  /* Raggi: 22 pannelli grandi, 16 schede, 12 controlli, 9 piccoli */
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius: 12px;
  --radius-small: 9px;
  --radius-pill: 999px;

  /* Spaziature */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --target: 40px; /* elementi cliccabili di almeno 40 px (docs/06) */
  --icon-stroke: 1.75;
  --transition: 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}

/* Generato da aelyna-server (web/assets.rs): tema chiaro anche quando il sistema lo chiede e l'utente non ha scelto il tema scuro. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
  color-scheme: light;

  --c-ink: #f6f7fc;
  --c-side: #eef1fa;
  --c-panel: #ffffff;
  --c-raised: #f3f5fb;
  --c-hover: #e8ecf8;
  --c-selected: #ffffff;
  --c-line: #d9dfee;
  --c-line-soft: #e6eaf4;
  --c-control-line: #7a849e;
  --c-copy-line: #6479e0;
  --c-overlay: rgb(246 247 252 / 0.8);

  --c-text: #0e1525; /* inchiostro del logo */
  --c-text-dim: #4a5268;
  --c-text-faint: #5d6680;
  --c-accent: #0f7f60; /* verde del marchio scurito: bianco sopra ≥ 4,5:1 */
  --c-accent-text: #0d6f54;
  --c-on-accent: #ffffff;
  --c-info: #2f49d8;
  --c-warn: #8a5a00;
  --c-warn-bg: #fdf3e1;
  --c-danger: #b3261e;
  --c-danger-bg: #fde7e5;
  --c-focus: #2f49d8;
  --c-star: #b07400;

  --c-cat-login: #2f49d8;
  --c-cat-login-bg: #e4e9ff;
  --c-cat-note: #8a5a00;
  --c-cat-note-bg: #fdf0d9;
  --c-cat-card: #b5402c;
  --c-cat-card-bg: #ffe6e0;
  --c-cat-id: #6a3fc6;
  --c-cat-id-bg: #efe7ff;
  --c-cat-ok: #0d6f54;
  --c-cat-ok-bg: #dcf5ec;

  --c-brand-blue: #3a5bff;
  --c-brand-green: #14b88a;
  --c-logo-ink: #0e1525; /* lettere del logo su fondo chiaro */
  --c-grad: linear-gradient(120deg, #3a5bff 0%, #14b88a 100%);
  --c-grad-deep: linear-gradient(135deg, #3a5bff 0%, #2a6fd6 45%, #0f7f60 100%);
  --c-on-deep: #ffffff;
  --c-grad-btn: linear-gradient(120deg, #3a5bff 0%, #1f6fd0 55%, #0f7f60 100%);
  --c-grad-btn-hover: linear-gradient(120deg, #2f4ef0 0%, #1a62bd 55%, #0c7055 100%);
  --c-on-grad: #ffffff;
  --c-grad-soft: linear-gradient(120deg, #eaeeff 0%, #e3f6ef 100%);
  --c-paper: #ffffff;
  --c-paper-ink: #0e1525;

  --c-halo-blue: rgb(58 91 255 / 0.16);
  --c-halo-green: rgb(20 184 138 / 0.14);
  --c-halo-blue-soft: rgb(58 91 255 / 0.12);
  --c-halo-green-soft: rgb(20 184 138 / 0.12);
  --c-dots: rgb(14 21 37 / 0.07);
  --c-shadow: 0 1px 2px rgb(14 21 37 / 0.05), 0 12px 32px -14px rgb(14 21 37 / 0.18);
  --c-shadow-lg: 0 30px 70px -30px rgb(14 21 37 / 0.3), 0 1px 2px rgb(14 21 37 / 0.05);
  --c-glow: 0 10px 26px -10px rgb(58 91 255 / 0.5);
  --c-glow-strong: 0 14px 30px -12px rgb(58 91 255 / 0.55);
}
}