/* Design-Tokens der Site „elimente“ – Ausgangspunkt war das Beispiel-Theme „elimente“ aus dem Template. Nur Werte ändern, keine neuen Regeln: das Basis-CSS kennt nur die generischen Namen (CLAUDE.md 7.2). */

/*
 * Beispiel-Theme „Elimente" (Töpferstudio, Migrationskandidat).
 *
 * Zweck: zweites Theme auf identischem Basis-CSS. Zwei sehr unterschiedliche
 * Paletten sind der laufende Nachweis, dass keine Farbe und keine Schrift ins
 * Basis-CSS gerutscht ist (Entscheidung E-005 in `docs/decisions.md`).
 * Quelle der Werte: `ckrauser90/elimente`, `index.html:97` (:root).
 *
 * Charakter: Salbei, Creme, Rinde, Terrakotta – ruhig und erdig.
 */
:root {
  --surface-1: #faf8f5; /* Linen */
  --surface-2: #f6f2ec; /* Creme */
  --surface-3: #ede7dd; /* Creme warm */

  --text: #3e3832; /* Bark */
  --text-muted: #625a52;
  --heading: #3e3832; /* Bark – wie die Überschriften auf elimente.com */

  /* Farben: Salbei und Eukalyptus (Elisas Wunsch). Salbei schmückt –
     kleine Überschriften, „Elimente.“, Linien. Eukalyptus ist alles, was man
     anklickt – Knöpfe, Links, Kalender. Beide dunkel genug für Lesbarkeit:
     Salbei-Schrift auf Creme 4,6 : 1, weiße Schrift auf Eukalyptus 7 : 1. */
  --accent: #607357; /* Salbei */
  --accent-hover: #4f6146;
  --on-accent: #ffffff;

  --accent-2: #3f5e58; /* Eukalyptus */
  --accent-2-hover: #324b46;
  --on-accent-2: #ffffff;
  /* Rahmen ums Hero-Foto: Eukalyptus silber statt Terrakotta. */
  --rahmen-farbe: #9db3ab;

  --detail: #b5c4ab; /* Salbei hell */
  --border: #ddd5c8;

  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Karla', system-ui, sans-serif;
  --fs-base: 17px;
  --lh-body: 1.7;

  --radius-card: 14px;
  --radius-pill: 999px;
  /* Organische Form, die im Hero langsam „schwebt“ (siehe unten). */
  --radius-signature: 52% 48% 43% 57% / 55% 45% 55% 45%;

  --maxw: 1100px;
  --gutter: 24px;

  --focus: #3f5e58;

  /* ---- Optionale Tokens: das Aussehen von elimente.com (Story 10.6a).
     Werte aus `ckrauser90/elimente`, index.html (CSS vor der Migration). ---- */
  --heading-weight: 500;

  --head-align: center;
  --head-margin: auto;

  --eyebrow-font: var(--f-body);
  --eyebrow-style: normal;
  --eyebrow-weight: 600;
  --eyebrow-size: 0.72rem;
  --eyebrow-transform: uppercase;
  --eyebrow-tracking: 0.18em;
  --eyebrow-color: var(--accent);
  --eyebrow-line: 20px;

  --nav-size: 0.82rem;
  --nav-transform: uppercase;
  --nav-tracking: 0.1em;
  --nav-color: var(--text-muted);

  --btn-radius: 4px;
  --btn-quiet-bg: var(--accent-2);
  --btn-quiet-color: var(--on-accent-2);
  --btn-quiet-hover-bg: var(--accent-2-hover);

  --radius-signature-2: 48% 52% 50% 50% / 45% 55% 50% 50%;
  --radius-signature-3: 55% 45% 48% 52% / 50% 50% 55% 45%;
  --signature-motion: signatur-schweben 10s ease-in-out infinite;
  --signature-border: none;
  --signature-shadow: 0 20px 50px rgba(122, 142, 110, 0.2);
  --hero-frame-max: 420px;

  --radius-about: 60% 40% 50% 50% / 50% 60% 40% 50%;
  --about-frame-max: 420px;

  --quote-border: 2px solid #b5c4ab;
  --quote-indent: 1.5rem;

  --footer-bg: var(--surface-1);
  --footer-text: var(--text-muted);
  --footer-link: var(--accent-2);
  --footer-logo-note: var(--detail);
  --footer-border: 1px solid var(--border);

  --grain-image: url('/styles/koernung.svg');
  --grain-opacity: 0.025;
}