/* Meike Schiek – Design-Tokens. Werte aus design/tokens.json, Schriftskala und Breiten für die Website. */

:root {
  /* Farben (hell) */
  --bg: #fbf6f3;
  --bg-warm: #fffaf7;
  --surface: #ffffff;
  --line: #ebddd8;
  --border: #9a8790;
  --ink: #4a3742;
  --ink-muted: #6e5a64;
  --accent: #9c4a68;
  --accent-hover: #803a55;
  --accent-press: #6b2c44;   /* beim Drücken */
  --on-accent: #ffffff;
  --focus: #6b5285;
  --peach: #e8d0c8;
  --peach-soft: #f5e6df;
  --rose: #e8c8d0;
  --rose-press: #dcb2be;     /* Menüknopf beim Drücken */
  --ink-press: #2f2129;      /* aktiver Menüknopf beim Drücken */
  --rose-soft: #f6e4e9;
  --lilac: #e0c8e8;
  --lilac-soft: #f0e6f4;
  --lilac-deep: #6b5285;
  --error: #a3333d;
  --success: #2f6b4f;

  /* Dunkle Fläche (Newsletter, hervorgehobener Blogbeitrag) */
  --night: #4a3742;
  --night-blob-1: #5a4552;
  --night-blob-2: #54404c;
  --on-night: #fbf6f3;
  --on-night-muted: #e8d0c8;
  --on-night-accent: #e8c8d0;
  --on-night-focus: #e0c8e8;

  /* Schrift */
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Schriftskala: Grundschrift 17px, Faktor 1,25 am Desktop, 1,2 am Handy.
     Die Werte gleiten zwischen 375px und 1080px Breite von Handy zu Desktop. */
  --fs-hero: clamp(2.1875rem, 1.6rem + 2.6vw, 3.25rem);       /* 35 → 52px */
  --fs-h1: clamp(1.8125rem, 1.375rem + 1.9vw, 2.5625rem);     /* 29 → 41px */
  --fs-buchtitel: clamp(1.625rem, 1.36rem + 1.15vw, 2.0625rem); /* 26 → 33px */
  --fs-h3: clamp(1.5rem, 1.375rem + .5vw, 1.6875rem);         /* 24 → 27px */
  --fs-h4: 1.3125rem;                                         /* 21px */
  --fs-quote: clamp(1.25rem, 1.1rem + .6vw, 1.375rem);        /* 20 → 22px */
  --fs-lead: clamp(1.125rem, 1.09rem + .17vw, 1.1875rem);     /* 18 → 19px */
  --fs-text: 1.0625rem;                                       /* 17px */
  --fs-small: .9375rem;                                       /* 15px, kleinste Größe */

  --lh-text: 1.65;   /* 28px bei 17px */
  --lh-lead: 1.6;    /* 30px bei 19px */
  --lh-titel: 1.15;

  /* Abstände (4er-Schritte) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-abschnitt: clamp(56px, 2.75rem + 3.5vw, 88px);

  /* Ecken und Schatten */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-kachel: 28px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-soft: 0 2px 12px rgba(74, 55, 66, .08);
  --shadow-cover: 0 6px 24px rgba(74, 55, 66, .18);

  /* Breiten */
  --page-max: 1080px;   /* Inhaltsbreite ohne Seitenrand */
  --gutter: 16px;       /* Seitenrand am Handy, ab Tablet 24px */
  --measure: 34em;      /* Fließtext höchstens ~75 Zeichen */
  --measure-lese: 32em; /* Geschichten in Lora */
  --target-min: 44px;
}

@media (min-width: 700px) {
  :root { --gutter: 24px; }
}

/* Dunkelmodus: vorbereitet, aber nicht eingeschaltet (noch nicht freigegeben).
   Zum Testen <html data-theme="dark"> setzen. */
:root[data-theme="dark"] {
  --bg: #1f1a1d;
  --bg-warm: #241e21;
  --surface: #2a2327;
  --line: #3e3439;
  --border: #8c7a83;
  --ink: #f4ebee;
  --ink-muted: #cdbdc5;
  --accent: #eba9bf;
  --accent-hover: #f3c3d3;
  --accent-press: #f9dbe5;
  --on-accent: #2a1820;
  --focus: #c9b4e6;
  --peach: #4a3a35;
  --peach-soft: #352b28;
  --rose: #4a333c;
  --rose-press: #5a3d48;
  --rose-soft: #36282e;
  --lilac: #42375a;
  --lilac-soft: #2f2938;
  --lilac-deep: #c9b4e6;
  --error: #f0a0a6;
  --success: #8fd1ae;
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, .40);
}