/* Voxaris design tokens — style «Metamorfosi» (owner decision of 3/11: «l'animazione dei video
   è perfetta… aggiorna tutte le pagine», piano 18). It replaces «Onda» with the same names, so
   every page changes from this one file: day (ivory) is the default, night (ink) the
   alternative; one accent, the Voxaris red; one vivid colour per scenario for cards and
   backgrounds (ink text on top), and a darker one for icons and text. Every text/background pair
   is at least 4.5:1 (tests/test_theme_contrast.py). The night values are the base block below,
   the day values override them under [data-theme="light"], the default of every page. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/static/fonts/archivo-latin-wdth-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/static/fonts/archivo-latin-ext-wdth-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/instrument-serif-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/instrument-serif-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/instrument-serif-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/instrument-serif-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root, [data-theme="dark"],
:root[data-theme="dark"] [data-theme="light"] {
  color-scheme: dark;
  /* Colour — night (the whole page, or one section with data-theme="dark") */
  --bg: #0B0A0F;
  --bg-soft: #121018;
  --surface: #16141C;
  --surface-2: #1D1A24;
  --line: rgba(243, 238, 230, 0.10);
  --line-strong: rgba(243, 238, 230, 0.20);
  --text: #F3EEE6;
  --text-soft: #BDB5AA;
  --text-faint: #958D82;
  --voice-a: #FF4A1C;
  --voice-b: #FF8A3D;
  /* The bright gradient is for waves, glows, borders and large titles; under white text it is
     the strong one, and small text in the gradient uses the ink one. */
  --voice: linear-gradient(120deg, var(--voice-a), var(--voice-b));
  --voice-strong: linear-gradient(120deg, #C2320C, #A3290A);
  --voice-ink: linear-gradient(120deg, var(--voice-text), var(--accent-text));
  --voice-glow: rgba(255, 74, 28, 0.32);
  /* The accent as text and icons: links, prices, quantities, small icons. */
  --accent-text: #FF7A45;
  --voice-text: #FFA26B;
  --success: #4ADE80;
  --warning: #FBBF24;
  --danger: #F87171;
  --info: #22D3EE;
  --tone-work: #60A5FA;
  --on-success: #0B0A0F;
  --on-warning: #0B0A0F;
  --on-danger: #0B0A0F;
  --on-info: #0B0A0F;
  /* One colour per scenario for icons and text… */
  --sc-restaurant: #FF6A3D;
  --sc-hotel: #A996FF;
  --sc-helpdesk: #2ED3B7;
  --sc-dispatch: #FFB224;
  --sc-ecommerce: #FF6FA8;
  --sc-custom: #C6F432;
  /* …and a vivid one for cards and backgrounds, the same by day and by night, always with the
     ink on top (5.6:1 on the red, more on the others). */
  --scv-restaurant: #FF4A1C;
  --scv-hotel: #9B87FF;
  --scv-helpdesk: #2ED3B7;
  --scv-dispatch: #FFB224;
  --scv-ecommerce: #FF6FA8;
  --scv-custom: #C6F432;
  --on-scv: #121016;
  /* The three colours of the brand, fixed in both themes. */
  --ink: #121016;
  --paper: #F3EEE6;
  --verm: #FF4A1C;
  --focus: #FF8A3D;
  --on-voice: #FFFFFF;
  --on-voice-soft: rgba(255, 255, 255, 0.53);
  /* Text on a background of the text colour (the main buttons). */
  --on-text: #121016;
  --backdrop: rgba(5, 4, 8, 0.62);
  /* Map pins of the transport dashboard: the same in both themes, white ink over the map
     tiles (the start green was 3.8:1 under its letter until 12/10). */
  --pin-start: #047857;
  --pin-end: #DC2626;
  --pin-carrier: #2563EB;
  --pin-ink: #FFFFFF;
  --pin-shadow: rgba(0, 0, 0, 0.4);

  /* Type: 12 · 14 · 16 · 18 · 22 · 28 · 36 · 48 · 64. Archivo has width and weight axes (the
     titles breathe with them); the serif italic is the accent of the titles. */
  --font-text: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;

  /* Space: 4/8 grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Radius and depth */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-2: 0 30px 70px -30px rgba(0, 0, 0, 0.7);

  /* Motion: slow out, quick in */
  --dur-micro: 140ms;
  --dur-ui: 240ms;
  --dur-section: 620ms;
  --dur-hero: 1100ms;
  --ease-standard: cubic-bezier(.16, 1, .3, 1);
  --ease-emph: cubic-bezier(.77, 0, .18, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --page: 1240px;
}

:root[data-theme="light"], [data-theme="light"] {
  color-scheme: light;
  /* Colour — day, the default of every page (or one section with data-theme="light") */
  --bg: #F3EEE6;
  --bg-soft: #ECE5DA;
  --surface: #FBF8F3;
  --surface-2: #F6F1E9;
  --line: rgba(18, 16, 22, 0.10);
  --line-strong: rgba(18, 16, 22, 0.20);
  --text: #121016;
  --text-soft: #4A453E;
  --text-faint: #67615A;
  --voice-glow: rgba(255, 74, 28, 0.22);
  --accent-text: #B52E0A;
  --voice-text: #8F2508;
  --success: #136F35;
  --warning: #9A4508;
  --danger: #B91C1C;
  --info: #0E7490;
  --tone-work: #1D4ED8;
  --on-success: #FFFFFF;
  --on-warning: #FFFFFF;
  --on-danger: #FFFFFF;
  --on-info: #FFFFFF;
  --sc-restaurant: #B52E0A;
  --sc-hotel: #5B3FD6;
  --sc-helpdesk: #0A7262;
  --sc-dispatch: #8A5300;
  --sc-ecommerce: #B0245F;
  --sc-custom: #4F6B07;
  --focus: #B52E0A;
  --on-text: #F3EEE6;
  --backdrop: rgba(18, 16, 22, 0.45);
  --shadow-1: 0 1px 2px rgba(18, 16, 22, 0.06), 0 1px 1px rgba(18, 16, 22, 0.04);
  --shadow-2: 0 30px 70px -32px rgba(18, 16, 22, 0.32);
}

/* The night chosen with the theme button (owner, 4/11: «la versione dark… nero su nero»): every
   section the page marks as day turns night (above), the ones that are night anyway take a lighter
   night, so the liquid edges between them still show. The red and the colours of the sectors stay. */
:root[data-theme="dark"] [data-theme="dark"] {
  --bg: #16131C;
  --bg-soft: #1B1822;
  --surface: #201D28;
  --surface-2: #25212D;
}

/* The red of the brand as the background of a whole section (the band, the last call to action):
   the ink on top, 5.6:1; the soft text is a dark red. */
[data-theme="accent"] {
  color-scheme: light;
  --bg: #FF4A1C;
  --bg-soft: #F2431A;
  --surface: #FF6236;
  --surface-2: #FF5A2E;
  --line: rgba(18, 16, 22, 0.18);
  --line-strong: rgba(18, 16, 22, 0.32);
  --text: #121016;
  --text-soft: #2A0E05;
  --text-faint: #2A0E05;
  --accent-text: #121016;
  --voice-text: #121016;
  --on-text: #F3EEE6;
  --focus: #121016;
  --voice-glow: rgba(18, 16, 22, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-micro: 1ms; --dur-ui: 1ms; --dur-section: 1ms; --dur-hero: 1ms; }
}
:root[data-motion="reduce"] { --dur-micro: 1ms; --dur-ui: 1ms; --dur-section: 1ms; --dur-hero: 1ms; }