/* ============================================================================
   bombina — Design Tokens
   Token-Implementierung der Design-Sprache von Prototyp C („Stille
   Havellandschaft", vom Kunden gewählt). Soll-Spec & Delta:
   _docs/Designentscheidung-PrototypC.md — bei Konflikt gewinnt sie.
   Theme kippt zwischen [data-theme="light|dark"]. Dark ist Erweiterung
   über Prototyp C hinaus (C ist light-only).
   ============================================================================ */

:root {
  /* ── PRIMITIVES — Raw scales ── */

  /* Warm-getönte Greys: Tinte-Skala für Dark-Theme & Fallbacks */
  --neutral-50:  #fffdf8;
  --neutral-100: #f7f5f1;
  --neutral-150: #f4f2ee;
  --neutral-200: #efe8dc;
  --neutral-300: #e2ded6;
  --neutral-400: #d9cfbc;
  --neutral-500: #8a8680;
  --neutral-600: #7d776e;
  --neutral-700: #54524d;
  --neutral-800: #474340;
  --neutral-900: #1c1c1a;
  --neutral-950: #141616;

  /* Sekundär — Moos-Grün (Natur-Kontext: Tags, Natur-Eyebrows) */
  --moss-50:  #eaf0e9;
  --moss-100: #d2dfd0;
  --moss-300: #8aa388;
  --moss-500: #5C7A4F;
  --moss-700: #3a5438;

  /* Semantic-Primitives — gedämpft, naturkonform */
  --red-50:  #f7e8e8;
  --red-500: #a73b3b;
  --red-900: #5a1f1f;
  --green-50:  #eaf0e9;
  --green-500: #5C7A4F;
  --green-900: #1f2e1e;
  --amber-50:  #f7eede;
  --amber-500: #c8986a;
  --amber-900: #5a3e1c;

  /* ── SEMANTIC TOKENS — Light (default, Prototyp-C-Palette) ── */
  --background:     #FAF8F4;
  --bg:             var(--background);
  --surface1:       #FFFFFF;
  --surface2:       #F3F0E9;
  --surface3:       #E9E5DC;
  --border:         rgba(31, 31, 29, 0.07);
  --border-visible: rgba(31, 31, 29, 0.14);
  --border-vis:     var(--border-visible);
  --text1:          #1F1F1D;
  --text2:          #5B5A56;
  --text3:          #9E9C97;
  --text4:          #CCC9C1;

  /* C-kanonische Aliasse (Prototyp-Nomenklatur) */
  --ink:   var(--text1);
  --ink-2: var(--text2);
  --ink-3: var(--text3);
  --ink-4: var(--text4);

  --success:    var(--green-500);
  --success-bg: var(--green-50);
  --warning:    var(--amber-500);
  --warning-bg: var(--amber-50);
  --error:      var(--red-500);
  --error-bg:   var(--red-50);

  /* Sekundär-Akzent Moss (nie zusammen mit Amber in einem Block) */
  --moss:     var(--moss-500);
  --moss-sub: rgba(92, 122, 79, 0.09);

  /* Deprecated-Aliasse (Terrakotta-Tertiär aus A/B) — zeigen auf Amber.
     Konsumenten: Focus-Ring (base.css), .badge.warm (components.css) */
  --accent-warm: var(--accent);
  --warm-50:     var(--accent-subtle);

  /* ── TYPOGRAPHY ── */
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type Scale — fluid, aus Prototyp C */
  --text-display: clamp(52px, 8vw, 112px);
  --text-hero:    clamp(42px, 6.8vw, 86px);
  --text-h1:      clamp(38px, 5.5vw, 72px);
  --text-h2:      clamp(32px, 3.4vw, 52px);
  --text-h3:      22px;
  --text-body:    17px;
  --text-lede:    clamp(16px, 1.5vw, 19px);
  --text-body-sm: 15px;
  --text-caption: 13px;
  --text-label:   12px;
  --text-eyebrow: 10.5px;

  --leading-display: 1.06;
  --leading-hero:    0.97;
  --leading-h1:      1.06;
  --leading-h2:      1.12;
  --leading-h3:      1.28;
  --leading-body:    1.65;
  --leading-body-sm: 1.5;
  --leading-caption: 1.4;
  --leading-label:   1.2;

  --tracking-tight:    -0.01em;
  --tracking-tightish: -0.005em;
  --tracking-hero:     -0.025em;
  --tracking-loose:    0.19em;

  /* ── SPACING — 8px-Basis, großzügig nach oben ── */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  22px;
  --space-xl:  28px;
  --space-2xl: 36px;
  --space-3xl: 60px;
  --space-4xl: 96px;

  /* Sektions-Padding vertikal (Prototyp C) */
  --section-pad:       clamp(88px, 11vw, 148px);
  --section-pad-tight: clamp(64px, 8vw, 104px);

  /* ── RADII — C-Whitelist [0, 4, 16, 24, 33/40, 9999] ── */
  --radius-element:   4px;     /* tiny controls, Focus-Ring-Rundung */
  --radius-control:   4px;     /* kleine eckige Controls (Hamburger-Rahmen) */
  --radius-component: 16px;    /* Karten, Galerie-Kacheln */
  --radius-container: 24px;    /* Feature-Visuals, große Flächen */
  --radius-pill:      9999px;  /* Buttons, Nav, Tags, Badges — Signature von C */
  --radius-default:   var(--radius-component);

  --radius-focus:       4px;
  --radius-tile:        16px;
  --radius-visual:      24px;
  --radius-bezel-inner: 33px;
  --radius-bezel-outer: 40px;

  /* ── MOTION — ruhig, aber lebendig: weiche Springs, lange Bild-Ausklänge ── */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);  /* Buttons, Hamburger, FAQ-Icon */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* Reveals, Hover, Bild-Zooms */
  --ease-soft:   cubic-bezier(0.65, 0, 0.35, 1);

  /* Legacy-Aliasse (Konsumenten: components.css, bombina/*.html) */
  --ease-fast:   var(--ease-out);
  --ease-medium: var(--ease-out);
  --ease-slow:   var(--ease-soft);

  --duration-fast:   150ms;
  --duration-medium: 240ms;
  --duration-slow:   400ms;
  --duration-reveal: 860ms;
  --duration-image:  900ms;

  /* ── ELEVATION — soft-glow: weich, groß, teils amber-getönt ── */
  --shadow-1: 0 1px 2px rgba(31, 31, 29, 0.04), 0 2px 8px rgba(31, 31, 29, 0.04);
  --shadow-2: 0 24px 64px -20px rgba(31, 31, 29, 0.15);
  --shadow-3: 0 32px 80px -16px rgba(31, 31, 29, 0.22);

  --shadow-card:      var(--shadow-2);
  --shadow-nav:       0 8px 32px -8px rgba(31, 31, 29, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --shadow-btn:       0 4px 20px -4px rgba(198, 138, 61, 0.38);
  --shadow-btn-hover: 0 6px 28px -4px rgba(133, 90, 28, 0.44);
  --shadow-bezel:     0 0 0 1px rgba(198, 138, 61, 0.05), 0 40px 88px -32px rgba(198, 138, 61, 0.14);

  /* ── LAYOUT ── */
  --container-max: 1200px;
  --container-narrow: 780px;
  --container-padding: clamp(20px, 4vw, 48px);
  --topbar-offset: 84px;   /* Floating-Pill-Nav: 20px top + 52px Höhe + Luft */

  /* ── DISPLAY & ACCENT (Prototyp C: Cormorant Garamond + Amber) ── */
  --font-display:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --accent:        #C68A3D;
  --accent-dark:   #855A1C;
  --accent-subtle: #FBF3E5;
  --hero-height:   min(92dvh, 840px);
  --hero-overlay:  linear-gradient(180deg,
                     rgba(31, 31, 29, 0.06) 0%,
                     rgba(31, 31, 29, 0.00) 22%,
                     rgba(31, 31, 29, 0.52) 70%,
                     rgba(31, 31, 29, 0.82) 100%);
}

/* ── THEME: DARK — Erweiterung über Prototyp C hinaus ── */
[data-theme="dark"] {
  --background:     var(--neutral-950);
  --bg:             var(--background);
  --surface1:       var(--neutral-900);
  --surface2:       var(--neutral-800);
  --surface3:       var(--neutral-700);
  --border:         rgba(250, 248, 244, 0.08);
  --border-visible: rgba(250, 248, 244, 0.16);
  --text1:          #FAF8F4;
  --text2:          #CCC9C1;
  --text3:          #9E9C97;
  --text4:          #5B5A56;

  --success:    var(--moss-300);
  --success-bg: #1f2e1e;
  --warning:    var(--amber-500);
  --warning-bg: #3a2810;
  --error:      var(--red-500);
  --error-bg:   #3a1f1f;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.40);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.60);

  /* Amber heller für Kontrast auf Tinte */
  --accent:        #DDB36A;
  --accent-dark:   #C68A3D;
  --accent-subtle: #3F2C0E;
}

/* ── AUTO DARK MODE — System-Präferenz, wenn nicht explizit gesetzt ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --background:     var(--neutral-950);
    --bg:             var(--background);
    --surface1:       var(--neutral-900);
    --surface2:       var(--neutral-800);
    --surface3:       var(--neutral-700);
    --border:         rgba(250, 248, 244, 0.08);
    --border-visible: rgba(250, 248, 244, 0.16);
    --text1:          #FAF8F4;
    --text2:          #CCC9C1;
    --text3:          #9E9C97;
    --text4:          #5B5A56;

    --success:    var(--moss-300);
    --success-bg: #1f2e1e;
    --warning-bg: #3a2810;
    --error-bg:   #3a1f1f;

    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.40);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.60);

    --accent:        #DDB36A;
    --accent-dark:   #C68A3D;
    --accent-subtle: #3F2C0E;
  }
}