/* DS2 — tokens.css
   Estratto dai biglietti da visita DS2 (fronte nero, retro carta, punto arancione).
   Unica sorgente dei valori: non scrivere mai colori, font o raggi a mano nel sito, usa queste variabili. */

@font-face {
  font-family: "Archivo";
  src: url("./fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Palette base (i 3 colori del biglietto) ---------- */
  --ds-ink: #0e0e0e;            /* fronte del biglietto, testo sulla carta */
  --ds-paper: #dfe0dc;          /* retro del biglietto, testo sul nero */
  --ds-orange: #ff4f00;         /* il punto di "DS2." — unico accento */

  /* ---------- Derivati (stessa famiglia, nessun nuovo colore) ---------- */
  --ds-orange-hover: #ff6a2b;   /* hover del bottone arancione */
  --ds-orange-text: #a82d06;    /* arancione leggibile come TESTO su carta (>=4.5:1) */
  --ds-ink-raised: #1a1a19;     /* card/superfici sollevate sul nero */
  --ds-paper-sunk: #d1d2ce;     /* card/superfici incassate sulla carta */
  --ds-muted-on-ink: #9b9c97;   /* etichette "SOFTWARE · AI" sul nero */
  --ds-body-on-ink: #cfd0cc;    /* paragrafi sul nero */
  --ds-muted-on-paper: #5c5d59; /* ruolo / etichette sulla carta */
  --ds-line-on-ink: rgba(223, 224, 220, 0.16);
  --ds-line-on-paper: rgba(14, 14, 14, 0.2);

  /* ---------- Aggiunti per /fiera: non sono nel kit originale, derivano dagli stessi colori ---------- */
  --ds-orange-soft: rgba(255, 79, 0, 0.12); /* fondo di avvisi e scadenze nell'app */
  --ds-paper-hi: color-mix(in srgb, #dfe0dc 52%, #fff);  /* la carta schiarita: fogli e fondo dell'app */
  --ds-paper-top: color-mix(in srgb, #dfe0dc 14%, #fff); /* card sopra i fogli */
  --ds-peach: color-mix(in srgb, #ff4f00 42%, #fff);     /* arancione tenue */
  --ds-ember: color-mix(in srgb, #ff4f00 72%, #0e0e0e);  /* arancione scuro: testo su chiaro */
  --ds-muted-on-sunk: #555652;              /* testo secondario su --ds-paper-sunk: 4,9:1 (il grigio del kit lì dà 4,4:1) */

  /* ---------- Font ---------- */
  --font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif; /* wordmark DS2 e titoli: sempre wdth 115-125, peso 800 */
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;  /* tutto il resto */

  /* ---------- Forma ---------- */
  --radius-sm: 3px;     /* UNICO raggio: bottoni, input, card, tag. Uguale agli angoli quasi vivi di Archivo Expanded */
  --radius-full: 9999px; /* solo il punto arancione, bullet, avatar */

  /* ---------- Spaziatura (base 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;
  --gutter: clamp(20px, 5vw, 56px);   /* margine laterale: sul biglietto è l'8,4% della larghezza */
  --container: 1280px;

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 160ms;

  /* ---------- Tema attivo: NERO (default, come il fronte) ---------- */
  --bg: var(--ds-ink);
  --bg-raised: var(--ds-ink-raised);
  --fg: var(--ds-paper);
  --fg-body: var(--ds-body-on-ink);
  --fg-muted: var(--ds-muted-on-ink);
  --line: var(--ds-line-on-ink);
  --accent: var(--ds-orange);
  --accent-text: var(--ds-orange);   /* su nero l'arancione è leggibile (5.9:1) */
  --on-accent: var(--ds-ink);        /* testo sui bottoni arancioni: sempre nero, mai bianco */
  --focus: var(--ds-orange);
  color-scheme: dark;
}

/* ---------- Tema CARTA (come il retro del biglietto) ---------- */
[data-theme="light"],
.ds-paper {
  --bg: var(--ds-paper);
  --bg-raised: var(--ds-paper-sunk);
  --fg: var(--ds-ink);
  --fg-body: var(--ds-ink);
  --fg-muted: var(--ds-muted-on-paper);
  --line: var(--ds-line-on-paper);
  --accent: var(--ds-orange);
  --accent-text: var(--ds-orange-text); /* l'arancione puro su carta è 2,5:1: per il testo usare questo */
  --on-accent: var(--ds-ink);
  --focus: var(--ds-ink);
  color-scheme: light;
}

/* ---------- Tema NERO forzato dentro una sezione carta ---------- */
[data-theme="dark"],
.ds-ink {
  --bg: var(--ds-ink);
  --bg-raised: var(--ds-ink-raised);
  --fg: var(--ds-paper);
  --fg-body: var(--ds-body-on-ink);
  --fg-muted: var(--ds-muted-on-ink);
  --line: var(--ds-line-on-ink);
  --accent: var(--ds-orange);
  --accent-text: var(--ds-orange);
  --on-accent: var(--ds-ink);
  --focus: var(--ds-orange);
  color-scheme: dark;
}