/* * css/theme.css * * CSS Custom Properties (also called CSS variables) are defined here. * The idea is to have ONE place where all the colours, fonts, and sizes live. * Every other CSS file uses these variables instead of hardcoded values. * * This means if you want to change the accent colour from green to blue, * you change it in ONE place here and it updates everywhere automatically — * instead of hunting through every file for every instance of that hex code. * * Variables are defined on :root because that's the highest-level element * in the DOM (essentially the element), so the variables are accessible * from any selector in any stylesheet without specificity issues. */ :root { /* CSS custom properties always start with two dashes (--). You reference them later with var(--property-name). The font stack lists fallbacks after JetBrains Mono — if the Google Font hasn't loaded yet, the browser will try each font in order until it finds one that's installed. This prevents a flash of an ugly system font while the webfont is loading. */ --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; /* Font sizes — named tokens so changing "base" updates all body text at once */ --font-size-base: 13px; /* main terminal text, input field */ --font-size-small: 11px; /* buttons, subtitle hints */ --font-size-banner: 11px; /* ASCII art (same value, separate name for clarity) */ /* Background colours — we have four levels, each slightly lighter than the last. This creates visual depth: the darkest colour is the farthest back (the page), and lighter colours come forward (the terminal window, then the title bar). */ --color-bg-page: #090c10; /* the page background behind the terminal */ --color-bg-terminal: #0d1117; /* the terminal window surface */ --color-bg-titlebar: #161b22; /* the title bar and quick-bar backgrounds */ --color-bg-hover: #21262d; /* button backgrounds on hover */ /* Two border colours — "border" for prominent edges, "border-subtle" for internal dividers that should be visible but not draw too much attention. */ --color-border: #30363d; --color-border-subtle: #21262d; /* Text colours at three levels of emphasis. "primary" is for important content, "muted" for descriptions and secondary text, and "faint" for UI chrome like the title bar label. */ --color-text-primary: #e1e4e8; --color-text-muted: #8b949e; --color-text-faint: #6e7681; /* The terminal output colour palette. These map directly to CSS classes — for example, --color-green is used by .line--green in terminal.css, and 'green' is the colorClass you'd use in a data/files.js line tuple. */ --color-green: #85e89d; /* success messages, directory names, ASCII art glow */ --color-blue: #6495ed; /* cornmeal blue for links, hostname in prompt, informational text */ --color-purple: #b392f0; /* accent colour, used sparingly */ --color-gold: #febc2e; /* section labels and key names inside files */ --color-red: #f97583; /* errors, warnings, the "root" part of the prompt */ --color-white: #e1e4e8; /* primary content text (same value as text-primary) */ /* The three macOS-style "traffic light" dots in the title bar */ --color-dot-red: #ff5f57; --color-dot-yellow: #febc2e; --color-dot-green: #28c840; /* Border radius tokens — using a variable means all corners change together */ --radius-terminal: 12px; /* the outer window rounded corners */ --radius-btn: 5px; /* quick-bar button corners */ /* Consistent horizontal padding used throughout the terminal body */ --padding-h: 20px; /* The box-shadow uses two layers separated by a comma. The first adds a subtle green glow (matches the terminal accent colour). The second adds a dark drop shadow for physical depth. Using two layers together creates a more natural-looking shadow than one alone. */ --shadow-terminal: 0 0 60px rgba(0, 255, 100, 0.06), 0 24px 80px rgba(0, 0, 0, 0.8); }