/* ============================================================
   CASA SGUBIN — Design Tokens
   B&B in centro a Cormons, sotto il Monte Quarin (FVG, Italia)
   ============================================================ */

/* Fonts are enqueued via functions.php (cs-google-fonts) */

:root {
  /* ---------- COLOR — Brand ----------------------------------
     Primary: "mattone" (brick) — official agency value #742E1C
     Secondary: "tortora" (dove/taupe) — official agency value #D1C6A7
     Both sourced from the live brand SVGs (RGB Comunicazione, 2024).
  */
  --mattone: #742e1c; /* official mattone — wordmark + headlines + key CTAs */
  --mattone-900: #3d1308; /* near-black brick */
  --mattone-800: #5a2114;
  --mattone-700: #742e1c; /* alias of --mattone */
  --mattone-600: #8e4530;
  --mattone-500: #a95b43; /* warm terracotta accent */
  --mattone-400: #c58068;

  --tortora: #d1c6a7; /* official tortora — keystone fill, dividers, surfaces */
  --tortora-700: #a89669;
  --tortora-600: #beae83;
  --tortora-500: #d1c6a7; /* alias of --tortora */
  --tortora-400: #dcd2b6;
  --tortora-300: #e5ddc8;
  --tortora-200: #efe9d9;
  --tortora-100: #f6f2e6; /* warm parchment surface */

  /* ---------- COLOR — Friulian landscape accents ------------
     A small, restrained accent set that echoes Collio terroir:
     vineyard greens, river-stone greys, soft cielo blue.
     Use sparingly — never as primary brand colors. */
  --collio: #6e7b4b; /* vineyard leaf */
  --collio-soft: #a8b083;
  --ocra: #c29348; /* ocra friulana — toasted earth, late-summer fields */
  --ocra-soft: #d9b57a;
  --pietra: #8b8073; /* friulian river stone */
  --cielo: #b8c7cc; /* pale Friulian sky / morning haze */
  --vino: #5a1a1a; /* aged ribolla red, for rare accent */

  /* ---------- COLOR — Surface & neutral ---------------------
     "Carta" — the uncoated beige paper that holds the brand. */
  --carta: #f6f1e4; /* warm cream — page background */
  --carta-pure: #fbf8ee; /* lightest surface */
  --carta-deep: #ece4d0; /* card / inset surface */
  --carta-border: #ddd3b8; /* hairline on cream */

  --bianco: #ffffff;
  --nero: #1a0f0a; /* never pure black; a warm near-black */
  --nero-soft: #2c1f18;

  /* ---------- COLOR — Semantic foreground -------------------*/
  --fg-1: var(--mattone-900); /* primary text — deep brick */
  --fg-2: #4d362c; /* secondary text */
  --fg-3: #7a6a5e; /* tertiary text / captions */
  --fg-muted: var(--pietra);
  --fg-on-dark: var(--carta);
  --fg-on-mattone: var(--tortora-100);

  --bg-1: var(--carta);
  --bg-2: var(--carta-pure);
  --bg-card: var(--bianco);
  --bg-inset: var(--carta-deep);
  --bg-dark: var(--mattone);

  --border-hairline: var(--carta-border);
  --border-soft: rgba(45, 7, 3, 0.1);
  --border-strong: rgba(45, 7, 3, 0.22);

  /* ---------- COLOR — Status (rarely-used) ------------------*/
  --success: #6e7b4b; /* echoes Collio green */
  --warning: #b8722a; /* warm ochre */
  --error: #8b2a1f; /* matches brand brick */
  --info: #5a6b70; /* slate */

  /* ---------- TYPE — Families -------------------------------
     Display: Cormorant Garamond — high-contrast serif with a
              luscious italic. Closest free analog to the
              custom serif used in the SGUBIN wordmark and the
              italic "casa". *Flag: substitution from a custom
              cut; the live wordmark is supplied as a PNG.*
     Body:    DM Sans — warm geometric sans, friendly + readable.
              Replaces the unidentified neutral sans used in
              the brand-book chrome. */
  --font-display:
    "Cormorant Garamond", "Cormorant", Garamond, "Hoefler Text", Georgia, serif;
  --font-display-italic:
    "Cormorant Garamond", "Cormorant Italic", Garamond, "Hoefler Text", Georgia,
    serif;
  --font-body:
    "DM Sans", "Söhne", "Inter Tight", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --font-mono:
    "DM Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE — Scale ----------------------------------
     A generous 1.250 (major-third) scale, slightly compressed
     at the very top to keep room for the long serif descenders. */
  --fs-12: 0.75rem; /* 12px — micro/eyebrow */
  --fs-14: 0.875rem; /* 14px — caption */
  --fs-16: 1rem; /* 16px — body */
  --fs-18: 1.125rem; /* 18px — lead */
  --fs-20: 1.25rem; /* 20px */
  --fs-24: 1.5rem; /* 24px — H6 */
  --fs-28: 1.75rem; /* 28px — H5 */
  --fs-32: 2rem; /* 32px — H4 */
  --fs-40: 2.5rem; /* 40px — H3 */
  --fs-52: 3.25rem; /* 52px — H2 */
  --fs-68: 4.25rem; /* 68px — H1 / hero */
  --fs-92: 5.75rem; /* 92px — display */
  --fs-128: 8rem; /* 128px — XXL editorial */

  /* ---------- TYPE — Line heights ---------------------------*/
  --lh-tight: 1.05;
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.55;
  --lh-loose: 1.75;

  /* ---------- TYPE — Letter spacing -------------------------*/
  --ls-eyebrow: 0.18em; /* uppercase eyebrow / nav */
  --ls-tight: -0.02em;
  --ls-display: -0.015em;
  --ls-body: 0;
  --ls-caps: 0.06em;

  /* ---------- TYPE — Weights --------------------------------*/
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ---------- SPACING ---------------------------------------*/
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ---------- RADII -----------------------------------------
     The brand uses very gentle, hand-feeling rounds.
     Pill radius is reserved for chips/tags only. */
  --r-0: 0;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-2xl: 32px;
  --r-pill: 999px;
  --r-arch: 50% 50% 6px 6px / 60% 60% 6px 6px; /* the keystone-arch shape */

  /* ---------- SHADOWS ---------------------------------------
     Warm shadows — never pure black; tinted with mattone. */
  --shadow-xs: 0 1px 2px rgba(116, 46, 28, 0.04);
  --shadow-sm:
    0 2px 6px rgba(116, 46, 28, 0.06), 0 1px 2px rgba(116, 46, 28, 0.04);
  --shadow-md:
    0 8px 24px -8px rgba(116, 46, 28, 0.12), 0 2px 6px rgba(116, 46, 28, 0.06);
  --shadow-lg:
    0 24px 48px -16px rgba(116, 46, 28, 0.18),
    0 4px 12px rgba(116, 46, 28, 0.08);
  --shadow-xl:
    0 40px 80px -24px rgba(116, 46, 28, 0.24), 0 8px 20px rgba(116, 46, 28, 0.1);
  --shadow-inset: inset 0 1px 2px rgba(116, 46, 28, 0.08);

  /* ---------- MOTION ----------------------------------------*/
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* friendly settle */
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-warm: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-page: 720ms;

  /* ---------- LAYOUT ----------------------------------------*/
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(64px, 9vw, 128px);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these tokens by name; never re-set font-family or size
   inline unless designing something truly new.
   ============================================================ */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-3);
}

.h-display {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.h1 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(2.5rem, 5.5vw, var(--fs-68));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(2rem, 4.2vw, var(--fs-52));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: clamp(1.625rem, 3vw, var(--fs-40));
  line-height: var(--lh-heading);
  color: var(--fg-1);
}

.h4 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}

.h5 {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.h6 {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-16);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-2);
}

.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: clamp(1.25rem, 2.2vw, var(--fs-28));
  line-height: var(--lh-heading);
  color: var(--fg-2);
}

.body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg-3);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: 1.45;
  color: var(--fg-3);
}

.frase {
  /* "Frasi" — the brand's signature short Italian phrases.
     Always italic display serif, warm mattone color. */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: clamp(1.5rem, 3vw, var(--fs-40));
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--mattone);
}

.wordmark {
  /* Approximates the SGUBIN custom serif when the PNG isn't an option */
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mattone);
}

.wordmark-casa {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-regular);
  text-transform: lowercase;
  color: var(--mattone);
}

/* Element defaults ------------------------------------------ */
html,
body {
  background: var(--bg-1);
  color: var(--fg-2);
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}
h1 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(2.5rem, 5.5vw, var(--fs-68));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}