/* Google Fonts preloaded for the editor */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Noto+Serif:ital,wght@0,400..700;1,400..700&family=Playwrite+IE:wght@100..400&family=Victor+Mono:ital,wght@0,400..700;1,400..700&display=swap');

:root {
    color-scheme: dark;
    --global-font: monospace;
    
    /* Dark Theme Default - Modest Navy */
    --bg-color: #0b111b;
    --text-color: #e2e8f0;
    --glass-bg: #131b27;
    --glass-border: rgba(148, 186, 237, 0.12);
    --glass-shadow: none;
    --accent: #4b7db3;
    --btn-hover: rgba(255, 255, 255, 0.08);
    --splitter-color: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] {
    color-scheme: light;
    /* Light Theme - Grey & Darker Beige */
    --bg-color: #b1aba2;
    --text-color: #333333;
    --glass-bg: #d5cdbf;
    --glass-border: rgba(160, 150, 135, 0.6);
    --glass-shadow: none;
    --accent: #8c7b66;
    --btn-hover: rgba(160, 150, 135, 0.4);
    --splitter-color: rgba(255, 255, 255, 0.5);
}

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

body {
    font-family: var(--global-font);
    background-color: var(--bg-color);
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center top;
    color: var(--text-color);
    height: 100vh;
    overflow: hidden;
    position: relative;
    transition: background-color 0.08s ease, background-image 0.08s ease, color 0.08s ease;
}

[data-theme="light"] body {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

/* Tokens for Syntax Highlighting (Dark Theme Default) */
.token.keyword { color: #ff7b72; font-weight: 500; }
.token.arrow { color: #79c0ff; font-weight: bold; }
.token.node { color: #d2a8ff; }
.token.string { color: #a5d6ff; }
.token.punctuation { color: #c9d1d9; opacity: 0.7; }
.token.whitespace { 
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
    background-position: center;
    background-repeat: no-repeat;
    user-select: none;
}

/* Light mode token overrides */
[data-theme="light"] .token.keyword { color: #d73a49; }
[data-theme="light"] .token.arrow { color: #0366d6; }
[data-theme="light"] .token.node { color: #6f42c1; }
[data-theme="light"] .token.string { color: #0a3069; }
[data-theme="light"] .token.punctuation { color: #24292e; opacity: 0.7; }
[data-theme="light"] .token.whitespace { background-image: radial-gradient(circle, rgba(0, 0, 0, 0.25) 1px, transparent 1px); }

/* Checkerboard Background */
.checkerboard-bg {
    background-color: var(--bg-color);
    background-image: 
      linear-gradient(45deg, rgba(128,128,128,0.1) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(128,128,128,0.1) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(128,128,128,0.1) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(128,128,128,0.1) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}