/* =============================================================
   Yuri Engellandt — Design Tokens
   colors_and_type.css · v3 (Wooden Studio Palette · Mai 2026)
   -------------------------------------------------------------
   Palette-Evolution: von Forest-Green-Accent zu warmem
   Walnut/Cognac. Brand-Buch wird mit dieser Datei aktualisiert.
   Editorial-ruhig bleibt; nur die Hue verschiebt sich Richtung
   warmem Holz und Studio-Licht.

   Altnamen (--primary-green, --green-*, --muted) sind als
   Aliase erhalten und zeigen auf die neuen Werte. Code, der die
   alten Tokens nutzt, läuft weiter.
   ============================================================= */

/* Schriften selbst gehostet, kein externer Aufruf an Google Fonts. Siehe fonts.css */
@import url('fonts.css');

:root {
  /* -------- COLORS · WOODEN STUDIO ------------------------- */
  /* Background */
  --paper:        #F1E7D2;   /* warmer Linen, leicht satter als alt #F5F1EB */
  --paper-soft:   #F8F0DD;   /* card surface, eine Spur heller */
  --paper-warm:   #EBDEC2;   /* warmer hover/tint */
  --paper-200:    #E5D8BC;   /* hairline divider */
  --paper-300:    #D6C5A2;   /* card border */

  /* Walnut — neue Primary (statt Forest Green) */
  --walnut:       #3D2A1C;   /* headlines, CTAs, borders */
  --walnut-deep:  #251812;   /* hover, dark surfaces */
  --walnut-soft:  #5C4231;   /* mid tones */

  /* Cognac — warmer Accent */
  --cognac:       #7A4F2A;   /* second card background, accent fills */
  --cognac-soft:  #A8784A;   /* hover tint */
  --cognac-tint:  #E8D6B8;   /* pill bg, subtle accents */

  /* -------- ACCENT — Stempel-Blau (spare use only) -------- */
  /* Like old stamp ink. Used exactly at three places:         */
  /* (1) .accent-mark on one keyword per headline              */
  /* (2) button hover stroke                                   */
  /* (3) pipeline spine / connector lines                      */
  --stamp:       #C4521C;            /* burnt orange / marker ink  */
  --stamp-a30:   rgba(196, 82, 28, 0.30);
  --stamp-a50:   rgba(196, 82, 28, 0.50);
  --stamp-a12:   rgba(196, 82, 28, 0.12);

  /* Studio surroundings — die Welt um die Seite herum */
  --stage:        #1F140C;   /* very dark warm — "table" outside viewport */
  --stage-rim:    #2D1F14;

  /* Text */
  --ink:          #1A1410;   /* body — subtly warm-tinted ink */
  --muted-warm:   #75664F;   /* captions, subtext */

  /* Backward-compat aliases (alte Tokennamen → neue Werte) */
  --primary-green: var(--walnut);
  --green-900:     var(--walnut-deep);
  --green-700:     var(--cognac);
  --green-100:     var(--cognac-tint);
  --muted:         var(--muted-warm);
  --bg-elev:       var(--paper-soft);
  --bg:            var(--paper);
  --fg:            var(--ink);
  --fg-muted:      var(--muted-warm);
  --accent:        var(--walnut);
  --border:        var(--paper-300);
  --border-strong: var(--walnut);

  /* -------- TYPE -------------------------------------------- */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Emphasis / Thesen-Zeilen: echte Inter-Kursive statt Serif-Italic */
  --font-emphasis: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display:   clamp(48px, 6.5vw, 88px);
  --fs-h1:        clamp(36px, 4.4vw, 56px);
  --fs-h2:        clamp(28px, 3vw, 40px);
  --fs-h3:        22px;
  --fs-lead:      clamp(19px, 1.4vw, 22px);
  --fs-body:      17px;
  --fs-small:     15px;
  --fs-caption:   13px;
  --fs-mono:      14px;

  --lh-tight:     1.08;
  --lh-snug:      1.25;
  --lh-body:      1.65;
  --lh-loose:     1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-mono:    -0.01em;

  /* -------- 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: 120px;

  --measure:        720px;
  --container:      1200px;
  --container-pad:  32px;

  /* -------- RADII / BORDERS / SHADOWS ----------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --border-w:        1px;
  --border-w-strong: 1.5px;

  /* Schatten in warmen Walnut-Tönen, niemals neutral-grau */
  --shadow-1: 0 1px 2px rgba(37, 24, 18, 0.06);
  --shadow-2: 0 6px 24px -12px rgba(61, 42, 28, 0.22), 0 2px 6px rgba(37, 24, 18, 0.05);
  --shadow-3: 0 16px 40px -20px rgba(61, 42, 28, 0.28);

  /* -------- MOTION ------------------------------------------ */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 0.4);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* Dark-Theme (Default der ganzen Seite). Gilt für Haupt- und Unterseiten. */
[data-theme="dark"] {
  --paper:      #17110B;
  --paper-soft: #1F1810;
  --paper-warm: #271E14;
  --paper-200:  #2E2316;
  --paper-300:  #3A2C1C;
  --walnut:      #F3E9D4;
  --walnut-deep: #FFFFFF;
  --walnut-soft: #D9C7A6;
  --cognac:      #C98B53;
  --cognac-soft: #E0A66E;
  --cognac-tint: #2A2014;
  --stamp:       #E5763E;
  --stamp-a30:   rgba(229, 118, 62, 0.30);
  --stamp-a50:   rgba(229, 118, 62, 0.50);
  --stamp-a12:   rgba(229, 118, 62, 0.14);
  --ink:        #F3E9D4;
  --muted-warm: #A9967A;
  --hairline:        rgba(243, 233, 212, 0.16);
  --hairline-soft:   rgba(243, 233, 212, 0.09);
  --hairline-strong: rgba(243, 233, 212, 0.32);
  --stamp-text:  #E5763E;
  --placeholder: #8A7B61;
  --warm-top:   rgb(17, 12, 7);   /* Verlauf oben, fix auf Stärke 25 */
}

/* -------- SEMANTIC ELEMENT DEFAULTS ----------------------- */

html { background: var(--paper); color: var(--ink); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, .display {
  font-family: var(--font-display);
  color: var(--walnut);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}

.display { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.022em; }
h1, .h1 { font-size: var(--fs-h1); font-weight: 700; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.012em; }

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); max-width: var(--measure); margin: 0; }
.lead   { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); font-weight: 400; }
.small  { font-size: var(--fs-small); color: var(--muted-warm); }
.caption{ font-size: var(--fs-caption); color: var(--muted-warm); letter-spacing: 0.01em; }
.muted  { color: var(--muted-warm); }

code, pre, .mono, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--walnut);
}

a {
  color: var(--walnut);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--walnut) 40%, transparent);
  transition: text-decoration-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
a:hover { text-decoration-color: var(--walnut); }