/* ============================================================
   VALERIO TREITE · UR-SACHEN — Design-Token-Quelle
   Richtung „Ursprung": erdige Kraft (dunkel) trifft Naturpflege (creme).

   EINZIGE Datei mit Farbwerten, Schriftgrößen, Radien, Abständen,
   Linien und Bewegungswerten. components.css konsumiert nur var().
   Ein Hex-Wert oder eine px-Schriftgröße irgendwo sonst ist ein Fehler.

   Herkunft der Palette: Marken-Logo (Braun/Creme) und die
   Anhang-Materialien (Creme #F5E3CF, Tannengrün #232C19), verschoben
   aus der Valerio-Vorgängerseite „Stiller Krieger".
   ============================================================ */

:root {
  /* ==========================================================
     FARBE — ERDE (dunkle Sektionen: Person, Kraft, Hero)
     ========================================================== */
  --erde-900: #14110C;   /* tiefster Grund, warmer Espresso   */
  --erde-850: #191510;   /* Grund                             */
  --erde-800: #201B14;   /* Fläche/Surface                    */
  --erde-700: #2C251C;   /* erhöhte Fläche, Karten auf dunkel */
  --erde-600: #3B3126;   /* Rahmen auf dunkel                 */
  --erde-500: #55483A;   /* gedämpfte Linie                   */

  /* FARBE — CREME (helle Sektionen: Produkte, Natur, Info) */
  --creme-50:  #FBF4E7;  /* hellster Grund                    */
  --creme-100: #F5E9D6;  /* Standard-Creme-Grund              */
  --creme-200: #ECDCC2;  /* Fläche/Karten auf creme           */
  --creme-300: #DBC6A3;  /* Rahmen/Linie auf creme            */

  /* FARBE — SCHRIFT */
  --bone-50:  #F6EEDD;   /* Haupttext auf Erde (13,4:1)       */
  --bone-200: #D8C8AC;   /* Nebentext auf Erde                */
  --bone-400: #9E8E74;   /* Zierde auf Erde, nie Information  */
  --ink-900:  #241C12;   /* Haupttext auf Creme (12,1:1)      */
  --ink-700:  #4A3D2C;   /* Nebentext auf Creme               */
  --ink-500:  #6E5C44;   /* gedämpft auf Creme                */

  /* FARBE — MARKE & AKZENT (auf beiden Gründen belegt) */
  --terra-600: #9A5A34;  /* Terrakotta, Logo-Braun            */
  --terra-500: #B06B3C;  /* helle Terrakotta                  */
  --amber-500: #D98A3D;  /* warmes Orange, Haupt-CTA          */
  --amber-400: #E4993F;  /* mittlere Glut                     */
  --amber-300: #F0B972;  /* helle Glut, Hover                 */
  --forst-800: #1E2A1B;  /* Tannengrün, dunkle Naturfläche    */
  --forst-600: #33472C;  /* Tannengrün Fläche                 */
  --forst-400: #5B7A48;  /* Salbei/Blattgrün, Erfolg          */
  --gold-500:  #B8893A;  /* gedecktes Gold, Ornament          */

  /* ROLLEN — Erde (dunkel) */
  --ground:   var(--erde-850);
  --surface:  var(--erde-800);
  --surface-2:var(--erde-700);
  --text:     var(--bone-50);
  --text-2:   var(--bone-200);
  --text-3:   var(--bone-400);
  --line:     rgba(216, 200, 172, 0.14);
  --line-2:   rgba(216, 200, 172, 0.26);

  /* ROLLEN — Creme (hell), via .lift/[data-ton="creme"] gesetzt */
  --akzent:      var(--amber-500);
  --akzent-hover:var(--amber-300);
  --auf-akzent:  #241407;                 /* Text auf Orange, 8,1:1 */
  --overlay:     rgba(15, 12, 8, 0.92);
  --schatten:      0 24px 60px -22px rgba(0,0,0,0.72);
  --schatten-weich:0 10px 30px -14px rgba(0,0,0,0.5);
  --glut:          0 0 34px -8px rgba(217, 138, 61, 0.5);

  /* ==========================================================
     SCHRIFT — Fraunces (Display, warm) + Inter Tight (Body)
     Gewicht und opsz tragen die Hierarchie, nicht Farbe.
     ========================================================== */
  --font-display: 'Fraunces', 'Newsreader', Georgia, serif;
  --font-body: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display-2xl: clamp(3rem, 7.2vw, 6.25rem);
  --fs-display-xl:  clamp(2.5rem, 5.6vw, 4.5rem);
  --fs-display-lg:  clamp(2rem, 4.2vw, 3.5rem);
  --fs-heading-lg:  clamp(1.5rem, 2.4vw, 2.15rem);
  --fs-heading-md:  clamp(1.25rem, 1.7vw, 1.55rem);
  --fs-eyebrow:     clamp(0.78rem, 0.95vw, 0.9rem);
  --fs-body-lg:     clamp(1.075rem, 1.25vw, 1.2rem);
  --fs-body:        1.0375rem;
  --fs-small:       0.875rem;
  --fs-mini:        0.76rem;

  --lh-display: 1.02;
  --lh-tight: 1.14;
  --lh-body: 1.66;
  --ls-display: -0.02em;
  --ls-eyebrow: 0.26em;
  --ls-wide: 0.12em;

  --w-normal: 400;
  --w-mittel: 500;
  --w-halb: 600;
  --w-fett: 700;

  --messe-body: 66ch;
  --messe-eng: 40ch;

  /* ==========================================================
     RAUM — eine Leiter
     ========================================================== */
  --s-1: 6px;
  --s-2: 12px;
  --s-3: 20px;
  --s-4: 32px;
  --s-5: 52px;
  --s-6: 84px;
  --s-7: 124px;
  --sektion-y: clamp(4.5rem, 9vw, 9rem);
  --shell: 1200px;
  --shell-eng: 940px;
  --rand: clamp(1.1rem, 4vw, 2.5rem);
  --nav-h: 72px;

  /* ==========================================================
     FORM — weich-organisch, aber nicht verspielt
     ========================================================== */
  --r-flaeche: 18px;
  --r-karte: 14px;
  --r-klein: 9px;
  --r-voll: 999px;
  --stroke: 1.5px;
  --stroke-fein: 1px;

  /* ==========================================================
     BEWEGUNG — ease-out beim Eintreten
     ========================================================== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 120ms;
  --t-hover: 260ms;
  --t-enter: 620ms;

  /* EBENEN */
  --z-inhalt: 1;
  --z-ueber: 3;
  --z-nav: 40;
  --z-menue: 60;
  --z-dialog: 80;
}

/* Korrektur eines Zwischenwerts (bewusst getrennt gehalten) */
:root { --amber-400: #E4993F; }

@media (max-width: 860px) {
  :root {
    --fs-body: 1rem;
    --nav-h: 62px;
  }
}