/* * static/css/base.css * Design tokens, reset, and typographic foundation. * * Aesthetic: Industrial Ops Terminal * Dark graphite workspace with electric cyan as the primary action colour * and amber for warnings/consumed state. Syne for UI chrome, JetBrains Mono * for instruction content. Strong structure, decisive whitespace. */ /* ── Fonts ─────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Syne'; src: url('/static/assets/fonts/syne.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/static/assets/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } /* ── Design tokens ──────────────────────────────────────────────────────── */ :root { /* Surfaces */ --bg-void: #080b0d; --bg-base: #0d1117; --bg-raised: #131920; --bg-overlay: #1a2230; --bg-hover: #1f2a3a; --bg-active: #243040; /* Borders */ --border-subtle: #1e2c3a; --border-muted: #253345; --border-strong: #2e4058; /* Text */ --text-primary: #e8edf2; --text-secondary:#8da0b3; --text-muted: #4a6175; --text-disabled: #2e4a5e; /* Brand / accent */ --cyan: #00d4ff; --cyan-dim: #007fa8; --cyan-glow: rgba(0, 212, 255, 0.15); /* Status */ --green: #00e676; --green-dim: #00703a; --green-glow: rgba(0, 230, 118, 0.15); --amber: #ffbe0b; --amber-dim: #8a6500; --amber-glow: rgba(255, 190, 11, 0.12); --red: #ff4f4f; --red-dim: #8a0000; --red-glow: rgba(255, 79, 79, 0.15); /* Typography */ --font-ui: 'Syne', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace; --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.75rem; /* 12px */ --text-base: 0.875rem; /* 14px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-cyan: 0 0 20px var(--cyan-glow), 0 0 40px rgba(0,212,255,0.06); /* Animation */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-normal: 240ms; --duration-slow: 400ms; } /* ── Light theme overrides ───────────────────────────────────────────────── */ /* Applied when is set by theme.js */ [data-theme="light"] { --bg-void: #e8e8e3; --bg-base: #f2f2ed; --bg-raised: #ffffff; --bg-overlay: #ebebe6; --bg-hover: #e2e2dc; --bg-active: #d8d8d2; --border-subtle: #d0d0ca; --border-muted: #c0c0b8; --border-strong: #a8a8a0; --text-primary: #1a1f2e; --text-secondary:#4a5568; --text-muted: #718096; --text-disabled: #a0aec0; /* Slightly desaturated accents so they work on a light surface */ --cyan: #007fa8; --cyan-dim: #005c7a; --cyan-glow: rgba(0, 127, 168, 0.14); --green: #166534; --green-dim: #14532d; --green-glow: rgba(22, 101, 52, 0.12); --amber: #92400e; --amber-dim: #78350f; --amber-glow: rgba(146, 64, 14, 0.1); --red: #b91c1c; --red-dim: #7f1d1d; --red-glow: rgba(185, 28, 28, 0.1); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.1); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-cyan: 0 0 20px rgba(0,127,168,0.1); } /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-ui); font-size: var(--text-base); color: var(--text-primary); background-color: var(--bg-base); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Focus ring */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--radius-sm); } /* ── Typography helpers ──────────────────────────────────────────────────── */ .mono { font-family: var(--font-mono); } .label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .muted { color: var(--text-muted); } .subtle { color: var(--text-secondary); }