/* ============================
   DESIGN TOKENS
   ============================ */

/* DARK THEME (default) */
:root,
[data-theme="dark"] {
    --bg-primary: #0a0a12;
    --bg-secondary: #0d0d1a;
    --bg-card: #111122;
    --bg-card-hover: #161630;
    --text-primary: #f5f0e8;
    --text-secondary: #b0b0be;
    --text-dim: #6a6a7a;
    --accent-orange: #ff6b35;
    --accent-orange-dim: rgba(255, 107, 53, 0.15);
    --steel: #2a2a3a;
    --steel-border: rgba(255, 240, 232, 0.06);
    --steel-border-hover: rgba(255, 107, 53, 0.2);
    --nav-bg: rgba(10, 10, 18, 0.85);
    --grid-line: rgba(255, 107, 53, 0.03);
    --thermo-center: rgba(255, 107, 53, 0.06);
    --thermo-mid: rgba(255, 60, 20, 0.02);
    --noise-opacity: 0.03;
    --scrollbar-track: #0a0a12;
    --scrollbar-thumb: #2a2a3a;
    --toggle-bg: #1a1a2e;
    --toggle-fill: #f5f0e8;
    --code-bg: #0d0d1a;
    --code-border: rgba(255, 240, 232, 0.08);
    --diagram-node: #1a1a2e;
    --diagram-node-border: rgba(255, 107, 53, 0.3);
    --diagram-line: rgba(255, 240, 232, 0.1);
    --diagram-label: #8a8a9a;
    --layer-1: rgba(255, 107, 53, 0.08);
    --layer-2: rgba(120, 100, 255, 0.08);
    --layer-3: rgba(100, 180, 255, 0.08);
    --layer-4: rgba(100, 255, 180, 0.06);
}

/* LIGHT THEME */
[data-theme="light"] {
    --bg-primary: #f5f0e8;
    --bg-secondary: #ede8df;
    --bg-card: #e8e2d8;
    --bg-card-hover: #dfd8cc;
    --text-primary: #0a0a12;
    --text-secondary: #3a3a48;
    --text-dim: #7a7a88;
    --accent-orange: #e05a28;
    --accent-orange-dim: rgba(224, 90, 40, 0.12);
    --steel: #d0c9be;
    --steel-border: rgba(10, 10, 18, 0.08);
    --steel-border-hover: rgba(224, 90, 40, 0.25);
    --nav-bg: rgba(245, 240, 232, 0.88);
    --grid-line: rgba(224, 90, 40, 0.04);
    --thermo-center: rgba(224, 90, 40, 0.08);
    --thermo-mid: rgba(224, 60, 20, 0.03);
    --noise-opacity: 0.02;
    --scrollbar-track: #f5f0e8;
    --scrollbar-thumb: #d0c9be;
    --toggle-bg: #e8e2d8;
    --toggle-fill: #0a0a12;
    --code-bg: #e8e2d8;
    --code-border: rgba(10, 10, 18, 0.1);
    --diagram-node: #dfd8cc;
    --diagram-node-border: rgba(224, 90, 40, 0.35);
    --diagram-line: rgba(10, 10, 18, 0.12);
    --diagram-label: #5a5a68;
    --layer-1: rgba(224, 90, 40, 0.08);
    --layer-2: rgba(100, 80, 200, 0.06);
    --layer-3: rgba(60, 130, 200, 0.06);
    --layer-4: rgba(60, 180, 120, 0.05);
}

/* ============================
   RESET & BASE
   ============================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background 0.5s ease, color 0.5s ease;
}

/* Noise overlay */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: var(--noise-opacity);
    pointer-events: none;
    z-index: 9999;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }

/* ============================
   ANIMATIONS
   ============================ */

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-in { opacity: 0; animation: fadeSlideUp 0.6s ease forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }