/* ============================================================
   Kotsch.Works — Design Tokens  ("Engineering Console")
   Technical / blueprint aesthetic: deep black, signal accents,
   hairline rules, sharp corners, monospace data type.
   Defines the new tokens AND every legacy variable the old
   layout exposed, so all existing pages keep working.
   ============================================================ */

:root,
html[data-theme="dark"] {
    color-scheme: dark;

    /* --- Backdrop --- */
    --bg-base:        #06080d;   /* near-black, faint blue */
    --bg:             #06080d;   /* legacy alias */
    --bg-deep:        #030409;

    /* --- Panels / surfaces (flat, opaque) --- */
    --surface:        #0c1018;
    --surface-soft:   #11161f;
    --surface-strong: #161c27;
    --surface-muted:  #11161f;

    /* --- Technical grid + hairlines --- */
    --line:    rgba(120, 160, 190, 0.10);   /* grid line */
    --line-2:  rgba(120, 160, 190, 0.20);   /* stronger rule */
    --border:  rgba(130, 165, 195, 0.16);

    /* --- Text --- */
    --text:    #e7eef6;
    --muted:   #9fb0c0;
    --subtle:  #6a7888;

    /* --- Signal accents (instrument / HUD) --- */
    --accent:         #2ee6c4;   /* teal signal — eyebrows, status, active */
    --accent-strong:  #5ff3d8;
    --accent-soft:    rgba(46, 230, 196, 0.12);
    --primary:        #38bdf8;   /* cyan — links, primary action */
    --primary-strong: #7dd3fc;
    --warn:           #f5a524;   /* amber — secondary signal */
    --warn-soft:      rgba(245, 165, 36, 0.14);

    /* legacy 3d-scene aliases */
    --aurora-1: #2ee6c4;
    --aurora-2: #38bdf8;
    --aurora-3: #1ea7c4;

    /* --- Depth (subtle — technical, not soft) --- */
    --shadow:       0 18px 50px rgba(0, 0, 0, 0.55);
    --shadow-soft:  0 8px 24px rgba(0, 0, 0, 0.40);
    --glow:         0 0 0 1px var(--accent), 0 0 22px rgba(46, 230, 196, 0.22);

    /* --- Geometry (sharp) --- */
    --radius:      8px;
    --radius-sm:   5px;
    --radius-pill: 6px;

    /* --- Type --- */
    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* --- Motion --- */
    --spring:   cubic-bezier(.22, 1, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* --- Legacy aliases (kept so existing views never break) --- */
    --bg-color:            var(--bg);
    --text-color:          var(--text);
    --card-bg:             var(--surface);
    --code-bg:             var(--surface-soft);
    --border-color:        var(--border);
    --primary-color:       var(--primary);
    --accent-color:        var(--accent);
    --project-card-bg:     var(--surface);
    --project-card-border: var(--border);
    --footer-bg:           var(--surface);
}

html[data-theme="light"] {
    color-scheme: light;

    /* "blueprint paper" */
    --bg-base:        #e9edf3;
    --bg:             #e9edf3;
    --bg-deep:        #dde3ec;

    --surface:        #ffffff;
    --surface-soft:   #f1f4f9;
    --surface-strong: #e6ebf2;
    --surface-muted:  #f1f4f9;

    --line:    rgba(20, 50, 80, 0.10);
    --line-2:  rgba(20, 50, 80, 0.20);
    --border:  rgba(20, 45, 75, 0.18);

    --text:    #0a1019;
    --muted:   #44546a;
    --subtle:  #6b7a8d;

    --accent:         #0f9488;
    --accent-strong:  #0d7c72;
    --accent-soft:    rgba(15, 148, 136, 0.12);
    --primary:        #0e7490;
    --primary-strong: #0b5e74;
    --warn:           #b45309;
    --warn-soft:      rgba(180, 83, 9, 0.12);

    --aurora-1: #0f9488;
    --aurora-2: #0e7490;
    --aurora-3: #0b5e74;

    --shadow:       0 18px 44px rgba(15, 30, 55, 0.14);
    --shadow-soft:  0 8px 22px rgba(15, 30, 55, 0.10);
    --glow:         0 0 0 1px var(--accent), 0 0 18px rgba(15, 148, 136, 0.20);

    --radius:      8px;
    --radius-sm:   5px;
    --radius-pill: 6px;

    --bg-color:            var(--bg);
    --text-color:          var(--text);
    --card-bg:             var(--surface);
    --code-bg:             var(--surface-soft);
    --border-color:        var(--border);
    --primary-color:       var(--primary);
    --accent-color:        var(--accent);
    --project-card-bg:     var(--surface);
    --project-card-border: var(--border);
    --footer-bg:           var(--surface);
}

/* z-index scale */
:root {
    --z-scene: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-header: 1000;
    --z-modal: 2000;
}