/* Lieston brand tokens + chisel helpers. Dark theme is primary. Do not invent colors or radii — use these variables. Border-radius is 0 everywhere except circular status dots. */ :root { /* Surfaces */ --bg: #0b0b0e; --panel: #141519; --panel2: #1c1d22; --border: #2a2b31; /* Text */ --text: #f5f7fa; --muted: #8b8f99; /* Accent + status */ --accent: #60a5fa; --green: #34d399; --red: #f87171; --amber: #fbbf24; --purple: #a78bfa; /* generic purple (see CLAUDE.md § Color roles) */ /* Chain badge colors — standalone, identical across themes so ETH stays blue / SOL stays purple regardless of the accent role. */ --eth: #5b8bff; --sol: #a479ff; /* Chisel geometry */ --notch: 16px; /* .chisel top-right notch */ --notch-s: 7px; /* .chisel-s top-right notch */ --brk-size: 8px; /* .brk corner bracket length */ --brk-w: 2px; /* .brk corner bracket thickness */ } /* Light theme — stubbed for later. Values are placeholders, not final. */ [data-theme="light"] { --bg: #ffffff; --panel: #f5f7fa; --panel2: #eceef2; --border: #d6d9e0; --text: #0b0b0e; --muted: #5b616b; --accent: #2563eb; --green: #059669; --red: #dc2626; --amber: #d97706; --purple: #7c3aed; } /* ---- Phosphor-green theme (PUBLIC pages only) ---- Scoped to .theme-green on the public . Admin (_AdminLayout, no theme class) keeps the legacy blue :root values. Only tokens change here — layout/section CSS is untouched (Stage 1). */ .theme-green { --bg: #080a08; --panel: #0d130f; /* prototype --bg2 */ --panel2: #131b15; /* derived: a step lighter than --panel (proto has only bg2) */ --border: #1c2a22; /* prototype --line */ --line2: #243830; /* dashed row dividers (wired in Stage 2) */ --text: #eafff4; /* prototype --ink */ --muted: #9db3a8; /* prototype --dim */ --accent: #35f5a0; /* phosphor green — replaces the blue accent */ --green: #3fe08a; --red: #ff5c6a; --amber: #e6c766; /* warn amber (border/text); warn bg is still a hard rgba in site.css */ --purple: #a479ff; /* align generic purple to the SOL chain color */ --glow: rgba(53, 245, 160, 0.42); --faint: rgba(120, 255, 190, 0.035); --warn-border: #4a4021; --warn-bg: rgba(210, 170, 40, 0.07); --warn-ink: #e6c766; } /* ---- Chisel helpers ---- */ /* Top-right notch, 16px. */ .chisel { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); } /* Top-right notch, small (7px). */ .chisel-s { clip-path: polygon(0 0, calc(100% - var(--notch-s)) 0, 100% var(--notch-s), 100% 100%, 0 100%); } /* Corner brackets: top-left + bottom-right, always visible (not hover). */ .brk { position: relative; } .brk::before, .brk::after { content: ""; position: absolute; width: var(--brk-size); height: var(--brk-size); pointer-events: none; } .brk::before { top: 0; left: 0; border-top: var(--brk-w) solid var(--accent); border-left: var(--brk-w) solid var(--accent); } .brk::after { bottom: 0; right: 0; border-bottom: var(--brk-w) solid var(--accent); border-right: var(--brk-w) solid var(--accent); } /* Uppercase micro-heading. */ .uphead { text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; color: var(--muted); font-size: 11px; }