/* Computer · Design token.
   Unico punto in cui stanno i valori: colori, tipografia, spaziature, raggi, ombre, livelli, tempi.
   Per cambiare il brand si modifica solo questo file. */

/* Le quattro tinte d'accento sono registrate come <color> per poterle animare (passaggio all'allarme rosso). */
@property --color-amber { syntax:'<color>'; inherits:true; initial-value:#ff9c4a; }
@property --color-peach { syntax:'<color>'; inherits:true; initial-value:#e07a8f; }
@property --color-lilac { syntax:'<color>'; inherits:true; initial-value:#a99be0; }
@property --color-blue  { syntax:'<color>'; inherits:true; initial-value:#8fb6f2; }
@property --elbow-color { syntax:'<color>'; inherits:true; initial-value:#ff9c4a; }   /* gomito della testata: animabile */

:root {
  color-scheme: dark;

  /* ==========================================================================
     1 · PALETTE DI BASE — l'unico punto in cui si scelgono i colori. Combinazione: TNG classica + Grafite.
     Tutti i colori dell'interfaccia qui sotto sono ricavati da questi con color-mix().
     ========================================================================== */
  /* Accenti */
  --base-amber: #ff9c4a;
  --base-peach: #e07a8f;
  --base-lilac: #a99be0;
  --base-blue: #8fb6f2;
  --base-steel: #5f82c4;
  --base-plum: #4a3552;
  /* Allarme */
  --base-red: #ff6b6b;
  --base-green: #86cdb2;   /* solo stati «attivo / pronto» (sensori di Territorio): verde-acqua, più vicino ai toni LCARS */
  --base-yellow: #ffd76a;  /* solo sole alto nella barra del sole */
  /* Neutri grafite (grigio puro), dal più scuro (sfondo) al più chiaro */
  --base-neutral-950: #0a0a0a;
  --base-neutral-900: #131313;
  --base-neutral-800: #1c1c1c;
  --base-neutral-700: #262626;
  --base-neutral-600: #343434;
  --base-neutral-500: #5b5b5b;
  --base-neutral-400: #828282;
  --base-neutral-300: #a3a3a3;
  --base-neutral-200: #cacaca;
  --base-neutral-100: #e0e0e0;
  /* Carta: il bianco del testo principale */
  --base-paper: #eeeeee;
  /* Assoluti */
  --base-white: #fff;
  --base-black: #000;

  /* ==========================================================================
     2 · COLORI DELL'INTERFACCIA — ricavati dalla base. Non scrivere valori qui.
     ========================================================================== */
  /* ---------- Accenti ---------- */
  --color-amber: var(--base-amber);
  --color-peach: var(--base-peach);
  --color-lilac: var(--base-lilac);
  --color-blue: var(--base-blue);
  --color-steel: var(--base-steel);
  --color-plum: var(--base-plum);
  --color-green: var(--base-green);
  --color-yellow: var(--base-yellow);
  /* Categorie dei waypoint (scripts/waypoint.js): un colore ciascuna, tutti leggibili sul fondo del radar. */
  --color-wp-bar: var(--base-peach);
  --color-wp-ristorante: var(--base-amber);
  --color-wp-albergo: var(--base-lilac);
  --color-wp-rifugio: #c98ad6;
  --color-wp-casa: var(--base-paper);
  --color-wp-parcheggio: var(--base-blue);
  --color-wp-stazione: var(--base-steel);
  --color-wp-negozio: var(--base-yellow);
  --color-wp-farmacia: #6fd3d8;
  --color-wp-panorama: var(--base-green);
  --color-wp-vetta: #b8d27a;
  --color-wp-altro: var(--base-neutral-300);

  /* Allarme rosso: ogni tinta mescolata al rosso (sostituiscono le tinte sullo schermo) */
  --color-alert-amber: color-mix(in srgb, var(--base-amber) 22%, var(--base-red));   /* allarme rosso: quasi tutto rosso, con sfumature diverse */
  --color-alert-peach: color-mix(in srgb, var(--base-peach) 30%, var(--base-red));
  --color-alert-lilac: color-mix(in srgb, var(--base-lilac) 25%, var(--base-red));
  --color-alert-blue: color-mix(in srgb, var(--base-blue) 25%, var(--base-red));

  /* ---------- Superfici ---------- */
  --color-screen: var(--base-neutral-950);
  --color-panel: var(--base-neutral-900);
  --color-surface-violet: color-mix(in srgb, var(--base-lilac) 8%, var(--base-neutral-950));
  --color-surface-tab: color-mix(in srgb, var(--base-lilac) 5%, var(--base-neutral-900));
  --color-surface-toast: color-mix(in srgb, var(--base-blue) 6%, var(--base-neutral-800));

  /* ---------- Testo ---------- */
  --color-ink: var(--base-paper);
  --color-ink-soft: var(--base-neutral-100);
  --color-text-2: var(--base-neutral-300);
  --color-text-3: var(--base-neutral-300);
  --color-muted: var(--base-neutral-300);
  --color-faint: var(--base-neutral-400);   /* testo piccolo secondario: ≥ 4,5:1 su schermo e pannelli */
  --color-lilac-soft: color-mix(in srgb, var(--base-lilac) 50%, var(--base-paper));
  --color-placeholder: color-mix(in srgb, var(--base-lilac) 25%, var(--base-neutral-400));

  /* Testo scuro sopra le tinte */
  --color-on-amber: color-mix(in srgb, var(--base-amber) 12%, var(--base-black));
  --color-on-amber-soft: color-mix(in srgb, var(--base-amber) 30%, var(--base-black));
  --color-on-amber-mute: color-mix(in srgb, var(--base-amber) 28%, var(--base-black));
  --color-on-lilac: color-mix(in srgb, var(--base-lilac) 15%, var(--base-black));
  --color-on-blue-soft: color-mix(in srgb, var(--base-blue) 28%, var(--base-black));

  /* ---------- Linee e bordi ---------- */
  --color-line: var(--base-neutral-700);
  --color-line-2: var(--base-neutral-600);
  --color-steel-line: color-mix(in srgb, var(--base-blue) 30%, var(--base-neutral-600));
  --color-lilac-line: color-mix(in srgb, var(--base-lilac) 50%, var(--base-neutral-600));
  --color-divider-amber: color-mix(in srgb, var(--color-on-amber-soft) 40%, transparent);

  /* ---------- Allarme · interfaccia ---------- */
  --color-alert-bg: color-mix(in srgb, var(--base-red) 16%, var(--base-neutral-950));
  --color-alert-text: color-mix(in srgb, var(--base-red) 70%, var(--base-paper));
  --color-alert-line: color-mix(in srgb, var(--base-red) 33%, transparent);
  --color-alert-button-bg: color-mix(in srgb, var(--base-red) 28%, var(--base-neutral-950));
  --color-alert-button-line: color-mix(in srgb, var(--base-red) 65%, var(--base-neutral-950));
  --color-alert-button-text: color-mix(in srgb, var(--base-red) 45%, var(--base-paper));
  --color-alert-glow: color-mix(in srgb, var(--base-red) 16%, transparent);

  /* ---------- Vetro, ombre, aloni ---------- */
  /* Grafici: coppia validata (skill dataviz, fondo scuro: banda L, croma, CVD, contrasto); stato critico riservato */
  --color-chart-primary: #5f8fe0;
  --color-chart-primary-hi: var(--base-blue);
  --color-chart-secondary: #cf7426;
  --color-chart-critical: var(--base-red);
  --color-chart-track: var(--base-neutral-700);

  /* Console da telescrivente: un colore per tono (scripts/console.js) */
  --color-console-bg: color-mix(in srgb, var(--base-blue) 7%, var(--base-neutral-950));   /* schermo incassato della console */
  --color-console-testo: var(--base-neutral-100);
  --color-console-tenue: var(--base-neutral-400);
  --color-console-prompt: var(--base-amber);
  --color-console-titolo: var(--base-amber);
  --color-console-etichetta: var(--color-lilac-soft);
  --color-console-valore: var(--base-paper);
  --color-console-numero: color-mix(in srgb, var(--base-blue) 70%, var(--base-paper));
  --color-console-ok: var(--base-blue);
  --color-console-avviso: color-mix(in srgb, var(--base-amber) 75%, var(--base-paper));
  --color-console-errore: var(--color-alert-text);
  --color-console-accento: var(--base-peach);
  --console-glow: color-mix(in srgb, var(--base-blue) 22%, transparent);

  --color-white: var(--base-white);
  --color-black: var(--base-black);
  --color-white-hi: color-mix(in srgb, var(--base-white) 30%, transparent);
  --glass-line: color-mix(in srgb, var(--base-white) 8%, transparent);
  --glass: linear-gradient(155deg, color-mix(in srgb, var(--base-white) 5.5%, transparent), color-mix(in srgb, var(--base-white) 1.2%, transparent) 55%, color-mix(in srgb, var(--base-white) 2%, transparent));
  --glass-hi: inset 0 1px 0 color-mix(in srgb, var(--base-white) 7%, transparent);
  --lift: 0 14px 30px -18px color-mix(in srgb, var(--base-black) 85%, transparent);
  --shadow-toast: 0 12px 40px color-mix(in srgb, var(--base-black) 73%, transparent);
  --shadow-vignette: inset 0 0 40px color-mix(in srgb, var(--base-black) 35%, transparent);

  /* ==========================================================================
     3 · FUORI DALLA PALETTE — vetrina desktop (cornice iPhone, didascalie).
     Valori propri: non fanno parte del sistema dell'interfaccia.
     ========================================================================== */
  /* ---------- Cornice del dispositivo (solo desktop) ---------- */
  --frame-metal: linear-gradient(115deg, #7d7e80 0%, #34383d 7%, #121518 24%, #15181d 80%, #555a60 93%, #9a9693 100%);
  --frame-shadow: 0 0 0 1px #070809, 0 0 0 2px rgba(87, 91, 97, .35), inset 0 0 0 1px rgba(180, 187, 198, .3), inset 0 0 3px 2px #000, 0 42px 95px -22px rgba(0, 0, 0, .87), 0 5px 15px rgba(0, 0, 0, .73);
  --frame-inner-edge: rgba(192, 194, 198, .2);
  --frame-key: linear-gradient(90deg, #161a20, #555960);
  --frame-key-shade: #42464a;
  --frame-camera: radial-gradient(circle at 38% 32%, #182236, #07090d 63%);
  --color-status-ink: #e6e3e0;
  --color-status-battery: #aaa;
  --color-home-bar: #dfdcd6;
  --stage-glow: radial-gradient(ellipse 34% 48% at 48% 42%, rgba(38, 48, 59, .23), transparent 100%), radial-gradient(ellipse 45% 60% at 54% 56%, rgba(77, 56, 37, .08), transparent 100%);
  --stage-dots: rgba(109, 122, 134, .18);
  --stage-orbit: rgba(114, 137, 165, .05);
  --stage-orbit-warm: rgba(226, 181, 132, .035);
  --color-stage-text: #a3a6af;
  --color-stage-caption: #7c738a;

  /* ---------- Tipografia (self-host in fonts/) ----------
     Deroga motivata ai font house: il condensato Antonio è l'identità del design. */
  --font-display: 'Antonio', 'Arial Narrow', sans-serif;
  /* LCARS usa un solo carattere condensato: testo e dati vanno in Antonio come i titoli (prima Saira e IBM Plex Mono). */
  --font-sans: 'Antonio', 'Arial Narrow', sans-serif;
  --font-mono: 'Antonio', 'Arial Narrow', sans-serif;
  /* Moltiplicatore dei titoli e dei numeri grandi: i font condensati ne richiedono uno più alto. */
  --display-scale: 1.17;

  /* Leggibilità al sole e da lontano: nessun testo d'informazione sotto gli 11px (Beta 2.1). I gradini piccoli restano
     come nomi per non toccare i componenti; --text-3xs vale solo per i codici decorativi delle cornici. */
  --text-3xs: .5625rem;   /*  9px: solo codici decorativi (cornice della console) */
  --text-2xs: .6875rem;   /* 11px */
  --text-xs: .6875rem;    /* 11px */
  --text-sm: .6875rem;    /* 11px */
  --text-md: .6875rem;    /* 11px */
  --text-base: .75rem;    /* 12px */
  --text-lg: .8125rem;    /* 13px */
  --text-xl: .875rem;     /* 14px */
  --text-2xl: 1rem;       /* 16px */
  --text-title: 2.25rem;  /* 36px: titolo della sezione */

  --tracking-label: .12em;
  --tracking-wide: .08em;

  /* ---------- Spaziature ---------- */
  --space-0-5: .125rem;   /*  2px */
  --space-1: .25rem;      /*  4px */
  --space-1-5: .375rem;   /*  6px */
  --space-2: .5rem;       /*  8px */
  --space-2-5: .625rem;   /* 10px */
  --space-3: .75rem;      /* 12px */
  --space-3-5: .875rem;   /* 14px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */

  /* ---------- Raggi ---------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 17px;
  --radius-round: 50%;
  --radius-pill: 999px;                  /* pillole a estremi tondi (strumenti di navigazione) */
  --radius-button: 12px 4px 12px 4px;     /* forma asimmetrica dei pulsanti */
  --radius-tab: 12px 6px 12px 6px;

  /* ---------- Misure ricorrenti ---------- */
  --touch: 44px;          /* area minima di tocco */
  --control: 36px;        /* altezza visibile dei pulsanti compatti */
  --hit-extend: calc((var(--touch) - var(--control)) / 2);   /* area di tocco invisibile oltre il bordo: arriva a 44px */
  --control-tall: var(--touch);    /* pulsante principale della pagina di accesso */
  --control-dock: var(--control);  /* comandi del footer: parla, tastiera, campo di testo */
  --rail-item: 40px;      /* voci del menu laterale */
  --rail-width: 10px;
  --elbow-width: 23px;
  --rail-menu-width: min(232px, 72vw);   /* larghezza del menu aperto */
  --console-height: 196px;               /* console del footer: altezza fissa (un report di ~10 righe senza scorrere) */
  --console-height-compact: 128px;       /* massimo su telefoni bassi */

  /* ---------- Livelli ---------- */
  --z-behind: -1;
  --z-backdrop: -2;
  --z-overlay: 10;
  --z-menu: 15;
  --z-toast: 20;

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.25, .4, 1);
  --dur-fast: .16s;
  --dur-base: .2s;
  --dur-color: .7s;

  /* ---------- Breakpoint ----------
     Target: solo iPhone 14 Pro e successivi, in verticale (393–440 × 852–956 px CSS).
     Le media query non accettano var(): i valori sono ripetuti nei file CSS e documentati qui.
     --bp-frame: 700px     da qui, con il mouse, l'anteprima desktop mostra la cornice iPhone
     --bp-short: 740px     Safari con le barre visibili (app non installata) */
  --bp-frame: 700px;
}

/* ==========================================================================
   4 · COMBINAZIONI DI PROVA — palette di base alternative, scelte dal pannello
   «Prova combinazioni» della vetrina desktop (js/palette.js). Accenti e neutri si
   combinano liberamente. La combinazione definitiva va copiata nella sezione 1.
   ========================================================================== */
:root[data-accenti="originale"] {
  --base-amber: #f4bb80; --base-peach: #e6a286; --base-lilac: #b8a9dd; --base-blue: #98bdde;
  --base-steel: #66849f; --base-plum: #393344; --base-red: #ff8f86;
}
:root[data-accenti="voyager"] {
  --base-amber: #f0b874; --base-peach: #d39478; --base-lilac: #9aa5e6; --base-blue: #74b8ec;
  --base-steel: #4c7bb0; --base-plum: #2b3452; --base-red: #ff8080;
}
:root[data-accenti="infermeria"] {
  --base-amber: #a8dcc6; --base-peach: #e3bf94; --base-lilac: #b3c1ea; --base-blue: #86cfdf;
  --base-steel: #4f8f99; --base-plum: #2f4448; --base-red: #ff8f86;
}
:root[data-accenti="notte"] {
  --base-amber: #e8a070; --base-peach: #c9776c; --base-lilac: #a88db5; --base-blue: #8aa6c4;
  --base-steel: #5a6b80; --base-plum: #362a33; --base-red: #ff7a6b;
}
:root[data-accenti="ambra"] {
  --base-amber: #f4bb80; --base-peach: #e8a66a; --base-lilac: #d9b48a; --base-blue: #c9a27a;
  --base-steel: #8a6f55; --base-plum: #3d3226; --base-red: #ff8f86;
}

:root[data-neutri="fredda"] {
  --base-neutral-950: #080b0e; --base-neutral-900: #10151b; --base-neutral-800: #1a1f27; --base-neutral-700: #252a33;
  --base-neutral-600: #333844; --base-neutral-500: #5a6370; --base-neutral-400: #7f8995; --base-neutral-300: #a0a8b4;
  --base-neutral-200: #c9ced6; --base-neutral-100: #dfe1e4; --base-paper: #ede9e4;
}
:root[data-neutri="calda"] {
  --base-neutral-950: #0d0b09; --base-neutral-900: #17140f; --base-neutral-800: #211d18; --base-neutral-700: #2e2923;
  --base-neutral-600: #3d372f; --base-neutral-500: #655d52; --base-neutral-400: #8a8174; --base-neutral-300: #aba294;
  --base-neutral-200: #cfc8bd; --base-neutral-100: #e4ded5; --base-paper: #f1e9dc;
}
:root[data-neutri="notte"] {
  --base-neutral-950: #060a12; --base-neutral-900: #0c1320; --base-neutral-800: #141d2d; --base-neutral-700: #1d283b;
  --base-neutral-600: #2a364b; --base-neutral-500: #4c5a73; --base-neutral-400: #75839b; --base-neutral-300: #9aa7bd;
  --base-neutral-200: #c3cddc; --base-neutral-100: #dce3ee; --base-paper: #eae8f0;
}