:root {
    --bg:              #1a1a14;
    --bg2:             #22221a;
    --bg3:             #2a2a20;
    --border:          #3a3a2a;
    --text:            #d4cfb8;
    --text-muted:      #7a7a60;
    --accent:          #8aad6e;
    --accent2:         #b5a96e;
    --cream:           #e8e2cc;
    --moss:            #4a5d3a;
    --amber:           #c9985a;
    --reacted-accent:  #b5a96e;
    --burgundy:        #7a4040;

    --background-color:           var(--bg);
    --secondary-background-color: var(--bg2);
    --text-color:                 var(--text);
    --border-color:               var(--border);

    --border-radius-s:  .5rem;
    --border-radius-m:  .75rem;
    --border-radius-xl: 2rem;
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Courier New', Courier, monospace;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.window-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.window-bar .dots { display: flex; gap: 6px; }
.window-bar .dot  { width: 10px; height: 10px; border-radius: 50%; transition: all .25s linear; }
.window-bar .dot:hover  { width: 20px; height: 20px;}
.window-bar .dot.r { background: #7a4040; }
.window-bar .dot.y { background: #7a6a40; }
.window-bar .dot.g { background: var(--accent); opacity: .7; }