/* ==================================================================
   tokens.css
   Design token del sito (stile Material 3), ricavati dal logo Aristocasa:
   arancio del cartello, nero del lettering, grigio della chiave.
   Tutti i colori passano da qui: per cambiare la palette basta questo file.
   ================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Colori brand (dal logo) ---- */
  --brand-orange: #f39200;          /* arancio del cartello */
  --brand-ink: #1d1d1b;             /* nero del lettering */
  --brand-key: #5e5e5e;             /* grigio della chiave */

  /* ---- Ruoli Material 3, tema chiaro ---- */
  --md-primary: var(--brand-orange);          /* superfici piene (bottoni, FAB) */
  --md-on-primary: var(--brand-ink);          /* testo sopra l'arancio: contrasto ~7.5:1 */
  --md-primary-text: #9f5700;                 /* arancio scurito per testo su fondo chiaro (AA) */
  --md-primary-container: #ffe2bf;
  --md-on-primary-container: #2e1800;

  --md-surface: #fffbf6;
  --md-surface-container-low: #fdf5ec;
  --md-surface-container: #faefe2;
  --md-surface-container-high: #f5e5d1;
  --md-on-surface: var(--brand-ink);
  --md-on-surface-variant: #54504a;
  --md-outline: #d8c8b3;
  --md-outline-strong: #8a8178;
  --md-error: #b3261e;
  --md-whatsapp: #1f8f4e;                     /* verde WhatsApp scurito per contrasto AA */

  /* Accento di ciascuna casetta (usati solo per il chip colore) */
  --house-rossa: #c8443a;
  --house-gialla: #e2b100;
  --house-verde: #3f9a6b;
  --house-arancione: var(--brand-orange);

  /* Opacità del logo sfumato in sottofondo */
  --watermark-opacity: 0.055;
  --watermark-filter: none;
  --grain-opacity: 0.22;

  /* Ombre tinte d'arancio, mai nero puro (elevazioni M3) */
  --elev-1: 0 1px 2px rgb(110 60 0 / 0.08), 0 1px 3px 1px rgb(110 60 0 / 0.06);
  --elev-2: 0 2px 6px rgb(110 60 0 / 0.10), 0 8px 24px rgb(110 60 0 / 0.08);
  --elev-3: 0 12px 40px rgb(110 60 0 / 0.16);

  /* ---- Tipografia ---- */
  /* Marcellus richiama le capitali eleganti del logo; Manrope per la lettura. */
  --font-display: "Marcellus", "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.7rem, 1.25rem + 1.4vw, 2.3rem);
  --fs-h3: 1.4rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;

  /* ---- Forme: regola unica per tutto il sito ----
     bottoni/chip = pillola, card/foto = 24px, campi form = 12px */
  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-field: 12px;

  /* ---- Spaziature e layout ---- */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --section-space: clamp(2rem, 1.2rem + 2vw, 3rem);
  --container: 1240px;
  --header-h: 64px;

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.45s;

  /* ---- Livelli z-index (unica scala del progetto) ---- */
  --z-watermark: 0;
  --z-content: 1;
  --z-grain: 45;
  --z-header: 50;
  --z-fab: 60;
  --z-snackbar: 70;
  --z-dialog: 80;
}

/* ---- Tema scuro: segue le preferenze del sistema ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --md-primary-text: #ffb456;
    --md-primary-container: #4a2a00;
    --md-on-primary-container: #ffdcb5;

    --md-surface: #161513;
    --md-surface-container-low: #1c1a18;
    --md-surface-container: #22201d;
    --md-surface-container-high: #2c2925;
    --md-on-surface: #f4efe8;
    --md-on-surface-variant: #c6beb4;
    --md-outline: #463f37;
    --md-outline-strong: #9b9187;
    --md-error: #ffb4ab;
    --md-whatsapp: #4cd38a;

    --watermark-opacity: 0.07;
    --watermark-filter: invert(1);
    --grain-opacity: 0.12;

    --elev-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --elev-2: 0 4px 16px rgb(0 0 0 / 0.45);
    --elev-3: 0 16px 48px rgb(0 0 0 / 0.55);
  }
}