/* ============================================================
   The Prime Woman — Gestaltungswerte
   ------------------------------------------------------------
   Die einzige Stelle, an der Farben, Schriften und Abstaende
   festgelegt werden. Wer hier etwas aendert, aendert es
   ueberall auf der Seite.
   ============================================================ */

:root {

  /* --- Farben -------------------------------------------------
     Willst du die Seite umfaerben, reichen die naechsten
     Zeilen. Alles andere zieht automatisch nach.            */

  /* Farbkonzept: Aubergine und Sand.
     Erwachsen und klar, ohne die weibliche Handschrift zu verlieren.
     Der Akzent erreicht auf Weiss einen Kontrast von 8,9:1 und ist
     damit auch fuer aeltere Augen muehelos lesbar.               */

  --bg:            #FFFFFF;   /* Haupthintergrund */
  --bg-soft:       #F5F1EE;   /* abgesetzte Abschnitte, Karten */
  --bg-deep:       #E9E0DC;   /* noch etwas kraeftiger, sparsam */

  --ink:           #241E22;   /* Ueberschriften, Haupttext */
  --ink-muted:     #584C53;   /* Fliesstext gedaempft */
  --ink-faint:     #8A7C83;   /* Feinprint, Fusszeile */

  --akzent:        #6B3A55;   /* Hauptfarbe: Knoepfe, Links */
  --akzent-hell:   #834B69;   /* Verlauf, Hover */
  --akzent-tief:   #522B41;   /* Tiefe, gedrueckter Zustand */
  --akzent-zart:   #E4D6DE;   /* zarte Flaechen, Raender */
  --auf-akzent:    #F7EDF3;   /* Text auf dunklem Akzentgrund */

  --line:          #E5DAE0;   /* Trennlinien, Kartenraender */
  --white:         #FFFFFF;

  /* --- Schrift ------------------------------------------------ */

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI',
                Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Groessen wachsen mit dem Fenster mit.
     Grundschrift bewusst gross fuer angenehmes Lesen.        */
  --text-xs:   0.82rem;
  --text-sm:   0.94rem;
  --text-base: 1.06rem;
  --text-lg:   1.18rem;
  --text-xl:   1.35rem;

  --h1: clamp(2.4rem, 6vw, 4.2rem);
  --h2: clamp(1.9rem, 4vw, 2.9rem);
  --h3: clamp(1.3rem, 2.4vw, 1.7rem);

  --lh-tight: 1.08;
  --lh-body:  1.72;

  /* Grossbuchstaben-Marker ueber den Abschnitten */
  --label-size:    0.8rem;
  --label-spacing: 0.17em;

  /* --- Abstaende ---------------------------------------------- */

  --space-2:  8px;
  --space-3:  14px;
  --space-4:  22px;
  --space-5:  34px;
  --space-6:  52px;
  --space-7:  78px;
  --space-8:  110px;

  --section-y: clamp(56px, 9vw, 104px);  /* Luft ueber/unter Abschnitten */
  --gutter:    7vw;                       /* seitlicher Rand */

  /* --- Breiten ------------------------------------------------ */

  --width-prose: 680px;    /* Lesetext, angenehme Zeilenlaenge */
  --width-wide:  1100px;   /* Karten, Raster */
  --width-full:  1280px;   /* aeusserste Begrenzung */

  /* --- Formen und Schatten ------------------------------------ */

  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(192, 106, 134, .14);
  --shadow-md: 0 10px 30px rgba(67, 48, 58, .07);
  --shadow-lg: 0 14px 40px rgba(67, 48, 58, .10);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat,
   bekommt sie hier auch nicht. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}