/* ── Reset & base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Theme tokens ────────────────────────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg0:      #0d1117;
  --bg1:      #161b22;
  --bg2:      #21262d;
  --bg3:      #30363d;
  --border:   #30363d;
  --accent:   #3fb950;
  --accent2:  #58a6ff;
  --text0:    #e6edf3;
  --text1:    #8b949e;
  --text2:    #484f58;
  --danger:   #f85149;
  --tab-active-bg: #0d1117;
  --ctrlchar-bg: #f4d800;
  --ctrlchar-fg: #000000;
}

[data-theme="light"] {
  --bg0:      #ffffff;
  --bg1:      #f6f8fa;
  --bg2:      #eaeef2;
  --bg3:      #d0d7de;
  --border:   #d0d7de;
  --accent:   #1a7f37;
  --accent2:  #0969da;
  --text0:    #1f2328;
  --text1:    #57606a;
  --text2:    #8c959f;
  --danger:   #cf222e;
  --tab-active-bg: #ffffff;
  --ctrlchar-bg: #996600;
  --ctrlchar-fg: #ffffff;
}

[data-theme="hc"] {
  --bg0:      #000000;
  --bg1:      #0a0a0a;
  --bg2:      #111111;
  --bg3:      #1a1a1a;
  --border:   #ffffff;
  --accent:   #00ff88;
  --accent2:  #00aaff;
  --text0:    #ffffff;
  --text1:    #dddddd;
  --text2:    #aaaaaa;
  --danger:   #ff3344;
  --tab-active-bg: #000000;
  --ctrlchar-bg: #ffff00;
  --ctrlchar-fg: #000000;
}

[data-theme="warm"] {
  --bg0:      #1c1410;
  --bg1:      #251d15;
  --bg2:      #32271c;
  --bg3:      #443626;
  --border:   #4a3e2c;
  --accent:   #e8a44a;
  --accent2:  #7eb8d4;
  --text0:    #f0e6d0;
  --text1:    #b8a888;
  --text2:    #706050;
  --danger:   #e05544;
  --tab-active-bg: #1c1410;
  --ctrlchar-bg: #e8a44a;
  --ctrlchar-fg: #1c1410;
}

[data-theme="blue-steel"] {
  --bg0:      #0d1b2a;
  --bg1:      #142032;
  --bg2:      #1b2a3a;
  --bg3:      #243447;
  --border:   #2a3f55;
  --accent:   #4da8da;
  --accent2:  #7ec8e3;
  --text0:    #cce4f4;
  --text1:    #7eb8d4;
  --text2:    #4a7a9e;
  --danger:   #e05555;
  --tab-active-bg: #0d1b2a;
  --ctrlchar-bg: #4da8da;
  --ctrlchar-fg: #0d1b2a;
}

[data-theme="teal-noir"] {
  --bg0:      #0a1f1a;
  --bg1:      #0f2c24;
  --bg2:      #143830;
  --bg3:      #1a483e;
  --border:   #1f5248;
  --accent:   #3ecf8e;
  --accent2:  #6de8b8;
  --text0:    #b4f4d8;
  --text1:    #6de8b8;
  --text2:    #3a9070;
  --danger:   #e05555;
  --tab-active-bg: #0a1f1a;
  --ctrlchar-bg: #3ecf8e;
  --ctrlchar-fg: #0a1f1a;
}

[data-theme="white-blue"] {
  --bg0:      #e8f4fc;
  --bg1:      #d0e8f8;
  --bg2:      #b8dcf4;
  --bg3:      #9cccee;
  --border:   #4da8da;
  --accent:   #1a5a8a;
  --accent2:  #2a7ab8;
  --text0:    #0a2a4a;
  --text1:    #1a4a7a;
  --text2:    #2a5a9a;
  --danger:   #cc2222;
  --tab-active-bg: #e8f4fc;
  --ctrlchar-bg: #1a5a8a;
  --ctrlchar-fg: #ffffff;
}

[data-theme="yellow-blue"] {
  --bg0:      #1a1a00;
  --bg1:      #242400;
  --bg2:      #323200;
  --bg3:      #444400;
  --border:   #666600;
  --accent:   #f4d800;
  --accent2:  #ffe600;
  --text0:    #ffff66;
  --text1:    #ffff33;
  --text2:    #cccc00;
  --danger:   #ff4444;
  --tab-active-bg: #1a1a00;
  --ctrlchar-bg: #2a5a9a;
  --ctrlchar-fg: #ffffff;
}

[data-theme="black-green"] {
  --bg0:      #001a00;
  --bg1:      #002400;
  --bg2:      #003200;
  --bg3:      #004400;
  --border:   #006600;
  --accent:   #00ff00;
  --accent2:  #33ff33;
  --text0:    #ccffcc;
  --text1:    #99ff99;
  --text2:    #009900;
  --danger:   #ff4444;
  --tab-active-bg: #001a00;
  --ctrlchar-bg: #00ff00;
  --ctrlchar-fg: #001a00;
}

[data-theme="white-green"] {
  --bg0:      #e8f8e8;
  --bg1:      #d0f0d0;
  --bg2:      #b8e8b8;
  --bg3:      #9cd89c;
  --border:   #2a8a2a;
  --accent:   #1a5a1a;
  --accent2:  #2a7a2a;
  --text0:    #0a2a0a;
  --text1:    #1a4a1a;
  --text2:    #2a6a2a;
  --danger:   #cc2222;
  --tab-active-bg: #e8f8e8;
  --ctrlchar-bg: #1a5a1a;
  --ctrlchar-fg: #ffffff;
}

[data-theme="blue-yellow"] {
  --bg0:      #001133;
  --bg1:      #002266;
  --bg2:      #003399;
  --bg3:      #0044cc;
  --border:   #3366ff;
  --accent:   #ffdd00;
  --accent2:  #ffee55;
  --text0:    #ffee00;
  --text1:    #ffdd33;
  --text2:    #ccaa00;
  --danger:   #ff4444;
  --tab-active-bg: #001133;
  --ctrlchar-bg: #003399;
  --ctrlchar-fg: #ffffff;
}

[data-theme="ocean"] {
  --bg0:      #0a1929;
  --bg1:      #0d2741;
  --bg2:      #143652;
  --bg3:      #1a4a6a;
  --border:   #2a5a7a;
  --accent:   #4da8da;
  --accent2:  #7ec8e3;
  --text0:    #ffffff;
  --text1:    #d0e8f8;
  --text2:    #9cccee;
  --danger:   #e05555;
  --tab-active-bg: #0a1929;
  --ctrlchar-bg: #4da8da;
  --ctrlchar-fg: #0a1929;
}

/* Custom themes loaded from localStorage */
[data-theme^="custom-"] {
  --bg0:      var(--ct-bg0, #1a1a1a);
  --bg1:      var(--ct-bg1, #252525);
  --bg2:      var(--ct-bg2, #303030);
  --bg3:      var(--ct-bg3, #3a3a3a);
  --border:   var(--ct-border, #404040);
  --accent:   var(--ct-accent, #3fb950);
  --accent2:  var(--ct-accent2, #58a6ff);
  --text0:    var(--ct-text0, #e6edf3);
  --text1:    var(--ct-text1, #8b949e);
  --text2:    var(--ct-text2, #484f58);
  --danger:   var(--ct-danger, #f85149);
  --tab-active-bg: var(--ct-bg0, #1a1a1a);
  --ctrlchar-bg: var(--ct-ctrlchar-bg, #f4d800);
  --ctrlchar-fg: var(--ct-ctrlchar-fg, #000000);
}

/* ── Layout constants ────────────────────────────────────────────────── */
:root {
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-preview: 'Lora', serif;

  --topbar-h:  52px;
  --tabbar-h:  36px;
  --toolbar-h: 40px;
  --status-h:  28px;
  --radius:    6px;
}