/*
 * MarketDomain — Design tokens
 *
 * Light-first: il tema chiaro è il default e vive su :root nudo.
 * Il tema scuro è opt-in e ridefinisce SOLO i token semantici in
 * :root[data-theme="dark"]. Nessun colore ha la sua unica definizione
 * dentro un blocco condizionale.
 */

:root {
  /* ---- Palette di marca -------------------------------------------------- */
  /* Navy: eredita dal #123456 storico, ripulito e steso su una scala reale */
  --md-navy-950: #08131F;
  --md-navy-900: #0D1F33;
  --md-navy-850: #122A45;
  --md-navy-800: #17375A;
  --md-navy-700: #1E4A78;
  --md-navy-600: #2A6098;
  --md-navy-500: #3D7CBC;
  --md-navy-400: #6BA0D6;
  --md-navy-300: #A3C6E8;
  --md-navy-200: #CFE1F4;
  --md-navy-100: #E6EFFA;

  /* Arancio: eredita da #ee761b / #ff7700, con gradini scuri utilizzabili
     anche come testo su fondo bianco (WCAG AA). */
  --md-orange-800: #8F3B05;
  --md-orange-700: #B04A06;
  --md-orange-600: #D25A08;
  --md-orange-500: #EE761B;
  --md-orange-400: #FF9645;
  --md-orange-300: #FFB878;
  --md-orange-100: #FFE8D6;
  --md-orange-050: #FFF4EB;

  /* Ciano: colore dei dati e delle metriche */
  --md-cyan-700: #0A6178;
  --md-cyan-600: #0E7C96;
  --md-cyan-500: #159FBE;
  --md-cyan-400: #35C4E0;
  --md-cyan-100: #D9F2F8;

  /* Neutri freddi, tarati sul navy per non sembrare grigi "sporchi" */
  --md-white:    #FFFFFF;
  --md-gray-025: #FBFCFE;
  --md-gray-050: #F6F9FC;
  --md-gray-100: #EFF3F9;
  --md-gray-150: #E4EAF3;
  --md-gray-200: #D5DEEA;
  --md-gray-300: #B7C4D6;
  --md-gray-400: #8496AC;
  --md-gray-450: #667484;
  --md-gray-500: #61748C;
  --md-gray-600: #4A5C74;
  --md-gray-700: #33455E;
  --md-gray-800: #23354C;

  /* Semaforo */
  --md-green-700: #10693A;
  --md-green-600: #15834A;
  --md-green-500: #22A661;
  --md-green-100: #DCF5E7;
  --md-amber-700: #96590A;
  --md-amber-500: #DE8A12;
  --md-amber-100: #FCEFD5;
  --md-red-700:   #A82234;
  --md-red-600:   #C92C41;
  --md-red-500:   #E8556B;
  --md-red-100:   #FDE4E8;
  --md-violet-700: #5433C4;
  --md-violet-600: #6D4FE0;
  --md-violet-400: #A48CF5;
  --md-violet-100: #E9E3FD;

  /* ---- Token semantici (light = default) --------------------------------- */
  --bg:            var(--md-white);
  --bg-alt:        var(--md-gray-050);
  --surface:       var(--md-white);
  --surface-2:     var(--md-gray-050);
  --surface-3:     var(--md-gray-100);
  --surface-hover: var(--md-gray-050);
  --surface-invert: var(--md-navy-950);

  --border:        var(--md-gray-150);
  --border-strong: var(--md-gray-200);
  --border-focus:  var(--md-navy-600);

  --text:          var(--md-gray-700);
  --text-strong:   var(--md-navy-950);
  --text-muted:    var(--md-gray-500);
  /* #8496AC si ferma a 3.03:1 su bianco: sotto la soglia AA di 4.5:1 per il
     testo normale, e lo usiamo per date, didascalie ed etichette. Il gradino
     450 passa sia su bianco sia sul grigio delle card. Il 400 resta per bordi
     e tratti d'icona, dove la soglia non si applica. */
  /* #8496AC si ferma a 3.03:1 su bianco: sotto la soglia AA di 4.5:1 per il
     testo normale, e lo usiamo per date, didascalie ed etichette. Il gradino
     450 passa sia su bianco sia sul grigio delle card. Il 400 resta per bordi
     e tratti d'icona, dove la soglia non si applica. */
  --text-faint:    var(--md-gray-450);
  --text-invert:   var(--md-white);

  /* Primario = azione commerciale (arancio). Link = navy, più leggibile
     nel corpo del testo e meno urlato dell'arancio. */
  --primary:       var(--md-orange-600);
  --primary-hover: var(--md-orange-700);
  --primary-text:  var(--md-white);
  --primary-soft:  var(--md-orange-050);
  --primary-ink:   var(--md-orange-700);

  --link:          var(--md-navy-700);
  --link-hover:    var(--md-orange-700);

  --accent:        var(--md-cyan-600);
  --accent-soft:   var(--md-cyan-100);
  --accent-ink:    var(--md-cyan-700);

  --positive:      var(--md-green-600);
  --positive-soft: var(--md-green-100);
  --warning:       var(--md-amber-700);
  --warning-soft:  var(--md-amber-100);
  --negative:      var(--md-red-600);
  --negative-soft: var(--md-red-100);
  --info:          var(--md-violet-700);
  --info-soft:     var(--md-violet-100);

  /* Overlay / vetro */
  --glass:         color-mix(in srgb, var(--md-white) 82%, transparent);
  --scrim:         color-mix(in srgb, var(--md-navy-950) 45%, transparent);

  /* Fondali decorativi: usati dalle sezioni "scure" anche in tema chiaro */
  --ink-bg:        var(--md-navy-950);
  --ink-surface:   var(--md-navy-900);
  --ink-border:    color-mix(in srgb, var(--md-navy-500) 30%, transparent);
  --ink-text:      var(--md-navy-200);
  --ink-text-strong: var(--md-white);

  /* ---- Tipografia -------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scala fluida: min a 360px, max a 1440px */
  --step--2: clamp(0.694rem, 0.68rem + 0.06vw, 0.72rem);
  --step--1: clamp(0.833rem, 0.80rem + 0.14vw, 0.90rem);
  --step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.0625rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.31vw, 1.35rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.51vw, 1.70rem);
  --step-3:  clamp(1.728rem, 1.55rem + 0.79vw, 2.12rem);
  --step-4:  clamp(2.074rem, 1.81rem + 1.18vw, 2.65rem);
  --step-5:  clamp(2.488rem, 2.10rem + 1.72vw, 3.30rem);
  --step-6:  clamp(2.80rem, 2.30rem + 2.20vw, 4.10rem);
  --step-7:  clamp(3.30rem, 2.60rem + 3.10vw, 5.00rem);

  --leading-tight: 1.08;
  --leading-snug: 1.35;
  --leading-normal: 1.65;

  --tracking-tight: -0.024em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  /* ---- Spaziatura -------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* ---- Forme ------------------------------------------------------------- */
  --radius-xs: 5px;
  --radius-s:  8px;
  --radius-m:  12px;
  --radius-l:  16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Ombre a bassa opacità: su fondo chiaro devono solo staccare il piano,
     non disegnare un alone. */
  --shadow-xs: 0 1px 2px rgb(13 31 51 / 0.05);
  --shadow-s:  0 1px 3px rgb(13 31 51 / 0.07), 0 1px 2px rgb(13 31 51 / 0.04);
  --shadow-m:  0 4px 14px -4px rgb(13 31 51 / 0.10), 0 2px 6px -2px rgb(13 31 51 / 0.06);
  --shadow-l:  0 18px 46px -14px rgb(13 31 51 / 0.16), 0 6px 16px -6px rgb(13 31 51 / 0.08);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--md-navy-600) 20%, transparent);
  --shadow-primary: 0 6px 18px -6px color-mix(in srgb, var(--md-orange-600) 45%, transparent);

  /* ---- Layout ------------------------------------------------------------ */
  --container: 1240px;
  --container-wide: 1480px;
  --container-narrow: 720px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --header-h: 68px;
  /* La banda sopra la testata: 0 quando non c'è, così gli scostamenti di
     tutto il sito (menu a scomparsa, colonne appiccicate, ancore) restano
     giusti in entrambi i casi. Il valore lo mette body.has-topbar. */
  --topbar-h: 0px;
  --stuck-h:  calc(var(--topbar-h) + var(--header-h));

  /* ---- Movimento --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  color-scheme: light;
}

/* ---- Tema scuro (opt-in dal toggle) -------------------------------------- */
:root[data-theme="dark"] {
  --bg:            var(--md-navy-950);
  --bg-alt:        var(--md-navy-900);
  --surface:       var(--md-navy-900);
  --surface-2:     var(--md-navy-850);
  --surface-3:     var(--md-navy-800);
  --surface-hover: var(--md-navy-850);
  --surface-invert: var(--md-white);

  --border:        color-mix(in srgb, var(--md-navy-500) 28%, transparent);
  --border-strong: color-mix(in srgb, var(--md-navy-500) 48%, transparent);
  --border-focus:  var(--md-orange-400);

  --text:          var(--md-navy-200);
  --text-strong:   var(--md-white);
  --text-muted:    var(--md-navy-300);
  /* Al buio la direzione si inverte: il grigio deve schiarirsi, non scurirsi.
     Il 400 rende 6.18:1 sul fondo scuro, il 450 solo 3.91:1. */
  --text-faint:    var(--md-gray-400);
  --text-invert:   var(--md-navy-950);

  --primary:       var(--md-orange-500);
  --primary-hover: var(--md-orange-400);
  --primary-text:  #241002;
  --primary-soft:  color-mix(in srgb, var(--md-orange-500) 16%, transparent);
  --primary-ink:   var(--md-orange-300);

  --link:          var(--md-navy-300);
  --link-hover:    var(--md-orange-400);

  --accent:        var(--md-cyan-400);
  --accent-soft:   color-mix(in srgb, var(--md-cyan-400) 16%, transparent);
  --accent-ink:    var(--md-cyan-400);

  --positive:      var(--md-green-500);
  --positive-soft: color-mix(in srgb, var(--md-green-500) 18%, transparent);
  --warning:       var(--md-amber-500);
  --warning-soft:  color-mix(in srgb, var(--md-amber-500) 18%, transparent);
  --negative:      var(--md-red-500);
  --negative-soft: color-mix(in srgb, var(--md-red-500) 18%, transparent);
  --info:          var(--md-violet-400);
  --info-soft:     color-mix(in srgb, var(--md-violet-400) 18%, transparent);

  --glass:         color-mix(in srgb, var(--md-navy-900) 82%, transparent);
  --scrim:         color-mix(in srgb, #000 62%, transparent);

  --ink-bg:        var(--md-navy-900);
  --ink-surface:   var(--md-navy-850);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-s:  0 1px 3px rgb(0 0 0 / 0.40);
  --shadow-m:  0 6px 20px -6px rgb(0 0 0 / 0.50);
  --shadow-l:  0 24px 60px -18px rgb(0 0 0 / 0.65);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--md-orange-400) 30%, transparent);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  html { scroll-behavior: auto; }
}