/* =========================================================
   Pinetamare Azur — Design Tokens
   A holiday villa above the Ionian Sea, in a pine forest
   above Santa Caterina di Nardò, Salento.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Italiana&family=Inter:wght@300;400;500;600&display=swap");

/* Brand script — Amazone Regular. Used for the calligraphic
   wordmark, host signatures, and rare display flourishes. */
@font-face {
  font-family: "Amazone";
  src: url("../fonts/Amazone_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  /* The full palette is named after places & materials of the villa. */

  /* Azur — the deep Ionian sky/sea blue. The signature color. */
  --azur-900: #0a3a6b;        /* deepest, midnight Ionian */
  --azur-700: #144d8a;        /* hero blue, full-noon sky */
  --azur-500: #1f6cb8;        /* mid blue, water at depth */
  --azur-300: #6fa6d9;        /* hazy horizon */
  --azur-100: #d6e6f3;        /* sky-wash background */

  /* Calce — the whitewash on the villa walls. Warm whites. */
  --calce-50:  #fbf9f4;       /* page background, paper */
  --calce-100: #f5f1e8;       /* card wash, soft surface */
  --calce-200: #ebe4d4;       /* divider, faint shadow */
  --calce-300: #d9cfb9;       /* muted neutral */

  /* Pietra — the limestone steps & terracotta pavers. */
  --pietra-400: #c8b08a;      /* warm stone */
  --pietra-600: #9a7f55;      /* deeper sand */
  --pietra-800: #6b5436;      /* tobacco / shadowed wood */

  /* Pino — the Aleppo pine canopy surrounding the property. */
  --pino-700: #2f5d3e;        /* shadow under the pines */
  --pino-500: #4f8a5d;        /* sunlit canopy */
  --pino-300: #a8c4a8;        /* dusty olive, sage */

  /* Fico — the prickly-pear paddle (cactus light fixture). */
  --fico-500: #6b8e5a;        /* fico d'india green */

  /* Terra — the terracotta roof tiles & sunset. */
  --terra-600: #b86a3e;       /* roof terracotta */
  --terra-400: #d99873;       /* warm peach, golden hour */

  /* Ferro — the wrought iron beds, railings, and fixtures. */
  --ferro-900: #1a1a1a;       /* black iron */
  --ferro-700: #3a3a3a;       /* dark text */

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:            var(--calce-50);
  --bg-alt:        var(--calce-100);
  --surface:       #ffffff;
  --surface-warm:  var(--calce-100);
  --ink:           #1c2a3a;          /* primary text — deep blue-black */
  --ink-muted:     #5a6a7a;          /* secondary text */
  --ink-soft:      #8a96a4;          /* tertiary, captions */
  --rule:          var(--calce-200); /* hairlines, dividers */
  --rule-strong:   var(--calce-300);

  --accent:        var(--azur-700); /* primary brand accent */
  --accent-deep:   var(--azur-900);
  --accent-soft:   var(--azur-100);
  --accent-warm:   var(--terra-600);
  --accent-leaf:   var(--pino-700);

  /* Text on dark / azur surfaces */
  --on-azur:       var(--calce-50);
  --on-azur-muted: rgba(251, 249, 244, 0.72);

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-display: "Italiana", "Cormorant Garamond", "Didot", "Bodoni 72", serif;
  --font-serif:   "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif;
  --font-sans:    "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-script:  "Amazone", "Italiana", "Snell Roundhand", cursive; /* the brand script — Amazone, matches the hand-drawn logo */

  /* ---------- SCALE ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Long, low Mediterranean shadows — like noon sun on a white wall */
  --shadow-1: 0 1px 2px rgba(28, 42, 58, 0.06);
  --shadow-2: 0 6px 18px -6px rgba(28, 42, 58, 0.12), 0 2px 4px rgba(28, 42, 58, 0.05);
  --shadow-3: 0 24px 48px -20px rgba(28, 42, 58, 0.22), 0 4px 8px rgba(28, 42, 58, 0.06);
  /* Inset hairline used on whitewashed cards */
  --shadow-inset: inset 0 0 0 1px var(--rule);

  --max-w: 1180px;
  --measure: 64ch;

  /* Easings — slow, restful, like a sea breeze */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 280ms;
  --dur-slow: 540ms;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Editorial Italian villa: tall serif display, comfortable
   serif body for long copy, sans for UI.
   ========================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

p, .p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  max-width: var(--measure);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 56ch;
}

.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.4;
  color: var(--ink);
}

.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.numeric {
  font-variant-numeric: tabular-nums oldstyle-nums;
}

/* Brand script — Amazone. Used for host signatures, the wordmark
   and very occasional flourishes. Never for paragraphs. */
.signature {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.005em;
}