/* ============================================================
   LORICALY — DESIGN SYSTEM
   Material Design 3 tokens, marca "connessione naturale"
   Font: Exo (variable). Palette: petrolio + lime.
   ============================================================ */

/* ---------- Font ---------- */
@font-face {
  font-family: "Exo";
  src: url("../fonts/Exo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo";
  src: url("../fonts/Exo-Italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* =========================================================
     1. COLORE — ruoli MD3
     Seed primario: petrolio Loricaly (#0E6B5A)
     Seed secondario: lime Loricaly (#9FBE1E)
     ========================================================= */

  /* Primario (petrolio) */
  --md-primary:            #0E6B5A;
  --md-on-primary:         #FFFFFF;
  --md-primary-container:  #A8F2DD;
  --md-on-primary-container:#00201A;
  --md-primary-fixed-dim:  #2A8C79;

  /* Secondario (lime — natura) */
  --md-secondary:           #4F6356;
  --md-on-secondary:        #FFFFFF;
  --md-secondary-container: #D2E8D8;
  --md-on-secondary-container:#0C1F16;

  /* Terziario (legno/sabbia — caldo, dalle camere) */
  --md-tertiary:            #8A6A2F;
  --md-on-tertiary:         #FFFFFF;
  --md-tertiary-container:  #F2DEB4;
  --md-on-tertiary-container:#2C1D00;

  /* Lime accento (display / signature) */
  --lime:        #B7D32B;
  --lime-deep:   #8FB015;
  --lime-soft:   #EAF3C7;

  /* Errore */
  --md-error:           #BA1A1A;
  --md-on-error:        #FFFFFF;
  --md-error-container: #FFDAD6;

  /* Superfici (tinta verde calda) */
  --md-background:          #FBFDF9;
  --md-surface:             #FBFDF9;
  --md-on-surface:          #191C1A;
  --md-on-surface-variant:  #404943;
  --md-surface-dim:         #DBDED8;
  --md-surface-bright:      #FBFDF9;
  --md-surface-container-lowest:#FFFFFF;
  --md-surface-container-low:   #F5F7F1;
  --md-surface-container:       #EFF1EC;
  --md-surface-container-high:  #E9EBE6;
  --md-surface-container-highest:#E3E5E0;

  /* Contorni */
  --md-outline:         #707972;
  --md-outline-variant: #C0C9C0;

  /* Inverso (toast / snackbar) */
  --md-inverse-surface:   #2E312F;
  --md-inverse-on-surface:#EFF1EC;

  /* Signature gradient — il logo "connessione" */
  --grad-brand: linear-gradient(135deg, #C3D82E 0%, #6FBF6A 38%, #129E84 70%, #0E6B5A 100%);
  --grad-brand-soft: linear-gradient(135deg, #EAF3C7 0%, #CDEAD9 100%);
  --grad-dark: linear-gradient(160deg, #0E6B5A 0%, #0A4F43 60%, #08362E 100%);

  /* State layer opacity (MD3) */
  --state-hover:   0.08;
  --state-focus:   0.10;
  --state-press:   0.10;

  /* =========================================================
     2. TIPOGRAFIA — scala MD3 con Exo
     ========================================================= */
  --font: "Exo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Display */
  --type-display-l: 800 clamp(2.8rem, 6vw, 4.25rem)/1.04 var(--font);
  --type-display-m: 700 clamp(2.3rem, 5vw, 3.1rem)/1.08 var(--font);
  --type-display-s: 700 clamp(2rem, 4vw, 2.4rem)/1.12 var(--font);
  /* Headline */
  --type-headline-l: 700 clamp(1.7rem, 3.2vw, 2rem)/1.18 var(--font);
  --type-headline-m: 600 1.55rem/1.22 var(--font);
  --type-headline-s: 600 1.3rem/1.28 var(--font);
  /* Title */
  --type-title-l: 600 1.32rem/1.3 var(--font);
  --type-title-m: 600 1.05rem/1.4 var(--font);
  --type-title-s: 600 0.9rem/1.4 var(--font);
  /* Body */
  --type-body-l: 400 1.05rem/1.6 var(--font);
  --type-body-m: 400 0.94rem/1.55 var(--font);
  --type-body-s: 400 0.8rem/1.5 var(--font);
  /* Label */
  --type-label-l: 600 0.94rem/1.2 var(--font);
  --type-label-m: 600 0.8rem/1.2 var(--font);
  --type-label-s: 600 0.7rem/1.2 var(--font);

  --track-display: -0.02em;
  --track-tight:   -0.01em;
  --track-label:    0.01em;

  /* =========================================================
     3. FORMA — shape scale MD3
     ========================================================= */
  --shape-xs:  4px;
  --shape-s:   8px;
  --shape-m:   12px;
  --shape-l:   16px;
  --shape-xl:  28px;
  --shape-2xl: 36px;
  --shape-full: 999px;

  /* =========================================================
     4. ELEVAZIONE — MD3 (5 livelli)
     ========================================================= */
  --el-0: none;
  --el-1: 0 1px 2px rgba(0,32,26,.30), 0 1px 3px 1px rgba(0,32,26,.12);
  --el-2: 0 1px 2px rgba(0,32,26,.30), 0 2px 6px 2px rgba(0,32,26,.12);
  --el-3: 0 1px 3px rgba(0,32,26,.30), 0 4px 8px 3px rgba(0,32,26,.13);
  --el-4: 0 2px 3px rgba(0,32,26,.30), 0 6px 10px 4px rgba(0,32,26,.13);
  --el-5: 0 4px 4px rgba(0,32,26,.30), 0 8px 12px 6px rgba(0,32,26,.14);

  /* =========================================================
     5. MOTION — MD3 easing/durate
     ========================================================= */
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-emphasized: cubic-bezier(.2,0,0,1);
  --ease-decelerate: cubic-bezier(0,0,0,1);
  --dur-short: 180ms;
  --dur-med: 280ms;
  --dur-long: 420ms;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --appbar-h: 68px;
  --bottomnav-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}