/* =============================================================
   Suite Farnese — Design System Foundations
   Modern · architectural · crisp white + ink + one accent
   ============================================================= */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- Brand palette ---------- */
  /* Anchored to the heart in the logo (#ad5142) but pushed slightly fresher
     so it reads contemporary, not antique. */
  --sf-terracotta:        #C44A3A;  /* primary brand accent */
  --sf-terracotta-deep:   #9E3527;  /* hover state, deeper press */
  --sf-terracotta-soft:   #E8B9B1;  /* tint, subtle backgrounds */

  /* Neutrals — paper-white + warm gray, NOT beige */
  --sf-bone:              #FAFAF8;  /* primary page background — paper white */
  --sf-cream:             #F1F0EB;  /* secondary band — warm light gray */
  --sf-parchment:         #E3E0D7;  /* deeper warm gray, dividers */

  /* Ink */
  --sf-ink:               #0F0E0C;  /* primary text — near black, slightly warm */
  --sf-ink-2:             #3F3D38;  /* secondary text */
  --sf-ink-3:             #8A8780;  /* tertiary / meta */
  --sf-line:              rgba(15, 14, 12, 0.10);  /* hairline borders */
  --sf-line-strong:       rgba(15, 14, 12, 0.28);

  /* Natural accents (sparing use) */
  --sf-sage:              #8FA68B;
  --sf-sage-deep:         #5F7A5C;
  --sf-olive:             #6E6A3E;
  --sf-stone:             #B7AC97;
  --sf-sky:               #7FA3C7;
  --sf-vico:              #2B5A7F;

  /* Functional */
  --sf-white:             #FFFFFF;
  --sf-overlay:           rgba(15, 14, 12, 0.55);
  --sf-overlay-soft:      rgba(15, 14, 12, 0.30);

  /* ---------- Type families ---------- */
  /* One font for everything, opsz axis for hierarchy. */
  --sf-font-display:      'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --sf-font-body:         'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Single serif accent — used ONLY for the brand-name wordmark and apartment names. */
  --sf-font-serif:        'Instrument Serif', 'Times New Roman', serif;
  --sf-font-mono:         ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale ---------- */
  /* — Scala tipografica — */
  --sf-fs-hero:           clamp(64px, 10vw, 168px);    /* Cinematic hero */
  --sf-fs-display:        clamp(44px, 6.6vw, 100px);   /* Titoli sezione */
  --sf-fs-h1:             clamp(36px, 4.6vw, 68px);    /* Titolo pagina */
  --sf-fs-h2:             clamp(26px, 2.8vw, 40px);    /* Sezione / modal */
  --sf-fs-h3:             clamp(20px, 1.6vw, 24px);    /* Sotto-sezione */
  --sf-fs-lede:           clamp(18px, 1.4vw, 22px);    /* Intro paragrafo */
  --sf-fs-sub:            16px;                         /* Sottotitolo componente */
  --sf-fs-body:           17px;                         /* Testo corrente */
  --sf-fs-small:          14px;                         /* Didascalia / spec */
  --sf-fs-micro:          12px;                         /* Label / eyebrow */
  /* — Taglie speciali — */
  --sf-fs-page-hero:      clamp(52px, 7vw, 104px);     /* Hero pagine interne */
  --sf-fs-apt-name:       clamp(48px, 5.4vw, 84px);    /* Nome appartamento (serif) */
  --sf-fs-stat:           clamp(44px, 5vw, 64px);       /* Numero statistica */
  --sf-fs-wordmark:       clamp(72px, 14vw, 220px);    /* Wordmark footer */

  --sf-lh-display:        0.96;
  --sf-lh-heading:        1.04;
  --sf-lh-body:           1.45;
  --sf-lh-tight:          1.2;

  --sf-tracking-eyebrow:  0.12em;
  --sf-tracking-display:  -0.035em;
  --sf-tracking-body:     -0.005em;

  /* ---------- Spacing scale (8px base) ---------- */
  --sf-s-1:  4px;
  --sf-s-2:  8px;
  --sf-s-3:  12px;
  --sf-s-4:  16px;
  --sf-s-5:  24px;
  --sf-s-6:  32px;
  --sf-s-7:  48px;
  --sf-s-8:  64px;
  --sf-s-9:  96px;
  --sf-s-10: 128px;
  --sf-s-11: 192px;

  --sf-section-y:         clamp(96px, 11vw, 180px);
  --sf-gutter:            clamp(20px, 4vw, 56px);

  /* ---------- Radii ---------- */
  --sf-r-none:   0;
  --sf-r-xs:     2px;
  --sf-r-sm:     4px;
  --sf-r-md:     8px;
  --sf-r-pill:   999px;

  /* ---------- Shadows ---------- */
  --sf-shadow-1: 0 1px 2px rgba(15, 14, 12, 0.06);
  --sf-shadow-2: 0 8px 24px -8px rgba(15, 14, 12, 0.12);
  --sf-shadow-3: 0 24px 60px -20px rgba(15, 14, 12, 0.22);

  /* ---------- Motion ---------- */
  --sf-ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --sf-ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
  --sf-dur-1:          160ms;
  --sf-dur-2:          280ms;
  --sf-dur-3:          520ms;
  --sf-dur-cinematic:  900ms;

  /* ---------- Z-index ---------- */
  --sf-z-base:    1;
  --sf-z-sticky: 50;
  --sf-z-nav:    1000;
  --sf-z-modal:  2000;
  --sf-z-toast:  3000;
}

/* ============================================================
   Semantic typography roles
   ============================================================ */

.sf-eyebrow {
  font-family: var(--sf-font-body);
  font-size: var(--sf-fs-micro);
  font-weight: 500;
  letter-spacing: var(--sf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sf-ink-2);
}

.sf-hero {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: var(--sf-fs-hero);
  line-height: var(--sf-lh-display);
  letter-spacing: var(--sf-tracking-display);
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  text-wrap: balance;
}

.sf-display {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: var(--sf-fs-display);
  line-height: var(--sf-lh-display);
  letter-spacing: var(--sf-tracking-display);
  font-variation-settings: 'opsz' 96;
  text-wrap: balance;
}

.sf-h1 {
  font-family: var(--sf-font-display);
  font-weight: 600;
  font-size: var(--sf-fs-h1);
  line-height: var(--sf-lh-heading);
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 60;
  text-wrap: balance;
}

.sf-h2 {
  font-family: var(--sf-font-display);
  font-weight: 600;
  font-size: var(--sf-fs-h2);
  line-height: var(--sf-lh-heading);
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 40;
  text-wrap: balance;
}

.sf-h3 {
  font-family: var(--sf-font-body);
  font-weight: 500;
  font-size: var(--sf-fs-h3);
  line-height: var(--sf-lh-tight);
  letter-spacing: -0.01em;
}

.sf-lede {
  font-family: var(--sf-font-body);
  font-weight: 400;
  font-size: var(--sf-fs-lede);
  line-height: var(--sf-lh-body);
  color: var(--sf-ink-2);
  text-wrap: pretty;
  letter-spacing: -0.005em;
}

.sf-sub {
  font-family: var(--sf-font-body);
  font-weight: 400;
  font-size: var(--sf-fs-sub);
  line-height: var(--sf-lh-body);
  color: var(--sf-ink-2);
  text-wrap: pretty;
}

.sf-body {
  font-family: var(--sf-font-body);
  font-weight: 300;
  font-size: var(--sf-fs-body);
  line-height: var(--sf-lh-body);
  color: var(--sf-ink-2);
  text-wrap: pretty;
}

.sf-small {
  font-family: var(--sf-font-body);
  font-size: var(--sf-fs-small);
  line-height: var(--sf-lh-body);
  color: var(--sf-ink-3);
}

.sf-meta {
  font-family: var(--sf-font-body);
  font-size: var(--sf-fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-ink-3);
}

/* Serif italic — reserved for the brand-name wordmark + apartment names.
   Use sparingly. NEVER as a default headline style. */
.sf-serif-italic {
  font-family: var(--sf-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}