/* ============================================================================ Phaedra Lab Platform — Shared Design System (Session 9) Single source of truth for tokens + primitives. Linked by every page. Light mode = default (:root). Dark mode = [data-theme="dark"]. See DESIGN-SYSTEM.md for the locked values + rationale. Token strategy: every legacy name already used in the pages (--bg/--panel/--panel2/--line/--text/--muted/--green/--amber/--red/--blue/ --purple/--teal AND --ink/--surface/--surface-2/--green-tint/... from the estimator) is defined here in BOTH modes, so a page only needs to DROP its inline :root and inherit. Semantic aliases (--accent/--danger/--warning/...) map to the same values. ============================================================================ */ /* ---------- LIGHT (default) ---------- */ :root{ color-scheme: light; --font: "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace; /* surfaces */ --bg:#FFFFFF; --panel:#FAFAFA; --surface:#FAFAFA; --panel2:#F5F5F5; --surface-2:#F5F5F5; --line:#E0E0E0; --line-2:#CCCCCC; --card-border:#BDBDBD; /* higher-contrast edge for cards/boxes so they read against the grid */ /* text */ --text:#0A0A0A; --ink:#0A0A0A; --muted:#666666; --ink-soft:#555555; --ink-faint:#8A8A8A; /* accent — FIELD GREEN (yellow-leaning, daylight-legible) */ --green:#5B8C1A; --accent:#5B8C1A; --success:#5B8C1A; --green-deep:#4A7315; --accent-dim:#4A7315; --green-soft:#7BA83A; --accent-glow:rgba(91,140,26,.15); --green-tint:rgba(91,140,26,.12); --green-tint-2:rgba(91,140,26,.20); /* status / semantic */ --amber:#CC7700; --warning:#CC7700; --amber-tint:rgba(204,119,0,.12); --red:#CC0000; --danger:#CC0000; --red-tint:rgba(204,0,0,.10); --blue:#2563C9; --blue-tint:rgba(37,99,201,.12); --purple:#7A5AF0; --teal:#0E9AA0; /* elevation */ --radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.07); --shadow-lift:0 2px 10px rgba(0,0,0,.10); --hdr-bg:rgba(255,255,255,.90); /* frosted sticky-header background */ /* background instrument grid (light = MORE visible, used outdoors) */ --grid-size:26px; --grid-color:rgba(91,140,26,.20); --grid-color-strong:rgba(91,140,26,.30); /* glow is a no-op in light mode (reads only on dark); soft shadow instead */ --glow:none; --glow-soft:var(--shadow); } /* ---------- DARK ---------- */ [data-theme="dark"]{ color-scheme: dark; --bg:#0A0A0A; --panel:#15181A; --surface:#15181A; --panel2:#0E1110; --surface-2:#0E1110; --line:#222222; --line-2:#333333; --card-border:#3A4247; --text:#F0F0F0; --ink:#F0F0F0; --muted:#999999; --ink-soft:#AAAAAA; --ink-faint:#666666; /* accent — TRUE PHOSPHOR GREEN (glow on black) */ --green:#00FF41; --accent:#00FF41; --success:#00FF41; --green-deep:#00CC33; --accent-dim:#00CC33; --green-soft:#66FF8A; --accent-glow:rgba(0,255,65,.12); --green-tint:rgba(0,255,65,.10); --green-tint-2:rgba(0,255,65,.18); --amber:#FFAA00; --warning:#FFAA00; --amber-tint:rgba(255,170,0,.14); --red:#FF3333; --danger:#FF3333; --red-tint:rgba(255,51,51,.14); --blue:#5AA8FF; --blue-tint:rgba(90,168,255,.14); --purple:#B78CFF; --teal:#3EC8C8; --shadow:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5); --shadow-lift:0 4px 18px rgba(0,0,0,.55); --hdr-bg:rgba(10,10,10,.90); --grid-color:rgba(0,255,65,.11); --grid-color-strong:rgba(0,255,65,.16); --glow:0 0 10px var(--accent-glow); --glow-soft:0 0 10px var(--accent-glow); } /* ============================================================================ PRIMITIVES (opt-in classes — no bare-tag restyling, to protect page CSS) ============================================================================ */ /* ---- Background instrument grid ---- */ /* Apply `grid-bg` to ; `grid-strong` for the login/landing front door. Painted as the body's own fixed background so all content sits above it. */ .grid-bg{ background-color:var(--bg); background-image: repeating-linear-gradient(0deg, var(--grid-color) 0 1px, transparent 1px var(--grid-size)), repeating-linear-gradient(90deg, var(--grid-color) 0 1px, transparent 1px var(--grid-size)); background-attachment:fixed; } .grid-bg.grid-strong{ background-image: repeating-linear-gradient(0deg, var(--grid-color-strong) 0 1px, transparent 1px var(--grid-size)), repeating-linear-gradient(90deg, var(--grid-color-strong) 0 1px, transparent 1px var(--grid-size)); } /* ---- Monospace data (job/PO numbers, dates, $, stitch counts, margins) ---- */ .num,.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0; } .num.pos{ color:var(--green); } .num.neg{ color:var(--red); } .num.warn{ color:var(--amber); } [data-theme="dark"] .num.pos{ text-shadow:0 0 8px var(--accent-glow); } /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:var(--font); font-size:14px; font-weight:600; line-height:1; padding:12px 16px; border-radius:var(--radius-sm); border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease; } .btn:hover{ border-color:var(--line-2); } .btn:disabled{ opacity:.6; cursor:default; } /* Primary CTA: light = solid fill + soft shadow, white text; dark = outlined/tinted + glow border, accent text. */ .btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:var(--shadow); } .btn-primary:hover{ background:var(--accent-dim); border-color:var(--accent-dim); } [data-theme="dark"] .btn-primary{ background:var(--accent-glow); color:var(--accent); border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); } [data-theme="dark"] .btn-primary:hover{ background:rgba(0,255,65,.18); } .btn-ghost{ color:var(--muted); } .btn-ghost:hover{ color:var(--text); border-color:var(--accent); } .btn-danger{ color:var(--danger); border-color:var(--danger); background:transparent; } .btn-danger:hover{ background:var(--red-tint); } /* ---- Cards ---- */ .card{ background:var(--panel); border:1px solid var(--card-border); border-radius:8px; padding:16px; } /* ---- Status badges ---- */ /* Base = outlined (reads well on light). Dark = solid fill + glow halo. Pages emit: class="badge tone-" (map status -> tone in JS). */ .badge{ display:inline-flex; align-items:center; gap:4px; font-family:var(--font); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; line-height:1.4; padding:4px 9px; border-radius:999px; border:1px solid currentColor; white-space:nowrap; } .tone-good { color:var(--green); } .tone-prod { color:var(--green-deep); } .tone-done { color:var(--green-soft); } .tone-warn { color:var(--amber); } .tone-info { color:var(--blue); } .tone-neutral{ color:var(--muted); } .tone-bad { color:var(--danger); } .tone-mute { color:var(--ink-faint); } /* Light-mode fill: faint tint wash behind the outline */ .tone-good { background:var(--green-tint); } .tone-prod { background:var(--green-tint); } .tone-done { background:var(--green-tint); } .tone-warn { background:var(--amber-tint); } .tone-info { background:var(--blue-tint); } .tone-bad { background:var(--red-tint); } /* Dark-mode: solid-fill badges with glow halos on positive states */ [data-theme="dark"] .badge{ color:#0A0A0A; border-color:transparent; } [data-theme="dark"] .tone-good { background:var(--green); box-shadow:0 0 10px var(--accent-glow); } [data-theme="dark"] .tone-prod { background:var(--green-deep); box-shadow:0 0 10px var(--accent-glow); } [data-theme="dark"] .tone-done { background:var(--green-soft); } [data-theme="dark"] .tone-warn { background:var(--amber); } [data-theme="dark"] .tone-info { background:var(--blue); } [data-theme="dark"] .tone-neutral{ background:#3A4048; color:#E8EFE9; } [data-theme="dark"] .tone-bad { background:var(--red); color:#0A0A0A; } [data-theme="dark"] .tone-mute { background:#262b2e; color:#8a948c; } /* ---- Sticky-header blur utility (fixes the iOS bug: needs -webkit- prefix) ---- */ .sticky-blur{ -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } @supports not ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){ .sticky-blur{ background:var(--bg); } } /* ---- Theme toggle ---- */ /* Inline placement: put a