/* =============================================================================
   Token del design system Sebyone — sottoinsieme usato dal sito Termotel.
   Valori estratti dai file "tokens" del design system, così il sito non
   dipende più dal suo bundle React.
   (Nota: non scrivere percorsi con asterisco-barra qui dentro — chiuderebbe
   il commento in anticipo e invaliderebbe tutto il foglio.)
   ============================================================================= */

/* I font restano su Google Fonts. Per un'installazione autonoma scaricali e
   sostituisci questo @import (vedi docs/installazione.md). */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Tipografia ---------------------------------------------------------- */
  --font-sans: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Chakra Petch', 'Titillium Web', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Grigi Sebyone ------------------------------------------------------- */
  --sb-gray-50:  #f5f7f8;
  --sb-gray-100: #eaeef0;
  --sb-gray-200: #d6dfe3;
  --sb-gray-300: #b4c1c8;
  --sb-gray-400: #869299;
  --sb-gray-500: #5d6b73;
  --sb-gray-600: #45525a;
  --sb-gray-700: #303c43;
  --sb-gray-800: #1e282e;
  --sb-gray-900: #0f171c;
  --sb-navy-500: #004767;
  --text-body: var(--sb-gray-700);

  /* --- Colori Termotel ----------------------------------------------------- */
  --tt-orange-50:  #FEF1E7;
  --tt-orange-200: #FAD3B4;
  --tt-orange-300: #F7B077;
  --tt-orange-400: #F7941D;
  --tt-orange-500: #F26A1E;
  --tt-orange-600: #D4550F;
  --tt-orange-700: #A83F08;
  --tt-blue-300: #8FC3EA;
  --tt-blue-400: #2E9BE0;
  --tt-blue-500: #1B76CE;
  --tt-blue-600: #0E5CB0;
  --tt-blue-700: #0E4E9B;
  --tt-blue-800: #0A3468;
  --tt-blue-900: #061F42;
  --tt-paper: #F6F1E8;

  --tt-gradient-hero: linear-gradient(120deg, #061F42 0%, #0E4E9B 58%, #1B76CE 100%);
  --tt-gradient-deep: linear-gradient(135deg, #0A3468 0%, #061F42 100%);

  /* --- Raggi --------------------------------------------------------------- */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* --- Ombre --------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 28, 0.06), 0 1px 3px rgba(15, 23, 28, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 28, 0.08), 0 2px 4px -2px rgba(15, 23, 28, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 28, 0.10), 0 4px 6px -4px rgba(15, 23, 28, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 28, 0.12), 0 8px 10px -6px rgba(15, 23, 28, 0.08);
  --shadow-focus: 0 0 0 3px rgba(14, 92, 176, 0.35);
  --tt-shadow-accent: 0 6px 18px rgba(242, 106, 30, 0.30);
}