/* ============================================================
   VENDORA SUITE 2.0 · DESIGN TOKENS — "Porcelain & Ember"
   Fable 5 · unica fonte di verità per shell + tutti i tool.
   Light-first, dark completo. Nessun colore raw nei componenti:
   solo questi token.
   ============================================================ */

/* ---------- FONT ---------- */
@font-face{font-family:"Switzer";src:url("../fonts/switzer-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/switzer-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/switzer-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/switzer-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url("../fonts/cabinet-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url("../fonts/cabinet-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url("../fonts/cabinet-grotesk-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* ---------- BRAND (arancione Vendora ufficiale #FF4F01) ---------- */
  --v-brand:#FF4F01;            /* arancione Vendora — accento unico (bianco su brand 3.3: ok per UI/testo grassetto) */
  --v-brand-hover:#EA4700;
  --v-brand-press:#CC3E00;
  --v-brand-soft:#FFECE3;       /* wash caldo per stati attivi/selezioni */
  --v-brand-deep:#A83200;       /* testo/link brand su superfici chiare o soft (6.7 su bianco, 5.9 su soft) */
  --v-brand-ring:0 0 0 4px rgba(255,79,1,.16);
  --v-on-brand:#FFFFFF;
  /* Azioni con testo: piu scuro del brand vivo per contrasto AA. */
  --v-action:#B83A00;
  --v-action-hover:#A83200;
  --v-action-press:#922B00;
  --v-on-action:#FFFFFF;

  /* ---------- SUPERFICI (porcellana calda) ---------- */
  --v-canvas:#F6F6F4;
  --v-surface:#FFFFFF;
  --v-surface-2:#F1F1EE;        /* pozzetti, track, hover */
  --v-surface-3:#E9E9E5;        /* bezel esterno, pressed */
  --v-veil:rgba(26,29,35,.44);  /* scrim modali */
  --v-inverse:#1B1E24;          /* testate scure con identita' forte */
  --v-on-inverse:#FFFFFF;
  --v-inverse-muted:#9CA2A9;

  /* ---------- LINEE ---------- */
  --v-line:#E8E7E3;
  --v-line-strong:#D9D8D3;

  /* ---------- INCHIOSTRO ---------- */
  --v-text:#1B1E24;
  --v-text-2:#4A4F57;           /* secondario leggibile */
  --v-muted:#6B7178;
  --v-muted-2:#9CA2A9;

  /* ---------- CARTA EMAIL (superficie SEMPRE chiara, NON ridefinita in dark) ----------
     Le preview delle mail devono restare bianche come in Gmail anche col tema scuro,
     altrimenti il logo nero sparisce. Sono alias STABILI: copiano i valori della sezione
     light qui sopra, quindi nessun colore nuovo, solo un set che il dark NON ribalta. */
  --v-mail-paper:#FFFFFF;   /* = --v-surface (light) */
  --v-mail-panel:#F1F1EE;   /* = --v-surface-2 (light): oggetto/allegato */
  --v-mail-ink:#1B1E24;     /* = --v-text (light) */
  --v-mail-ink-2:#4A4F57;   /* = --v-text-2 (light): corpo */
  --v-mail-muted:#6B7178;   /* = --v-muted (light) */
  --v-mail-muted-2:#9CA2A9; /* = --v-muted-2 (light): disclaimer */
  --v-mail-line:#E8E7E3;    /* = --v-line (light) */

  /* ---------- URGENZA FORTE (fondo pieno, costante nei due temi) ----------
     Per far URLARE i dati critici serve un rosso pieno con testo bianco leggibile.
     Il --v-red del dark è schiarito (#F06A6A) e sotto AA col bianco: qui uso valori
     COSTANTI (rosso scuro della light + bianco), già presenti, mai ribaltati dal dark.
     Bianco su #D93B3B = 4.53:1 (AA testo normale, e i numeri sono in bold). */
  --v-danger-solid:#D93B3B; /* = --v-red (light) */
  --v-on-danger:#FFFFFF;

  /* ---------- ALLERTA FORTE (gemello giallo del rosso pieno) ----------
     Stessa logica del danger-solid: fondo PIENO costante nei due temi, perché i
     "soft" (--v-amber-soft #FBF3E2 in light, alpha .13 in dark) sono fondi da badge
     e su una riga intera diventano sabbia in light e invisibili in dark.
     Giallo saturo: stacca per CROMA, non per luminanza, quindi vuole inchiostro scuro.
     #1B1E24 su #EDD859 = 11.58:1 (AAA). Mai invertito dal tema. */
  --v-warn-solid:#EDD859;
  --v-on-warn:#1B1E24;   /* = --v-text (light) */

  /* ---------- SEMANTICI ---------- */
  --v-green:#178A50;  --v-green-soft:#E7F5EE;
  --v-amber:#B87205;  --v-amber-soft:#FBF3E2;
  /* inchiostro ambra per numeri bold su fondo amber-soft: in light serve più scuro di --v-amber
     (AA su #FBF3E2), in dark resta chiaro. Solo alias esistenti, niente hex nuovi. */
  --v-amber-ink:var(--v-yellow-ink);   /* light: #8A6A00 → AA su amber-soft */
  --v-red:#D93B3B;    --v-red-soft:#FCEDED;
  --v-blue:#2E6FE0;   --v-blue-soft:#EBF1FC;
  --v-violet:#7B5BD6; --v-violet-soft:#F1EDFB;
  /* status listing: arancione e giallo distinti (arancione = rosso-arancio, giallo = oro) */
  --v-orange:#E8590C; --v-orange-soft:#FCE9DD;
  --v-yellow:#F5B301; --v-yellow-soft:#FDF3D3; --v-yellow-ink:#8A6A00;

  /* serie grafici — validate col validator dataviz (chroma, CVD, contrasto: PASS).
     Nota: i colori di stato (green/amber/red) NON si usano mai come serie. */
  --v-chart-1:#087F9C;
  --v-chart-2:#D97706;
  --v-chart-3:#7B5BD6;
  --v-chart-4:#C13B67;
  --v-chart-5:#5F8A2E;
  --v-chart-grid:rgba(27,30,36,.07);

  /* ---------- TIPOGRAFIA ---------- */
  --v-font:"Switzer",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --v-font-display:"Cabinet Grotesk","Switzer",-apple-system,sans-serif;
  --v-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --v-fs-11:11px; --v-fs-12:12px; --v-fs-13:13px; --v-fs-14:14px;
  --v-fs-15:15px; --v-fs-17:17px; --v-fs-22:22px; --v-fs-28:28px; --v-fs-38:38px;

  /* ---------- GEOMETRIA ---------- */
  --v-r-sm:10px; --v-r-md:14px; --v-r-lg:18px; --v-r-xl:24px; --v-r-pill:999px;
  --v-control-h:40px; --v-control-h-sm:34px; --v-control-h-lg:46px;
  --v-gutter:28px;

  /* ---------- ELEVAZIONE (ambient, mai netta) ---------- */
  --v-shadow-xs:0 1px 2px rgba(27,30,36,.05);
  --v-shadow-sm:0 1px 2px rgba(27,30,36,.04),0 4px 14px -4px rgba(27,30,36,.07);
  --v-shadow-md:0 2px 4px rgba(27,30,36,.04),0 14px 34px -10px rgba(27,30,36,.12);
  --v-shadow-lg:0 6px 12px rgba(27,30,36,.05),0 28px 68px -16px rgba(27,30,36,.18);
  --v-inner-light:inset 0 1px 0 rgba(255,255,255,.7);

  /* ---------- MOTION ---------- */
  --v-t-fast:140ms; --v-t-base:220ms; --v-t-slow:340ms; --v-t-scene:560ms;
  --v-ease:cubic-bezier(.32,.72,0,1);        /* uscita morbida, massa reale */
  --v-ease-spring:cubic-bezier(.34,1.35,.4,1);/* micro-rimbalzo controllato */

  color-scheme:light;
}

[data-theme="dark"]{
  --v-brand:#FF7A45;
  --v-brand-hover:#FF8A5C;
  --v-brand-press:#F0682F;
  --v-brand-soft:rgba(255,122,69,.15);
  --v-brand-deep:#FF9466;
  --v-brand-ring:0 0 0 4px rgba(255,122,69,.22);
  --v-on-brand:#2A1000;
  --v-action:#FF7A45;
  --v-action-hover:#FF8A5C;
  --v-action-press:#F0682F;
  --v-on-action:#2A1000;

  --v-canvas:#111315;
  --v-surface:#191C1F;
  --v-surface-2:#202428;
  --v-surface-3:#272C31;
  --v-veil:rgba(4,5,6,.6);
  --v-inverse:#191C1F;
  --v-on-inverse:#F0F1F3;
  --v-inverse-muted:#9BA1AB;

  --v-line:#282D32;
  --v-line-strong:#353B42;

  --v-text:#F0F1F3;
  --v-text-2:#C3C7CD;
  --v-muted:#9BA1AB;
  --v-muted-2:#6E747E;

  --v-green:#3DBB7C;  --v-green-soft:rgba(61,187,124,.13);
  --v-amber:#E5A43B;  --v-amber-soft:rgba(229,164,59,.13);
  --v-amber-ink:var(--v-amber);   /* dark: ambra chiara, già AA su superficie scura */
  --v-red:#F06A6A;    --v-red-soft:rgba(240,106,106,.13);
  --v-blue:#6C9BF0;   --v-blue-soft:rgba(108,155,240,.13);
  --v-violet:#A78BEA; --v-violet-soft:rgba(167,139,234,.14);
  --v-orange:#F97316; --v-orange-soft:rgba(249,115,22,.16);
  --v-yellow:#FACC15; --v-yellow-soft:rgba(250,204,21,.16); --v-yellow-ink:#FACC15;

  /* serie grafici dark — validate col validator dataviz (banda L, chroma, CVD, contrasto: PASS) */
  --v-chart-1:#2A9DB0; --v-chart-2:#C97A22; --v-chart-3:#9878E0; --v-chart-4:#D46A8E; --v-chart-5:#6E9640;
  --v-chart-grid:rgba(240,241,243,.08);

  --v-shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --v-shadow-sm:0 1px 2px rgba(0,0,0,.28),0 4px 14px -4px rgba(0,0,0,.34);
  --v-shadow-md:0 2px 4px rgba(0,0,0,.3),0 14px 34px -10px rgba(0,0,0,.46);
  --v-shadow-lg:0 6px 12px rgba(0,0,0,.34),0 28px 68px -16px rgba(0,0,0,.58);
  --v-inner-light:inset 0 1px 0 rgba(255,255,255,.05);

  color-scheme:dark;
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--v-font);
  font-size:var(--v-fs-14);
  line-height:1.5;
  color:var(--v-text);
  background:var(--v-canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--v-font-display);font-weight:700;letter-spacing:-.02em;margin:0}
h4,h5,h6{font-family:var(--v-font);font-weight:600;letter-spacing:-.01em;margin:0}
a{color:var(--v-brand-deep)}
::selection{background:color-mix(in srgb,var(--v-brand) 24%,transparent)}
/* Focus da tastiera. Niente border-radius qui dentro: NON arrotonda l'anello, arrotonda
   l'ELEMENTO mentre ha il focus — il selettore cliente (pill) diventava un rettangolo a 6px
   appena lo cliccavi, e sui link ASIN spuntavano angoli tondi dal nulla. L'outline segue da
   solo il raggio reale dell'elemento (Chrome 94+, Firefox 88+, Safari 16.4+).
   Colore pieno e non al 65%: mescolato con transparent l'anello scendeva a 2.28:1 su bianco,
   sotto il 3:1 che WCAG 2.2 (1.4.11) chiede all'indicatore di focus. Pieno fa 3.30:1 su
   --v-surface chiaro e 6.62:1 su quello scuro. */
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--v-brand);
  outline-offset:2px;
}
/* …ma NON dopo che hai usato il mouse. Chromium ri-valuta :focus-visible al primo tasto
   premuto su un elemento che ha già il focus: cliccavi il "?" col mouse, premevi Esc per
   chiudere il pannello e l'anello arancione spuntava lì (Cristian, 28/07/2026). Non è un
   .focus() del nostro codice — verificato, il focus non si sposta mai — è il browser.
   Il modo di input lo marca app.js sull'<html>; solo Tab riporta in modo tastiera, così
   Esc e Invio non riaccendono l'anello mentre chi naviga da tastiera continua a vederlo. */
html[data-input="mouse"] :focus-visible{outline:none}
/* dati numerici: sempre cifre tabellari, mai layout shift */
.v-num,td.num,[data-num]{font-variant-numeric:tabular-nums lining-nums}

/* scrollbar sottile uniforme */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--v-line-strong);border-radius:var(--v-r-pill);border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--v-muted-2);background-clip:content-box}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}