/* ════════════════════════════════════════════════════════
   krebsdesign — Design Tokens · Variante D "Systematic Editorial"
   Single source of truth. Tokens → DS components → block design.
   ════════════════════════════════════════════════════════ */

:root {
    /* ── COLORS ─────────────────────────── */
    --color-accent:      #FA3923;   /* signal red — markers, emphasis, red surfaces */
    --color-bg:          #FFFFFF;   /* page (white) */
    --color-surface:     #FFFFFF;   /* white surface */
    --color-stone:       #E8E8E6;   /* third surface: light stone band/card */
    --color-ink:         #000000;   /* constant content colour */
    --color-ink-2:       #444444;
    --color-ink-3:       #888888;
    --color-on-accent:   #FFFFFF;   /* content/markers on red surfaces */
    --color-rule:        rgba(0,0,0,0.12);   /* hairline */
    --color-rule-2:      rgba(0,0,0,0.06);   /* faint hairline (row dividers) */
    --color-rule-solid:  #1A1A1A;            /* strong editorial divider line */
    --color-rule-hair:   #DEDEDE;            /* light solid hairline */
    --color-success:     #1A8A4A;
    --color-warning:     #D4830F;
    --color-danger:      #CC2200;
    --color-info:        #0066CC;
    /* legacy aliases for nav/existing components */
    --bg:          var(--color-bg);
    --ink:         var(--color-ink);
    --ink-2:       var(--color-ink-2);
    --ink-3:       var(--color-ink-3);
    --rule:        var(--color-rule);
    --rule-solid:  var(--color-rule-hair);
    --accent:      var(--color-accent);
    --white:       var(--color-surface);
    --surface:     var(--color-surface);
    --stone:       var(--color-stone);

    /* ── TYPOGRAPHY ─────────────────────── */
    /* Variante D is sans-only: Inter for body AND labels (no monospace UI). */
    --font-sans:   "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:   "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-code:   "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --sans: var(--font-sans);
    --mono: var(--font-mono);
    --text-xs:    10px;   /* tracked labels / meta */
    --text-sm:    12px;
    --text-base:  15px;
    --text-lg:    clamp(16px, 1.8vw, 24px);
    --text-xl:    clamp(22px, 3vw, 36px);
    --text-2xl:   clamp(30px, 4.2vw, 56px);
    --text-3xl:   clamp(34px, 4.6vw, 64px);
    --text-display: clamp(38px, 5.4vw, 76px);   /* hero display — editorial, restrained */
    /* Schrift je Größenstufe (Panel-steuerbar). Default = Rollen-Font, damit das
       aktuelle Aussehen erhalten bleibt: Labels/Meta (xs/sm) = Mono, Copy/Headlines = Sans.
       Im Panel pro Stufe überschreibbar → z.B. Display/XL = Display-Schrift, Base = Lesetext. */
    --font-xs:      var(--font-mono);
    --font-sm:      var(--font-mono);
    --font-base:    var(--font-sans);
    --font-lg:      var(--font-sans);
    --font-xl:      var(--font-sans);
    --font-display: var(--font-sans);
    --fw-thin:       100;
    --fw-extralight: 200;
    --fw-light:      300;
    --fw-regular:    400;
    --fw-medium:     500;
    --fw-semibold:   600;
    --fw-bold:       700;
    /* display headlines use light weights for the airy editorial feel */
    --fw-display:    var(--fw-light);
    --lh-display: 0.95;
    --lh-tight:  1.05;
    --lh-body:   1.6;
    --lh-loose:  1.85;
    --tracking-label: 0.16em;   /* uppercase label tracking */

    /* ── TEXT TRANSFORM ────────────────── */
    --text-xs-transform: uppercase;

    /* ── SPACING ────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;

    /* ── BORDER & RADIUS (sharp / editorial) ── */
    --border-width: 1px;       /* globale Rahmen-/Linienstärke (Panel-editierbar) */
    --border-style: solid;     /* globaler Rahmen-/Linienstil (Panel-editierbar) */
    --radius-sm:   0;
    --radius-md:   0;
    --radius-pill: 0;
    --radius-round: 999px;   /* only for genuinely circular UI (avatars) */
    --border:        1px solid var(--color-rule);
    --border-solid:  1px solid var(--color-rule-hair);
    --border-strong: 1px solid var(--color-rule-solid);

    /* ── SHADOW (flat) ──────────────────── */
    --shadow-sm:  none;
    --shadow-md:  none;
    --shadow-lg:  none;

    /* ── MOTION ─────────────────────────── */
    --dur-fast:  0.15s;
    --dur-base:  0.2s;
    --dur-slow:  0.6s;
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  }

/* ── DARK MODE ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --color-bg:         #111111;
    --color-surface:    #1A1A1A;
    --color-stone:      #242424;
    --color-ink:        #F2F2F2;
    --color-ink-2:      #AEAEAE;
    --color-ink-3:      #787878;
    --color-on-accent:  #FFFFFF;
    --color-rule:       rgba(255,255,255,0.16);
    --color-rule-2:     rgba(255,255,255,0.07);
    --color-rule-solid: #E8E8E8;
    --color-rule-hair:  #3A3A3A;
    /* Legacy aliases */
    --bg: var(--color-bg); --white: var(--color-surface); --stone: var(--color-stone);
    --ink: var(--color-ink); --ink-2: var(--color-ink-2); --ink-3: var(--color-ink-3);
    --rule: var(--color-rule); --rule-solid: var(--color-rule-hair);
  }
[data-theme="dark"] nav { background: rgba(17,17,17,0.96); }
[data-theme="dark"] .ds-sidebar { background: var(--color-bg); }
[data-theme="dark"] .comp-preview { background: #1e1e1e; }
[data-theme="dark"] .doc-code { background: #0e0e0e; }
[data-theme="dark"] .doc-table th { border-bottom-color: #505050; }
[data-theme="dark"] .te-panel,
  [data-theme="dark"] .nav-profile-dropdown { background: #1A1A1A; border-color: #3A3A3A; }