/* ============================================================
   Kiesl Heilmassage — Colors & Typography
   ============================================================
   Brand colors come directly from the embroidered Latvian cross
   that hangs on the door of the practice (logo-hires.png).
   Brick red + warm taupe gray on a warm off-white linen ground.
============================================================ */

/* Fonts. Cormorant Garamond (display serif), Inter (body sans),
   Allura (founder-signature script). All Google Fonts. */
/* Google Fonts @import removed — fonts are self-hosted, see fonts.css */

:root {
  /* ---------- Brand colors (sampled from logo) ---------- */
  --brand-red:        #84312b;  /* the cross */
  --brand-red-deep:   #5e231f;  /* hover / pressed */
  --brand-red-soft:   #a85048;  /* highlights, accents */
  --brand-red-wash:   #f3e7e4;  /* tints, backgrounds */

  --brand-taupe:      #8e8884;  /* the chevron arrows */
  --brand-taupe-deep: #5d5854;  /* body text */
  --brand-taupe-soft: #b8b1ab;  /* dividers, captions */
  --brand-taupe-wash: #ece8e3;  /* card backgrounds */

  /* ---------- Neutral palette (warm) ---------- */
  --ink:        #2b2724;       /* near-black, with warmth */
  --ink-soft:   #4a433e;       /* secondary text */
  --linen:      #f6f1e8;       /* page background, the "paper" */
  --linen-deep: #ede5d6;       /* card on linen */
  --paper:      #fbf8f2;       /* lighter than linen */
  --bone:       #ffffff;       /* clean white surface */

  /* ---------- Semantic ---------- */
  --fg-1:       var(--ink);
  --fg-2:       var(--brand-taupe-deep);
  --fg-3:       var(--brand-taupe);
  --fg-muted:   var(--brand-taupe-soft);
  --fg-accent:  var(--brand-red);

  --bg-page:    var(--linen);
  --bg-card:    var(--paper);
  --bg-raised:  var(--bone);
  --bg-accent:  var(--brand-red);
  --bg-tint:    var(--brand-red-wash);

  --border:        #d9d2c5;
  --border-strong: #c2b8a7;
  --divider:       #e5dfd1;

  /* ---------- Typography ---------- */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-script:  "Allura", "Brush Script MT", cursive;

  /* Type scale — generous, calm */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  38px;
  --text-3xl:  54px;
  --text-4xl:  72px;
  --text-5xl:  96px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.16em; /* used on small caps labels */

  /* ---------- Spacing ---------- */
  --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;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---------- Shadows — soft, paper-like ---------- */
  --shadow-sm: 0 1px 2px rgba(60, 45, 35, 0.06);
  --shadow-md: 0 4px 14px rgba(60, 45, 35, 0.08);
  --shadow-lg: 0 12px 40px rgba(60, 45, 35, 0.12);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}

/* ============================================================
   Semantic element styles — drop in to inherit defaults
============================================================ */

.ds-page {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds h1, .ds-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.ds h2, .ds-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.ds h3, .ds-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}
.ds h4, .ds-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.ds p, .ds-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  margin: 0;
}
.ds-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.ds-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-accent);
}
.ds-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.ds-signature {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--text-2xl);
  color: var(--brand-red);
  line-height: 1;
}
.ds-price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

/* Simple horizontal rule used in headings/labels — see price sheet reference */
.ds-rule {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: var(--space-5) 0;
}