/* ============================================================================
   Kathy Hiereth / tiefenraum — Design Tokens
   Colors + Typography. Import this in any artifact built on this brand.

   FONTS
   -----
   - Body/UI: Cabinet Grotesk (free, Fontshare) — loaded via Fontshare CSS API.
   - Headlines: Recoleta (commercial, Latinotype). NOT available for free webfont
     embedding. Substituted here with FRAUNCES (Google Fonts, ~82% match, OFL).
     --> When you license Recoleta, drop the woff2 into fonts/ and add an
         @font-face named "Recoleta"; it is first in every serif stack below,
         so it takes over automatically with zero other changes.
   ============================================================================ */

@import url("cabinet-grotesk.css");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600;9..144,700&display=swap");

:root {
  /* ---- Brand colors (the four mains) ---------------------------------- */
  --offwhite:   #F8F9F7;  /* Basis & Neutral — page/section base, never pure white */
  --sage:       #9CB9AF;  /* Primär — main brand color, Logo, accent sections      */
  --blue:       #7D8CA3;  /* Sekundär — gedecktes Blau; icons, dividers, accents    */
  --plum:       #735668;  /* Tertiär — Pflaume; CTAs + key text highlights ONLY      */

  /* Tints / states derived from the mains -------------------------------- */
  --sage-15:    #EBF0EE;  /* ~15% sage on off-white — accent / quote section bg     */
  --sage-30:    #DDE6E2;  /* lighter sage fill                                      */
  --sage-mid:   #B6CBC3;  /* mid sage — full-fill section bg                        */
  --plum-hover: #67485A;  /* CTA hover — ~10% darker plum                           */
  --sage-deep:  #41594F;  /* ACCESSIBLE sage for TEXT on light (raw sage fails AA)   */

  /* ---- Helper colors (text + UI, not brand colors) -------------------- */
  --ink:        #1F2422;  /* Text-Haupt — kühles Anthrazit; body + headlines        */
  --muted:      #5F6664;  /* Text-Sekundär — captions, meta, footer                 */
  --border:     #E5E8E6;  /* Borders & dividers — barely-there                      */
  --on-dark:    #F8F9F7;  /* text on sage/plum/dark fills                           */

  /* ---- ACCESSIBILITY: text color by background (WCAG AA / BFSG) --------
     LIGHT ground (off-white, white, sage-15):
       body=ink ✓ · secondary=muted ✓ · accent TEXT=plum ✓ (≥5.5:1)
       green text → use --sage-deep ✓ (raw --sage is ~2:1, FAILS)
       --blue = ICONS only (graphic 3:1 ✓) — never as text on light
     SAGE fill (sage-mid / sage): text MUST be --ink ✓ (off-white & plum FAIL)
       to keep plum visible here, use the .kh-mark marker (white-on-plum 6:1 ✓)
     DARK fill (ink / plum): text=off-white ✓ · accent=--sage ✓ (≥7:1)
     CTA: plum fill + off-white text ✓ (6:1) --------------------------- */

  /* ---- Shadows (max 10% opacity, anthracite-tinted, soft, blur ≥20px) -- */
  --shadow-sm:  0 2px 12px rgba(31,36,34,0.05);
  --shadow-md:  0 8px 28px rgba(31,36,34,0.08);
  --shadow-lg:  0 16px 48px rgba(31,36,34,0.10);

  /* ---- Radii (subtle; NO pill buttons) -------------------------------- */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-card: 14px;   /* large surfaces only */

  /* ---- Dezenter Verlauf (sage -> blue only, very gentle) -------------- */
  --gradient-cool: linear-gradient(135deg, #9CB9AF 0%, #8AA6AC 55%, #7D8CA3 100%);

  /* ---- Spacing scale (8pt base) --------------------------------------- */
  --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;

  /* ---- Font families --------------------------------------------------- */
  --font-serif: "Recoleta", "Fraunces", "Georgia", serif;        /* Headlines + logo */
  --font-sans:  "Cabinet Grotesk", "Segoe UI", system-ui, sans-serif; /* Body + UI   */

  /* ---- Type tokens (desktop) ------------------------------------------ */
  --h1-size: 64px;  --h1-lh: 1.1;  --h1-ls: -0.01em;  --h1-weight: 700;
  --h2-size: 40px;  --h2-lh: 1.2;  --h2-ls: 0;        --h2-weight: 600;
  --h3-size: 28px;  --h3-lh: 1.3;  --h3-ls: 0;        --h3-weight: 600;
  --lead-size: 22px; --lead-lh: 1.5;
  --body-size: 18px; --body-lh: 1.6;
  --small-size: 14px; --small-lh: 1.5;
  --label-size: 14px; --label-ls: 0.05em;
}

/* Mobile type sizes */
@media (max-width: 640px) {
  :root {
    --h1-size: 40px;
    --h2-size: 28px;
    --h3-size: 22px;
    --lead-size: 18px;
    --body-size: 16px;
  }
}

/* ============================================================================
   Semantic element styles — opt in by adding class "kh" to a wrapper, or
   apply these patterns directly. Headlines = Recoleta/serif, body = sans.
   ============================================================================ */

.kh, .kh-body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--ink);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.kh h1, .kh-h1 {
  font-family: var(--font-serif);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls);
  font-weight: var(--h1-weight);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.kh h2, .kh-h2 {
  font-family: var(--font-serif);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--h2-weight);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.kh h3, .kh-h3 {
  font-family: var(--font-serif);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--h3-weight);
  color: var(--ink);
  margin: 0;
}
.kh-lead {
  font-family: var(--font-sans);
  font-size: var(--lead-size);
  line-height: var(--lead-lh);
  font-weight: 400;
  color: var(--ink);
  max-width: 62ch;
}
.kh p, .kh-p {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--ink);
  max-width: 70ch;   /* 60–75 char measure */
}
.kh-small {
  font-family: var(--font-sans);
  font-size: var(--small-size);
  line-height: var(--small-lh);
  color: var(--muted);
}
.kh-label {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-ls);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--muted);
}

/* Accent / emphasis on a key word.
   .kh-highlight / .hl  — plum TEXT. Use ONLY on light grounds (off-white,
                          white, sage-15). Fails AA on sage — use .kh-mark there.
   .kh-mark             — plum MARKER (white text on plum chip). Accessible on
                          sage + any ground; this is how plum "pops" on sage.
   .hl-light            — sage TEXT, for emphasis on DARK grounds (ink/plum). */
.kh-highlight, .hl { color: var(--plum); }
.hl-light { color: var(--sage); }
.kh-mark {
  background: var(--plum);
  color: var(--offwhite);
  padding: 0.02em 0.26em;
  border-radius: 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============================================================================
   Buttons
   ============================================================================ */
.kh-btn {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  text-decoration: none;
  line-height: 1;
}
/* Primary CTA — Pflaume, always */
.kh-btn--primary {
  background: var(--plum);
  color: var(--on-dark);
}
.kh-btn--primary:hover { background: var(--plum-hover); }
/* Secondary — sage outline. Text+border use --sage-deep so they meet AA on
   light (raw sage text is ~2:1). Still reads as the brand green. */
.kh-btn--secondary {
  background: transparent;
  color: var(--sage-deep);
  border-color: var(--sage-deep);
}
.kh-btn--secondary:hover { background: var(--sage-15); }

/* ============================================================================
   Signature motif — offset line frame around photography ("Bilderrahmen")
   Wrap an image (or a placeholder) in .kh-framed. The ::before is the offset
   line. Default offset = top-left; add --br for bottom-right.
   ============================================================================ */
.kh-framed {
  position: relative;
  display: inline-block;
  --frame-offset: 22px;
  --frame-color: var(--offwhite);
}
.kh-framed > img,
.kh-framed > .kh-frame-fill {
  display: block;
  position: relative;
  z-index: 1;
}
.kh-framed::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(-1 * var(--frame-offset));
  left: calc(-1 * var(--frame-offset));
  right: var(--frame-offset);
  bottom: var(--frame-offset);
  border: 1px solid var(--frame-color);
  pointer-events: none;
}
/* offset to bottom-right instead */
.kh-framed--br::before {
  top: var(--frame-offset);
  left: var(--frame-offset);
  right: calc(-1 * var(--frame-offset));
  bottom: calc(-1 * var(--frame-offset));
}
/* sage frame variant for light backgrounds */
.kh-framed--sage { --frame-color: var(--sage); }
.kh-framed--blue { --frame-color: var(--blue); }

/* A neutral, on-brand image placeholder (until real photos exist) */
.kh-photo-placeholder {
  display: flex;
  align-items: flex-end;
  background:
    repeating-linear-gradient(135deg, rgba(31,36,34,0.025) 0 2px, transparent 2px 9px),
    var(--sage-mid);
  color: var(--ink);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.92;
}