/* =====================================================================
   Claudia Eckl · Cranio Sacrale Therapie — Design Tokens
   Reduziert, unaufdringlich, sehr hohe Qualität
   ===================================================================== */

/* ---- Fonts ----------------------------------------------------------
   - Cinzel — the actual wordmark face, served locally from /fonts.
   - Cormorant Garamond — Google Fonts substitute for the long-form
     serif (body, headings, italic strapline). FLAG: still a guess.
   - Inter — micro-meta sans only. FLAG: still a guess.
   ------------------------------------------------------------------- */

/* Local Cinzel — variable font covers weights 400–900 */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/Cinzel-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Cinzel-VariableFont_wght.ttf') format('truetype');
}

/* Companion families still pulled from Google — substitution flagged in README */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
  /* =================================================================
     COLOR — gold + warm neutrals + white
     The gold is the only chromatic colour in the system. Everything
     else is a warm off-white / cream / sand. Saturated colour is
     a brand violation.
     ================================================================= */

  /* Brand gold — sampled from logo */
  --gold:           #B89968;   /* primary gold — wordmark, dividers, accents */
  --gold-soft:      #C9B088;   /* hover / secondary gold */
  --gold-deep:      #8E7240;   /* pressed / focus, only when contrast is required */
  --gold-tint:      #EFE6D4;   /* gold at ~15% on cream — chips, hairlines */

  /* Warm neutrals — the canvas */
  --ivory:          #FBF8F3;   /* default page background */
  --cream:          #F4ECE0;   /* alternate section background */
  --sand:           #E8DCC8;   /* card / panel fill */
  --linen:          #D9CDB6;   /* deeper warm tone — rare */
  --mist:           #EFEAE2;   /* divider / faint surface */

  /* Foregrounds — never pure black */
  --fg:             #2E2A24;   /* primary text — warm near-black */
  --fg-muted:       #6B6256;   /* body text */
  --fg-soft:        #8E8676;   /* meta, captions */
  --fg-faint:       #B8AE9C;   /* placeholders, disabled */
  --white:          #FFFFFF;
  --black:          #1A1714;

  /* Semantic — kept neutral, never bright */
  --line:           rgba(46, 42, 36, 0.10);     /* hairlines */
  --line-strong:    rgba(46, 42, 36, 0.18);
  --line-gold:      rgba(184, 153, 104, 0.35);
  --overlay:        rgba(46, 42, 36, 0.55);     /* photo overlay */
  --overlay-soft:   rgba(46, 42, 36, 0.25);

  /* =================================================================
     TYPE — base
     ================================================================= */
  --font-display:   'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
  --font-serif:     'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  --font-sans:      'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Scale — generous, airy */
  --fs-display:     clamp(48px, 6vw, 88px); /* @kind font */ /* hero */
  --fs-h1:          clamp(36px, 4vw, 56px); /* @kind font */
  --fs-h2:          clamp(28px, 3vw, 40px); /* @kind font */
  --fs-h3:          22px; /* @kind font */
  --fs-h4:          18px; /* @kind font */
  --fs-body:        17px; /* @kind font */
  --fs-body-lg:     19px; /* @kind font */
  --fs-meta:        13px; /* @kind font */
  --fs-micro:       11px; /* @kind font */

  /* Leading + tracking */
  --lh-tight:       1.1; /* @kind font */
  --lh-display:     1.15; /* @kind font */
  --lh-heading:     1.25; /* @kind font */
  --lh-body:        1.65; /* @kind font */
  --tracking-wide:  0.18em; /* @kind font */ /* the signature spacing on caps */
  --tracking-meta:  0.24em; /* @kind font */ /* meta labels, eyebrow */
  --tracking-norm:  0.01em; /* @kind font */

  /* =================================================================
     SPACING — 8pt grid, generous
     ================================================================= */
  --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;
  --space-11: 160px;

  /* =================================================================
     RADII — soft, never aggressive
     ================================================================= */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-pill:  999px;
  --radius-circle: 50%;

  /* =================================================================
     SHADOWS — light, like overcast daylight
     ================================================================= */
  --shadow-xs:  0 1px 2px rgba(46, 42, 36, 0.04);
  --shadow-sm:  0 2px 8px rgba(46, 42, 36, 0.05);
  --shadow-md:  0 8px 24px rgba(46, 42, 36, 0.06);
  --shadow-lg:  0 24px 60px rgba(46, 42, 36, 0.08);

  /* =================================================================
     MOTION
     ================================================================= */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.55, 0.05, 0.67, 0.19); /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   180ms; /* @kind other */
  --dur-base:   320ms; /* @kind other */
  --dur-slow:   600ms; /* @kind other */
  --dur-vslow:  1200ms; /* @kind other */ /* full-bleed photo fades */
}

/* =====================================================================
   SEMANTIC ELEMENT DEFAULTS
   ===================================================================== */

html, body {
  background: var(--ivory);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — wordmark style, all caps, wide-tracked */
.display, h1.display, .wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}

/* Headings — Cormorant serif, light weight, gentle */
h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-norm);
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-norm);
  color: var(--fg);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--fg);
  margin: 0;
}

/* Eyebrow / meta label — the small uppercase signal used above titles */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  color: var(--gold);
}

/* Body */
p, .body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg-muted);
  margin: 0;
}

.body-lg {
  font-size: var(--fs-body-lg);
  color: var(--fg-muted);
  line-height: 1.6;
}

/* Italic pull-quote / strapline (e.g. the "Diplomierte Cranio Sacral Praktikerin") */
.strapline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--gold);
}

/* Meta — Inter sans, very sparing */
.meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
}

a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--line-gold);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }

/* Thin gold rule — used everywhere as a divider under titles */
hr.rule, .rule {
  border: 0;
  height: 1px;
  background: var(--line-gold);
  width: 64px;
  margin: var(--space-5) 0;
}
.rule--center { margin-left: auto; margin-right: auto; }
.rule--wide   { width: 120px; }

/* Selection */
::selection { background: var(--gold-tint); color: var(--fg); }