/*
 * Token dell'app — stile del sito «432», scelto da Riccardo il 2026-09-25
 * (valori presi da 432_WEBSITE/src/styles/global.css).
 *
 * Bianco e nero puri, Helvetica Neue in peso leggero, titoli grandi, etichette
 * in maiuscolo tracciato, filetti al 20%, pillole a contorno solo per le azioni.
 * Nessun colore del marchio del cliente: il suo logo e' il suo segno.
 *
 * Unico file del progetto con valori cromatici.
 */

/* Arimo, sostituto web di Helvetica Neue, servito dall'app (licenza in fonts/).
   Su Mac e iPhone Helvetica Neue viene prima e questo file non si scarica. */
@font-face {
  font-family: "Arimo";
  src: url("../fonts/arimo-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Colori animabili: il cambio di tema scorre, come sul sito. */
@property --rp-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}
@property --rp-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #fff;
}
@property --rp-chiaro {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --rp-font: "Helvetica Neue", Helvetica, Arimo, Arial, sans-serif;
  --rp-w-light: 300;
  --rp-w-regular: 400;
  --rp-w-medium: 500;

  /* Scala del sito, stretta per il telefono */
  --rp-t-mega: clamp(2.75rem, 1rem + 7vw, 6.5rem);
  --rp-t-display: clamp(2.25rem, 1.25rem + 3.6vw, 4rem);
  --rp-t-h2: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  --rp-t-lead: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem);
  --rp-t-body: 1.0625rem;
  --rp-t-small: 0.875rem;
  --rp-t-kicker: 0.8125rem;
  --rp-track-kicker: 0.12em;

  --rp-s-1: 0.5rem;
  --rp-s-2: 1rem;
  --rp-s-3: 1.5rem;
  --rp-s-4: 2.5rem;
  --rp-s-5: 4rem;
  --rp-s-6: 6.5rem;

  --rp-gutter: clamp(20px, 5.5vw, 80px);
  --rp-measure: 820px;
  --rp-header: 68px;
  --rp-tabbar-h: 58px;
  --rp-mini-h: 64px;
  --rp-touch: 44px;
  --rp-pill: 999px;

  --rp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rp-motion-fast: 0.25s;
  --rp-motion: 0.4s;
  --rp-motion-slow: 0.9s;

  /* Tema scuro (base) */
  --rp-bg: #000;
  --rp-fg: #fff;
  --rp-chiaro: 0;
  --rp-fg-2: color-mix(in srgb, var(--rp-fg) 58%, transparent);
  --rp-fg-3: color-mix(in srgb, var(--rp-fg) 40%, transparent);
  --rp-rule: color-mix(in srgb, var(--rp-fg) 20%, transparent);
  --rp-rule-strong: color-mix(in srgb, var(--rp-fg) 45%, transparent);
  --rp-hover: color-mix(in srgb, var(--rp-fg) 5%, transparent);
  --rp-scrim: color-mix(in srgb, var(--rp-bg) 70%, transparent);
  --rp-shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.5);
  --rp-wave-rest: color-mix(in srgb, var(--rp-fg) 28%, transparent);
  /* La forma d'onda ascoltata: il colore del testo, nessun accento. */
  --rp-accento: var(--rp-fg);
  color-scheme: dark;

  transition:
    --rp-bg var(--rp-motion-slow) var(--rp-ease),
    --rp-fg var(--rp-motion-slow) var(--rp-ease),
    --rp-chiaro var(--rp-motion-slow) var(--rp-ease);
}

:root[data-rp-theme="chiaro"] {
  --rp-bg: #fff;
  --rp-fg: #000;
  --rp-chiaro: 1;
  --rp-shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.14);
  color-scheme: light;
}