/* ============================================================ THEME — Terminal (VT100 CRT Phosphor) ----------------------------------------------------------- This is the ONE FILE users swap to reskin their site. Replace this file with any other theme.css to change the entire look & feel. Tokens only — no component CSS lives here. TOKEN CONTRACT ----------------------------------------------------------- Every theme MUST declare every variable in this file, even if it sets it to a neutral value (e.g. --blur-md: none;). That's what guarantees a clean one-file swap. Slots: Surfaces : --paper, --paper-raised, --paper-sunk, --paper-glass Ink : --ink, --ink-soft, --ink-faint, --graphite, --muted Lines : --guide, --guide-soft, --hair, --hair-soft Primary : --ai, --ai-ink, --ai-wash (cyan — terminal links) Seal : --shu, --shu-wash (error red) Accent : --ochre, --ochre-wash (warning amber) Code : --code-bg/ink/muted/accent/green/blue Type : --font-display/script/serif/sans/mono Radius : --r-sm, --r-md, --r-lg Shadow : --shadow-sm, --shadow-md, --shadow-lg Blur : --blur-sm, --blur-md, --blur-lg (glass only; else 'none') Glow : --glow-sm, --glow-md, --glow-lg (emphasis / rim / phosphor) Motion : --duration-fast, --duration-normal, --duration-slow, --ease FONT NOTE ----------------------------------------------------------- A terminal has no serif and no handwritten script. To keep the contract intact without breaking the mood, every font slot — display, script, serif, sans, mono — points at --font-mono. The contract survives; the CRT stays pure. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap'); :root { /* Surfaces — deep warm black chassis + phosphor haze */ --paper: #0A0E0A; --paper-raised: #0F140F; --paper-sunk: #070A07; --paper-glass: rgba(79, 224, 120, 0.06); /* Ink — phosphor green on the tube */ --ink: #4FE078; --ink-soft: #2A8B42; --ink-faint: #1E5E2F; --graphite: #1A3D22; --muted: #2A8B42; /* Scanlines / rule lines */ --guide: #1E5E2F; --guide-soft: #143618; --hair: #2A8B42; --hair-soft: #1E5E2F; /* Primary accent — cyan (interactive links in a terminal) */ --ai: #7FDBFF; --ai-ink: #5AB3D4; --ai-wash: rgba(127, 219, 255, 0.10); /* Seal — error red */ --shu: #FF5A5A; --shu-wash: rgba(255, 90, 90, 0.10); /* Accent — warning amber */ --ochre: #F0A030; --ochre-wash: rgba(240, 160, 48, 0.10); /* Code surface */ --code-bg: #070A07; --code-ink: #4FE078; --code-muted: #2A8B42; --code-accent: #F0A030; --code-green: #8FFCA8; --code-blue: #7FDBFF; /* Typography — mono everywhere (see FONT NOTE in header) */ --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', ui-monospace, Consolas, Menlo, 'Courier New', monospace; --font-sans: var(--font-mono); --font-serif: var(--font-mono); --font-display: var(--font-mono); --font-script: var(--font-mono); /* Radius — a CRT has hard pixel corners */ --r-sm: 0; --r-md: 0; --r-lg: 0; /* Shadows — a CRT doesn't cast, it emits. Keep subtle. */ --shadow-sm: 0 0 0 1px rgba(79, 224, 120, 0.20); --shadow-md: 0 0 0 1px rgba(79, 224, 120, 0.30), 0 0 12px rgba(79, 224, 120, 0.15); --shadow-lg: 0 0 0 1px rgba(79, 224, 120, 0.40), 0 0 24px rgba(79, 224, 120, 0.25); --shadow-xl: 0 0 0 1px rgba(79, 224, 120, 0.50), 0 0 36px rgba(79, 224, 120, 0.30); --shadow-2xl: 0 0 0 1px rgba(79, 224, 120, 0.60), 0 0 56px rgba(79, 224, 120, 0.40); /* Blur — terminal has no frosted glass; declared so swap stays lossless */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — phosphor halo (this is where the theme sings) */ --glow-sm: 0 0 4px rgba(79, 224, 120, 0.25); --glow-md: 0 0 8px rgba(79, 224, 120, 0.35); --glow-lg: 0 0 16px rgba(79, 224, 120, 0.45); /* Motion — terminals are instant */ --duration-fast: 100ms; --duration-normal: 140ms; --duration-slow: 220ms; --ease: cubic-bezier(0.2, 0.0, 0.2, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ----------------------------------------------------------- Bridge the library's expected names to this theme's native palette. Components can now write m.color(surface-default) or var(--surface-default) and reskin with the theme automatically. ---------------------------------------------------------- */ /* Backgrounds (page-level) */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); /* Interactive (hover / active wash layers) — phosphor-green translucent overlays */ --interactive-hover: rgba(79, 224, 120, 0.08); --interactive-active: rgba(79, 224, 120, 0.15); /* Brand (identity — action-primary usually references these) */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action (primary / secondary / tertiary) */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback / status (high-level semantic) */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info (three-part: default / subtle / text) — cyan */ --info-default: var(--ai); --info-subtle: rgba(127, 219, 255, 0.12); --info-text: #7FDBFF; /* Status — success — bright phosphor */ --success-default: #8FFCA8; --success-subtle: rgba(143, 252, 168, 0.12); --success-text: #8FFCA8; /* Status — warning — amber */ --warning-default: var(--ochre); --warning-subtle: rgba(240, 160, 48, 0.12); --warning-text: var(--ochre); /* Status — error — red */ --error-default: var(--shu); --error-subtle: rgba(255, 90, 90, 0.12); --error-text: #FF7A7A; /* ---------------------------------------------------------- LIBRARY SCALES (space / radius / type / motion / z) ----------------------------------------------------------- The library mixins emit var(--space-), var(--radius-), var(--font-primary), var(--font-size-), var(--z-), … Themes declare the slots so those mixins always resolve. ---------------------------------------------------------- */ /* Space scale (rem for accessibility — natural scale, same as Sketchbook) */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; /* Radius alias — CRT has hard pixel corners, so every slot is 0 */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 0; /* Typography — mono body + key scale slots (15px matches CRT body setting) */ --font-primary: var(--font-mono); --font-size-base: 15px; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers (layering is universal) */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ---------------------------------------------------------- OPTIONAL COMPONENT OVERRIDES (Feature 1.3) ----------------------------------------------------------- Terminal-specific component expressions: zero radii on buttons/cards/inputs and a subtle phosphor glow on cards instead of a drop shadow. ---------------------------------------------------------- */ --btn-radius: 0; --card-radius: 0; --input-radius: 0; --card-shadow: var(--glow-sm); --card-border: 1px solid var(--ink-faint); }