/* =====================================================================
   PLAWA LAGUNA BALI — Design Foundations
   Colors + Typography tokens
   ---------------------------------------------------------------------
   Boutique villa hotel, Pererenan, Bali. "The oasis of tranquility
   & design." Warm, refined, calm, tropical-modern.
   ===================================================================== */

/* ----------------------------- FONTS -------------------------------- */
/* All brand LICENSED typefaces, fully self-hosted:                     */
/*   Display  : Ivy Ora Display  (Light/Regular/Medium/SemiBold + Italic)*/
/*   Wordmark : Calypso          (logo + hotel-name lockup)             */
/*   Body     : HK Grotesk       (Light…Black + matching italics)        */

/* — Ivy Ora Display (headings, pull-quotes) — */
@font-face {
  font-family: "Ivy Ora Display";
  src: url("fonts/IvyOraDisplay-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ivy Ora Display";
  src: url("fonts/IvyOraDisplay-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ivy Ora Display";
  src: url("fonts/IvyOraDisplay-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ivy Ora Display";
  src: url("fonts/IvyOraDisplay-SemiBold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ivy Ora Display";
  src: url("fonts/IvyOraDisplay-Italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* — Calypso (wordmark / hotel name) — */
@font-face {
  font-family: "Calypso";
  src: url("fonts/Calypso.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* — HK Grotesk (body + UI) — full family, self-hosted — */
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-LightItalic.woff") format("woff");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-MediumItalic.woff") format("woff");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-SemiBold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-SemiBoldItalic.woff") format("woff");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-BoldItalic.woff") format("woff");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-ExtraBold.woff") format("woff");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Black.woff") format("woff");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ============================ COLOR ============================== */
  /* — Brand core (from Brand Book + logo) — */
  --terracotta:        #C2742C;  /* logo mark / primary accent          */
  --terracotta-deep:   #A35E20;  /* hover / pressed accent              */
  --terracotta-soft:   #D9A06A;  /* lighter accent, hairlines on dark   */
  --terracotta-wash:   #F1E3D3;  /* terracotta tint surface             */

  --sand:              #C3B79D;  /* brand neutral 1 — warm taupe         */
  --sand-deep:         #A89A7C;  /* darker sand, borders on cream        */
  --sage:              #98A49B;  /* brand neutral 2 — muted eucalyptus   */
  --sage-deep:         #76837A;  /* darker sage                          */

  --ink:               #1F1C17;  /* brand black, warmed — primary text   */
  --white:             #FFFFFF;

  /* — Warm neutral ramp (derived; cream-forward) — */
  --cream:             #F7F2E9;  /* default page background              */
  --cream-2:           #EFE7D9;  /* alt section background               */
  --shell:             #FBF8F2;  /* card / raised surface on cream       */
  --linen:             #E7DDCB;  /* hairline dividers, quiet fills       */

  /* — Semantic foreground — */
  --fg-1:              var(--ink);          /* headings + primary body   */
  --fg-2:              #5A554B;             /* secondary / supporting    */
  --fg-3:              #8C8576;             /* tertiary / captions, meta */
  --fg-on-dark:        #F4EFE6;             /* text on ink / photos      */
  --fg-on-dark-2:      #C9C1B2;             /* secondary on dark         */

  /* — Semantic background / surface — */
  --bg:                var(--cream);
  --bg-alt:            var(--cream-2);
  --surface:           var(--shell);
  --surface-sand:      var(--sand);
  --surface-ink:       var(--ink);

  /* — Lines & accents — */
  --border:            #DED3BF;             /* default 1px line on cream */
  --border-strong:     #C8BBA0;
  --border-on-dark:    rgba(244,239,230,0.22);
  --accent:            var(--terracotta);
  --link:              var(--terracotta-deep);
  --focus-ring:        rgba(194,116,44,0.45);

  /* ============================ TYPE ============================== */
  --font-display: "Ivy Ora Display", Georgia, "Times New Roman", serif;
  --font-body:    "HK Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The wordmark / hotel-name lockup ("PLAWA LAGUNA BALI") uses Calypso. */
  --font-wordmark: "Calypso", "Ivy Ora Display", Georgia, serif;

  /* — Fluid display scale (Ivy Ora Display; generous, airy) — */
  --t-display: 400 clamp(3.2rem, 7vw, 6rem)/1.02 var(--font-display);
  --t-h1:      400 clamp(2.6rem, 4.6vw, 4rem)/1.07 var(--font-display);
  --t-h2:      400 clamp(2rem, 3.2vw, 2.9rem)/1.12 var(--font-display);
  --t-h3:      500 clamp(1.5rem, 2.1vw, 1.95rem)/1.2 var(--font-display);
  --t-quote:   400 italic clamp(1.6rem, 2.8vw, 2.5rem)/1.3 var(--font-display);

  /* — Body scale (Hanken Grotesk) — */
  --t-lead:    400 clamp(1.075rem, 1.35vw, 1.3rem)/1.62 var(--font-body);
  --t-body:    400 1rem/1.68 var(--font-body);
  --t-small:   400 0.875rem/1.6 var(--font-body);
  --t-caption: 500 0.78rem/1.5 var(--font-body);

  /* — Eyebrow / overline: tracked grotesk caps — */
  --t-eyebrow: 500 0.74rem/1.4 var(--font-body);
  --track-eyebrow: 0.26em;
  --track-wordmark: 0.34em;   /* "PLAWA LAGUNA BALI" lockup */
  --track-button:  0.12em;

  /* ========================= RADIUS / SHADOW ====================== */
  /* Architectural arches + soft furnishings → gentle, organic radii   */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 34px;
  --r-arch: 999px 999px 14px 14px;  /* villa archway top */
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(31,28,23,0.05);
  --shadow-sm: 0 2px 8px rgba(31,28,23,0.06);
  --shadow-md: 0 10px 30px -12px rgba(31,28,23,0.18);
  --shadow-lg: 0 30px 60px -24px rgba(31,28,23,0.28);
  --shadow-img: 0 24px 50px -20px rgba(31,28,23,0.34);

  /* =========================== SPACING ============================ */
  /* 4px base unit */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 176px;

  /* =========================== MOTION ============================= */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* calm ease-out      */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 180ms;   /* micro: hover color/opacity */
  --dur-2: 320ms;   /* standard: reveal, lift     */
  --dur-3: 600ms;   /* image / hero fades         */

  --maxw: 1240px;   /* content container */
  --maxw-text: 64ch;
}

/* ----------------------- SEMANTIC ELEMENTS -------------------------- */
.plb-display { font: var(--t-display); letter-spacing: -0.01em; color: var(--fg-1); margin: 0; }
.plb-h1 { font: var(--t-h1); color: var(--fg-1); margin: 0; }
.plb-h2 { font: var(--t-h2); color: var(--fg-1); margin: 0; }
.plb-h3 { font: var(--t-h3); color: var(--fg-1); margin: 0; }
.plb-quote { font: var(--t-quote); color: var(--fg-1); margin: 0; }

.plb-lead { font: var(--t-lead); color: var(--fg-2); margin: 0; }
.plb-body { font: var(--t-body); color: var(--fg-2); margin: 0; }
.plb-small { font: var(--t-small); color: var(--fg-3); margin: 0; }

.plb-eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0;
}
.plb-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 500;
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  color: var(--fg-1);
  line-height: 1;
}