/* ============================================================
   DOMUS MARINA — Design Tokens
   Art direction: "Sale e Terracotta"
   Mediterraneo editoriale — neutri caldi, mare profondo, terracotta.
   Layer 1: primitivi → Layer 2: semantici → Layer 3: componenti
   ============================================================ */

/* ---------- Layer 1: Primitivi ---------- */
:root {
  /* Sabbia — la base calda su cui respira tutto */
  --sand-50:  #FBF9F5;
  --sand-100: #F5F1E9;
  --sand-200: #EAE3D6;
  --sand-300: #D9CFBC;
  --sand-400: #BFB29A;

  /* Pietra — testi secondari, bordi.
     stone-500 era #8A8072: misurato sul rendering dava 3.69:1 su sand-50,
     sotto il minimo di 4.5:1. Portato a #746C5D → 4.92:1 misurati.
     Serve davvero: lo usano le label a 12px maiuscolo, il caso peggiore. */
  --stone-500: #746C5D;
  --stone-600: #6B6355;
  --stone-700: #4A443A;

  /* Inchiostro — nero caldo, mai #000 */
  --ink-900: #1C1B18;
  --ink-800: #2A2823;

  /* Mare — il blu-verde profondo del Tirreno all'ombra */
  --sea-900: #0E3B3E;
  --sea-800: #14494C;
  --sea-700: #1B5B5E;
  --sea-300: #7FA9AA;

  /* Terracotta — l'accento caldo, usato con parsimonia */
  --terra-700: #8A5734;
  --terra-600: #96603A;
  --terra-500: #B0764A;
  --terra-300: #D9AE8A;

  /* Utilità */
  --white: #FFFFFF;
  --danger: #A8352B;
  --success: #2F6B4F;

  /* ---------- Tipografia ---------- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scala tipografica fluida — clamp(min, preferito, max) */
  --fs-xs:   0.75rem;                                  /* 12px — micro label */
  --fs-sm:   0.875rem;                                 /* 14px */
  --fs-base: 1.0625rem;                                /* 17px — corpo */
  --fs-lg:   clamp(1.125rem, 0.5vw + 1rem, 1.375rem);  /* 18→22 */
  --fs-xl:   clamp(1.5rem, 1.2vw + 1.1rem, 2rem);      /* 24→32 */
  --fs-2xl:  clamp(2rem, 2.4vw + 1.2rem, 3.25rem);     /* 32→52 */
  --fs-3xl:  clamp(2.5rem, 4.2vw + 1rem, 5rem);        /* 40→80 */
  --fs-4xl:  clamp(3rem, 7vw + 0.5rem, 8.5rem);        /* 48→136 — hero */

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.7;
  --lh-loose: 1.85;

  --track-label: 0.18em;   /* label maiuscoletto spaziato */
  --track-tight: -0.02em;

  /* ---------- Spazio — ritmo 4/8 ---------- */
  --sp-1: 0.25rem;   --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;      --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;      --sp-8: 4rem;     --sp-9: 6rem;
  --sp-10: 8rem;     --sp-11: 12rem;

  /* Ritmo verticale delle sezioni — fluido */
  --section-y: clamp(4.5rem, 9vw, 11rem);
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 82.5rem;      /* 1320px */
  --maxw-text: 38rem;   /* ~65-70 caratteri */

  /* ---------- Raggio ---------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-full: 999px;

  /* ---------- Elevazione — ombre calde, mai nere pure ---------- */
  --sh-1: 0 1px 2px rgba(28, 27, 24, 0.04), 0 2px 8px rgba(28, 27, 24, 0.04);
  --sh-2: 0 2px 6px rgba(28, 27, 24, 0.05), 0 12px 28px rgba(28, 27, 24, 0.07);
  --sh-3: 0 8px 24px rgba(28, 27, 24, 0.08), 0 32px 64px rgba(28, 27, 24, 0.12);

  /* ---------- Movimento ---------- */
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 620ms;
  --dur-reveal: 1100ms;
  --dur-cinema: 1600ms;

  /* Curve: entrata morbida, uscita rapida */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* expo.out — la firma */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* leggero overshoot */

  /* ---------- Z-index ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 40;
  --z-overlay: 60;
  --z-modal: 80;
  --z-cursor: 100;
  --z-loader: 1000;
}

/* ---------- Layer 2: Semantici ---------- */
:root {
  --bg: var(--sand-50);
  --bg-alt: var(--sand-100);
  --bg-deep: var(--sea-900);
  --surface: var(--white);

  /* Rapporti misurati sul rendering reale, non stimati a occhio. */
  --fg: var(--ink-900);          /* 16.38:1 su --bg */
  --fg-muted: var(--stone-600);  /*  5.64:1 su --bg */
  --fg-subtle: var(--stone-500); /*  4.92:1 su --bg */
  --fg-on-deep: var(--sand-50);  /* 12.1:1 su --sea-900 */
  --fg-on-deep-muted: rgba(251, 249, 245, 0.68);

  --accent: var(--terra-600);    /*  4.9:1 su --bg — usabile per testo */
  --accent-hover: var(--terra-700);
  --primary: var(--sea-900);     /* 12.3:1 con testo bianco */
  --primary-hover: var(--sea-800);

  --border: var(--sand-300);
  --border-strong: var(--sand-400);
  --border-on-deep: rgba(251, 249, 245, 0.22);

  --ring: var(--terra-600);
}

/* ---------- Layer 3: Componenti ---------- */
:root {
  --header-h: 5rem;
  --btn-h: 3rem;         /* 48px — sopra il minimo touch di 44 */
  --btn-px: 1.75rem;
  --input-h: 3.25rem;    /* 52px */
  --cursor-size: 12px;
  --cursor-size-hover: 56px;
}

@media (max-width: 48rem) {
  :root { --header-h: 4.25rem; }
}