/* ========================================================================== ghostline — Design tokens Ghostline hacker-terminal aesthetic. Phosphor green on deep black-green. Mono-first typography: JetBrains Mono + IBM Plex Mono fallback. ========================================================================== */ /* Self-hosted fonts (S2.D audit fix 2026-04-23) — @font-face declarations moved to base.css. No more Google Fonts CDN / CORS noise. */ :root { /* === Ghostline palette ================================================= */ --gl-bg-app: #070D0A; /* deep phosphor-black */ --gl-bg-inset: #040807; /* one level darker */ --gl-bg-user: #0E1915; /* inbound bubble */ --gl-bg-op: #1A1326; /* operator bubble */ --gl-bd-op: #3E2A55; /* operator bubble border */ --gl-ink: #EAF8EF; /* primary text */ --gl-dim: rgba(234, 248, 239, 0.58); --gl-low: rgba(234, 248, 239, 0.40); --gl-rule: rgba(255, 255, 255, 0.06); --gl-rule-hot: rgba(74, 191, 140, 0.35); /* Phosphor accent (brand) */ --gl-phos: #4abf8c; /* primary phosphor green */ --gl-phos-deep: #6BCFA6; /* brighter inner gradient */ --gl-phos-glow: rgba(74, 191, 140, 0.35); /* glow alpha */ --gl-manual: #FFB1C1; /* manual-mode pink */ --gl-manual-glow: rgba(255, 177, 193, 0.20); /* === Mapped to legacy token names (so components.css inherits) ========= */ --bg-0: var(--gl-bg-app); --bg-1: #0A120E; --bg-2: #0E1915; --bg-3: #121F1A; --bg-4: #19302A; --border-weak: var(--gl-rule); --border-strong: rgba(255, 255, 255, 0.10); --border-glow: var(--gl-phos); --fg-0: var(--gl-ink); --fg-1: rgba(234, 248, 239, 0.82); --fg-2: var(--gl-dim); --fg-3: var(--gl-low); --fg-brand: var(--gl-phos); /* Signal colors re-tuned for phosphor aesthetic */ --sig-success: var(--gl-phos); --sig-warn: #F2D200; --sig-error: var(--gl-manual); --sig-info: var(--gl-phos-deep); --sig-magenta: #E24BFF; --sig-lime: var(--gl-phos); --sig-violet: #8A7BFF; /* Hotness gradient — cold→phosphor→manual */ --hotness-1: #4F576A; --hotness-2: #626B7E; --hotness-3: #7D8594; --hotness-4: #5AAFC8; --hotness-5: #3AD5FF; --hotness-6: #8EE4B2; --hotness-7: var(--gl-phos); --hotness-8: #DDD156; --hotness-9: #FFB547; --hotness-10: var(--gl-manual); /* === Typography — mono-first ========================================== */ --font-ui: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --font-display: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; --fs-xs: 10px; --fs-sm: 11.5px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 16px; --fs-2xl: 19px; --fs-display: 28px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-normal: 1.45; --lh-loose: 1.6; --letter-spacing-caps: 0.16em; /* === Spacing ========================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* === Radii — sharp, terminal ========================================== */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 3px; --radius-md: 5px; /* === Motion =========================================================== */ --motion-fast: 180ms cubic-bezier(.2, .8, .2, 1); /* === Layout chrome ==================================================== */ --layout-max: 1440px; --rail-w: 64px; --header-h: 48px; --tabs-h: 44px; /* === Glass surfaces (ghostline liquid-glass) ========================== */ --glass-bg: rgba(14, 25, 21, 0.55); --glass-bg-strong: rgba(14, 25, 21, 0.80); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-top: rgba(255, 255, 255, 0.18); --glass-blur: 14px; --glass-blur-strong: 22px; /* === Elevation shadows ================================================ */ --elev-1: 0 1px 3px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.04); --elev-2: 0 4px 16px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05); --elev-3: 0 8px 28px rgba(0, 0, 0, 0.60), 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06); --elev-4: 0 16px 48px rgba(0, 0, 0, 0.72), 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07); --elev-phos: 0 8px 32px var(--gl-phos-glow), 0 0 0 1px rgba(167, 240, 208, 0.08); /* === Easing =========================================================== */ --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-gl: cubic-bezier(0.2, 0.8, 0.2, 1); /* === Durations ======================================================== */ --dur-micro: 160ms; --dur-short: 220ms; --dur-medium: 320ms; /* === Focus ring ======================================================= */ --ring-color: var(--gl-phos); --ring-width: 2px; --ring-offset: 2px; /* === Legacy indigo scale (kept for components.css refs, re-tinted) ==== */ --indigo-400: var(--gl-phos-deep); --indigo-500: var(--gl-phos); --indigo-600: #3C9A72; --indigo-700: #2E7B5A; /* === Wizard layout ==================================================== */ --wizard-max-w: 840px; /* === Cursor glow position (updated by JS) ============================= */ --mx: 50%; --my: 50%; /* === Section accent system (S0.NAV2) ================================= --accent flips per so primary buttons, focus rings, link hovers, active sidebar item, progress fills, SSE live indicator pulse as a single "where am I" signal. Phosphor is the default/WORK accent so existing chrome keeps looking identical when data-section is missing. --gl-phos is preserved for the logo itself (brand identity, must not flip). */ --accent: var(--gl-phos); --accent-glow: var(--gl-phos-glow); --accent-deep: var(--gl-phos-deep); /* Section-label colours — always fixed per section (not flipped with data-section) so labels in the sidebar act as a stable colour legend. */ --section-label-work: var(--gl-phos); --section-label-analyze: var(--sig-info); --section-label-build: var(--sig-violet); --section-label-team: var(--sig-error); } /* --- Section accent palette per body[data-section] --------------------- */ [data-section="work"] { --accent: var(--gl-phos); --accent-glow: rgba(74, 191, 140, 0.35); --accent-deep: var(--gl-phos-deep); } [data-section="analyze"] { --accent: var(--sig-info); --accent-glow: rgba(58, 213, 255, 0.35); --accent-deep: #2DB8E0; } [data-section="build"] { --accent: var(--sig-violet); --accent-glow: rgba(138, 123, 255, 0.35); --accent-deep: #6F5EE8; } [data-section="team"] { --accent: var(--sig-error); --accent-glow: rgba(255, 77, 106, 0.35); --accent-deep: #E53A57; }