/* ============================================================
   Tauschke Coaching — Colors & Type
   ============================================================
   The visual system is built around a single human idea:
   a coach who listens. Warm neutrals (paper, ink), a calm
   "Kaiserberg" sage green pulled from the nature photography
   used on the site, and a single warm terracotta accent that
   signals action. The signature script in the logo sets the
   type pairing: a humanist serif for headlines, a clean sans
   for body, and a handwritten script reserved for signatures
   and personal moments ("Daniel says...").
   ============================================================ */

/* ---------- Fonts — selbst gehostet (DSGVO: keine Google-Requests) ---------- */

@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/lora-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("../assets/fonts/caveat-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Jost — Wortmarke der Coaching-Plattform INTEAMATE. */
@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/jost-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color — neutrals (paper & ink) ---------- */
  --paper:        #FBF8F3;  /* page background — warm off-white */
  --paper-2:      #F3EEE4;  /* card / section bg */
  --paper-3:      #E8E1D3;  /* hairline dividers, muted chips */

  --ink:          #1E1A16;  /* primary text — near-black, warm */
  --ink-2:        #4A4238;  /* secondary text */
  --ink-3:        #8A7F72;  /* tertiary text, captions */
  --ink-line:     #D8CFBE;  /* borders on paper */

  /* ---------- Color — brand ---------- */
  --sage:         #6B8E6A;  /* Kaiserberg meadow — primary brand */
  --sage-dark:    #4E6D4E;
  --sage-soft:    #CBD7C6;
  --sage-wash:    #EEF2EB;

  --terracotta:   #C8684A;  /* warm accent — CTAs, highlights */
  --terracotta-dark: #9E4C30;
  --terracotta-soft: #F1D8CC;

  --sand:         #D9B77A;  /* tertiary — certification gold */
  --sand-soft:    #F2E5C8;

  /* ---------- Color — semantic ---------- */
  --bg:           var(--paper);
  --bg-elevated:  #FFFFFF;
  --bg-muted:     var(--paper-2);
  --fg:           var(--ink);
  --fg-muted:     var(--ink-2);
  --fg-subtle:    var(--ink-3);
  --border:       var(--ink-line);
  --border-strong: #B5A890;

  --accent:       var(--sage);
  --accent-fg:    #FFFFFF;
  --cta:          var(--terracotta);
  --cta-fg:       #FFFFFF;

  --success:      #5E8A5E;
  --warning:      #C99A3A;
  --danger:       #B2432D;

  /* ---------- Type — families ---------- */
  --font-serif:   "Lora", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-script:  "Caveat", "Segoe Script", "Brush Script MT", cursive;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-brand:   "Jost", "Inter", ui-sans-serif, system-ui, sans-serif;  /* INTEAMATE. */

  /* ---------- Type — scale (modular, 1.250 major third) ---------- */
  --fs-xs:    0.75rem;   /* 12  — captions */
  --fs-sm:    0.875rem;  /* 14  — small body, eyebrows */
  --fs-base:  1rem;      /* 16  — body */
  --fs-md:    1.125rem;  /* 18  — lead body */
  --fs-lg:    1.375rem;  /* 22  — small heading */
  --fs-xl:    1.75rem;   /* 28  — h3 */
  --fs-2xl:   2.25rem;   /* 36  — h2 */
  --fs-3xl:   3rem;      /* 48  — h1 */
  --fs-4xl:   4rem;      /* 64  — display */
  --fs-5xl:   5.5rem;    /* 88  — hero display */

  /* ---------- Spacing (4px base) ---------- */
  --s-1:  0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5:  1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9:  4rem;    --s-10: 5rem;   --s-11: 6rem;   --s-12: 8rem;

  /* ---------- Radii ---------- */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
  --r-xl: 24px; --r-pill: 999px;

  /* ---------- Shadows (soft, warm — never cold grey) ---------- */
  --shadow-1: 0 1px 2px rgba(30, 26, 22, 0.04),
              0 1px 1px rgba(30, 26, 22, 0.03);
  --shadow-2: 0 4px 12px rgba(30, 26, 22, 0.06),
              0 1px 3px rgba(30, 26, 22, 0.04);
  --shadow-3: 0 12px 32px rgba(30, 26, 22, 0.10),
              0 2px 8px rgba(30, 26, 22, 0.05);
  --shadow-focus: 0 0 0 3px rgba(107, 142, 106, 0.30);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   Semantic typography
   ============================================================ */

.ts-display,
.ts-h1,
.ts-h2,
.ts-h3 {
  font-family: var(--font-serif);
  color: var(--fg);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

.ts-display { font-size: clamp(3rem, 6vw, var(--fs-5xl)); line-height: 1.02; letter-spacing: -0.02em; }
.ts-h1      { font-size: clamp(2.25rem, 4vw, var(--fs-3xl)); line-height: 1.1; }
.ts-h2      { font-size: var(--fs-2xl); line-height: 1.18; }
.ts-h3      { font-size: var(--fs-xl); line-height: 1.25; font-weight: 500; }

.ts-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-dark);
}

.ts-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.ts-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--fg);
  text-wrap: pretty;
}

.ts-small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.ts-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--fg-subtle);
  letter-spacing: 0.02em;
}

.ts-signature {
  font-family: var(--font-script);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--ink);
  font-weight: 500;
}

.ts-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--fg);
  text-wrap: pretty;
}

/* ---------- Base element styles ---------- */

html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { margin: 0; font-size: var(--fs-base); line-height: 1.6; }

h1 { font: 400 var(--fs-3xl)/1.1 var(--font-serif); letter-spacing: -0.01em; margin: 0 0 var(--s-4); text-wrap: balance; }
h2 { font: 400 var(--fs-2xl)/1.18 var(--font-serif); letter-spacing: -0.005em; margin: 0 0 var(--s-4); text-wrap: balance; }
h3 { font: 500 var(--fs-xl)/1.25 var(--font-serif); margin: 0 0 var(--s-3); text-wrap: balance; }
h4 { font: 600 var(--fs-lg)/1.3 var(--font-sans); margin: 0 0 var(--s-3); }
p  { margin: 0 0 var(--s-4); line-height: 1.65; text-wrap: pretty; }

a  { color: var(--sage-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--terracotta-dark); }

strong { font-weight: 600; color: var(--fg); }
em     { font-style: italic; }

hr { border: none; border-top: 1px solid var(--border); margin: var(--s-7) 0; }

::selection { background: var(--sage-soft); color: var(--ink); }