/* ============================================================
   100ottani — design token
   Identità originale: verde benzina profondo + ambra "100 ottani".
   Tema chiaro/scuro automatico (prefers-color-scheme) con override
   manuale via [data-theme] sull'elemento radice.
   ============================================================ */

@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/fonts/InterVariable.woff2") format("woff2");
}

:root {
  /* tipografia */
  --font-sans: "InterVariable", ui-sans-serif, system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --leading-tight: 1.15;
  --leading-normal: 1.55;

  /* scala spazi (base 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* raggi e ombre */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-full: 999px;
  --shadow-1: 0 1px 2px rgb(10 20 16 / 8%);
  --shadow-2: 0 4px 16px rgb(10 20 16 / 12%);
  --shadow-3: 0 12px 32px rgb(10 20 16 / 18%);

  /* palette grezza */
  --green-950: #04241b;
  --green-900: #073527;
  --green-800: #0b4633;
  --green-700: #0f5940;
  --green-600: #146d4e;
  --green-500: #1d8560;
  --green-300: #67b795;
  --green-100: #d9ede4;
  --amber-600: #d98d0f;
  --amber-500: #f0a92e;
  --amber-300: #f7c96e;
  --amber-100: #fdeed2;
  --ink-900: #14201b;
  --ink-700: #34443d;
  --ink-500: #5d6f67;
  --ink-300: #a9b8b1;
  --red-600: #c73e3e;
  --blue-600: #2f6fb2;

  /* token semantici — tema chiaro */
  --color-bg: #f5f7f6;
  --color-surface: #ffffff;
  --color-surface-2: #eef2f0;
  --color-text: var(--ink-900);
  --color-muted: var(--ink-500);
  --color-line: #dfe6e2;
  --color-primary: var(--green-700);
  --color-primary-strong: var(--green-800);
  --color-on-primary: #ffffff;
  --color-accent: var(--amber-500);
  --color-accent-strong: var(--amber-600);
  --color-danger: var(--red-600);
  --color-link: var(--green-700);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 55%, transparent);

  --transition-fast: 120ms ease;
  --transition-slow: 240ms ease;
}

/* tema scuro automatico (rispettando l'eventuale override manuale "light") */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0c1411;
    --color-surface: #131d18;
    --color-surface-2: #1a2721;
    --color-text: #e7eeea;
    --color-muted: #96a69e;
    --color-line: #24322b;
    --color-primary: #2f9e74;
    --color-primary-strong: #1d8560;
    --color-on-primary: #06130d;
    --color-accent: #f4b64a;
    --color-accent-strong: #f0a92e;
    --color-link: #55b58d;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-2: 0 4px 16px rgb(0 0 0 / 45%);
    --shadow-3: 0 12px 32px rgb(0 0 0 / 55%);
  }
}

/* override manuale */
:root[data-theme="dark"] {
  --color-bg: #0c1411;
  --color-surface: #131d18;
  --color-surface-2: #1a2721;
  --color-text: #e7eeea;
  --color-muted: #96a69e;
  --color-line: #24322b;
  --color-primary: #2f9e74;
  --color-primary-strong: #1d8560;
  --color-on-primary: #06130d;
  --color-accent: #f4b64a;
  --color-accent-strong: #f0a92e;
  --color-link: #55b58d;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-2: 0 4px 16px rgb(0 0 0 / 45%);
  --shadow-3: 0 12px 32px rgb(0 0 0 / 55%);
}

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