/* ==========================================================================
   NOBLE SILENCE — Design Tokens
   Territory C: LIVING STILLNESS  (Light + Dark + Atmosphere)
   Alle Werte = Single Source of Truth. Keine hardcoded Werte in anderen Files.
   ========================================================================== */
:root {
  /* ---- Farbwelt (Exploration, s. Design-Brief §11) ---- */
  --ns-bone:        #F0EDE7;
  --ns-ivory:       #EAE5DC;
  --ns-mist:        #DDD7CC;
  --ns-stone:       #B8B0A4;
  --ns-mushroom:    #8C847A;
  --ns-muted-text:  #6E665D;   /* kleiner gedaempfter Text: mind. 4,6:1 auf allen hellen Gruenden */
  --ns-warm-grey:   #5E5953;
  --ns-charcoal:    #292825;
  --ns-ink:         #111110;
  --ns-black:       #050505;

  /* ---- Kapitel-Gründe 2.0 (Nachtrag Farbe) ---- */
  /* Olive und Altrosa sind als Sektionsgründe stillgelegt (zu viele Farbfelder).
     Werte bleiben für Sonderfälle dokumentiert. */
  --ns-olive:       #D4D5C8;
  --ns-olive-light: #DEDFD4;
  --ns-olive-deep:  #4B4D42;
  --ns-blush-bg:    #E1D7D4;   /* Smoked Blush aufgehellt, WDB §12 */
  --ns-blush-light: #EAE2E0;
  --ns-cool:        #E7E9E7;   /* neutralisiertes Grau, kein Blau */
  --ns-cool-light:  #F1F2F1;
  --ns-white:       #FFFFFF;   /* gehobenes Papier für wenige Momente */
  --ns-rose:        #B0847F;   /* Flächen und Marken, kein Text */
  --ns-rose-deep:   #784E4B;   /* Text und Buttons — mind. 4,7:1 auf allen vier Gruenden */
  --ns-rose-press:  #5E3B39;   /* Hover: abwaerts, damit Bone-Text lesbar bleibt */

  /* Alle Bildschleier laufen ueber diese eine Zahl. Vorher stand rgba(5,5,5,…)
     an 16 Stellen woertlich im Code — die groesste untokenisierte Farbflaeche
     des Projekts. */
  --scrim:          5,5,5;

  /* atmosphärische Nuancen — fühlen, nicht sehen */
  --ns-blush:       #C9B4AE;   /* smoked blush */
  --ns-mauve:       #9A8C93;   /* dusty mauve */
  --ns-lavender:    #A9A4AE;   /* muted lavender-grey */
  --ns-silver:      #CFC9C2;   /* warm silver */

  /* ---- semantische Rollen ---- */
  --bg:             var(--ns-bone);
  --bg-elev:        var(--ns-ivory);
  --fg:             var(--ns-ink);
  --fg-soft:        var(--ns-warm-grey);
  --fg-muted:       var(--ns-muted-text);
  --eyebrow:        var(--ns-rose-deep);
  --hairline:       rgba(17, 17, 16, 0.14);
  --hairline-strong:rgba(17, 17, 16, 0.35);

  /* ---- Typografie ---- */
  --font-display:   "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans:      "Geist", "Helvetica Neue", Arial, sans-serif;

  /* Type Scale (fluid) — Vogue-Editorial: starker Groessenkontrast */
  --t-display-xl:   clamp(4.5rem, 12vw, 11rem);    /* Hero Statement */
  --t-display:      clamp(3rem, 8vw, 7.5rem);       /* Szenen-Headline */
  --t-h1:           clamp(2.6rem, 5.6vw, 5.6rem);
  --t-h2:           clamp(1.9rem, 3.4vw, 3.2rem);
  --t-h3:           clamp(1.3rem, 1.8vw, 1.7rem);
  --t-lead:         clamp(1.1rem, 1.4vw, 1.35rem);
  --t-body:         1.0625rem;
  --t-small:        0.875rem;
  --t-label:        0.625rem;

  --lh-display:     0.94;
  --lh-tight:       1.12;
  --lh-body:        1.6;
  --track-label:    0.22em;
  --track-nav:      0.12em;

  /* ---- Layout ---- */
  --margin:         clamp(1.5rem, 6vw, 7rem);       /* 4–6 % Viewport */
  --col-gap:        clamp(1rem, 2vw, 2rem);
  --measure:        34ch;                            /* schmale Textspalte */
  --measure-wide:   48ch;

  /* Spacing Scale */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 1rem;  --s-4: 1.5rem;
  --s-5: 2.5rem;   --s-6: 4rem;    --s-7: 6rem;  --s-8: 9rem;
  --chapter-gap:    clamp(7rem, 16vw, 15rem);       /* 120–240 px zwischen Kapiteln */

  /* ---- Form ---- */
  --radius:         0;
  --border:         1px solid var(--hairline);

  /* ---- Motion: Reveal · Drift · Settle ---- */
  --ease-settle:    cubic-bezier(0.22, 1, 0.36, 1);  /* endet bewusst */
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-hover:      240ms;
  /* Kurz und vorbei. Lange Blenden sind auffaelliger, nicht ruhiger: bei
     1200 ms laeuft die Bewegung noch, waehrend man schon liest. */
  --dur-reveal:     700ms;
  --dur-image:      1400ms;
  --dur-drift:      24s;
  /* 4 px liegt an der Wahrnehmungsschwelle — man sieht das Ankommen, nicht das Fahren. */
  --reveal-y:       4px;

  /* ---- Z ---- */
  --z-nav: 50; --z-menu: 60; --z-cursor: 70;
}

/* Getönte Kapitel: kippen dieselben Tokens wie das dunkle Kapitel.
   Dadurch übernehmen Karten, Formulare, Links und Haarlinien den Grund
   automatisch — kein Bauteil muss angefasst werden. */
.chapter--olive {
  --bg:              var(--ns-olive);
  --bg-elev:         var(--ns-olive-light);
  --fg:              var(--ns-ink);
  --fg-soft:         var(--ns-olive-deep);
  --fg-muted:        #6E7062;
  --hairline:        rgba(17, 17, 16, 0.16);
  --hairline-strong: rgba(17, 17, 16, 0.38);
}
.chapter--blush {
  --bg:              var(--ns-blush-bg);
  --bg-elev:         var(--ns-blush-light);
  --fg:              var(--ns-ink);
  --fg-soft:         #6B5754;
  --fg-muted:        #8E7A77;
  --hairline:        rgba(17, 17, 16, 0.14);
  --hairline-strong: rgba(17, 17, 16, 0.36);
}
.chapter--paper {
  --bg:              var(--ns-white);
  --bg-elev:         #F6F5F2;
  --fg:              var(--ns-ink);
  --fg-soft:         var(--ns-warm-grey);
  --fg-muted:        var(--ns-muted-text);
  --hairline:        rgba(17, 17, 16, 0.11);
  --hairline-strong: rgba(17, 17, 16, 0.32);
}
.chapter--cool {
  --bg:              var(--ns-cool);
  --bg-elev:         var(--ns-cool-light);
  --fg:              var(--ns-ink);
  --fg-soft:         #5B5D5C;
  --fg-muted:        var(--ns-muted-text);
  --hairline:        rgba(17, 17, 16, 0.13);
  --hairline-strong: rgba(17, 17, 16, 0.34);
}

/* Dunkles Kapitel: Tokens kippen, Komponenten bleiben gleich */
.chapter--dark, [data-theme="dark"] {
  --bg:              var(--ns-ink);
  --bg-elev:         var(--ns-charcoal);
  --fg:              var(--ns-bone);
  --fg-soft:         var(--ns-stone);
  --fg-muted:        var(--ns-mushroom);
  --eyebrow:         var(--ns-stone);
  --hairline:        rgba(243, 240, 233, 0.16);
  --hairline-strong: rgba(243, 240, 233, 0.4);
}