/* ════════════════════════════════════════════════════════
   krebsdesign — Design Tokens
   Shared across index.html, design-system.html, and all pages.
   Edit here; link via: <link rel="stylesheet" href="assets/tokens.css">
   ════════════════════════════════════════════════════════ */

:root {
    /* ── COLORS ─────────────────────────── */
    --color-accent:      #FA3923;
    --color-bg:          #F5F5F5;
    --color-surface:     #FFFFFF;
    --color-ink:         #000000;
    --color-ink-2:       #444444;
    --color-ink-3:       #888888;
    --color-rule:        rgba(0,0,0,0.1);
    --color-rule-solid:  #D8D8D8;
    --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-solid);
    --accent:      var(--color-accent);
    --white:       var(--color-surface);
    --surface:     var(--color-surface);

    /* ── TYPOGRAPHY ─────────────────────── */
    --font-sans:   "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:   "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --sans: var(--font-sans);
    --mono: var(--font-mono);
    --text-xs:    9px;
    --text-sm:    11px;
    --text-base:  15px;
    --text-lg:    clamp(16px, 1.8vw, 24px);
    --text-xl:    clamp(22px, 3vw, 36px);
    --text-2xl:   clamp(32px, 4.5vw, 60px);
    --fw-regular:  400;
    --fw-semibold: 600;
    --fw-bold:     700;
    --lh-tight:  1.1;
    --lh-body:   1.6;
    --lh-loose:  1.9;

    /* ── 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 ────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-pill: 999px;
    --border:        1px solid var(--color-rule);
    --border-solid:  1px solid var(--color-rule-solid);

    /* ── SHADOW ─────────────────────────── */
    --shadow-sm:  none;
    --shadow-md:  0 2px 12px rgba(0,0,0,0.08);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

    /* ── 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:         #181818;
    --color-surface:    #242424;
    --color-ink:        #F0F0F0;
    --color-ink-2:      #AAAAAA;
    --color-ink-3:      #787878;
    --color-rule:       rgba(255,255,255,0.18);
    --color-rule-solid: #505050;
    /* Legacy aliases */
    --bg: #181818; --white: #242424;
    --ink: #F0F0F0; --ink-2: #AAAAAA; --ink-3: #787878;
    --rule: rgba(255,255,255,0.18); --rule-solid: #505050;
  }
[data-theme="dark"] nav { background: rgba(24,24,24,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: #242424; border-color: #505050; }