Spaces:
Sleeping
Sleeping
/* ============================================================
Upwork Proposal Strategist — "Aurora Glass" design system
Dark luxury glassmorphism. Luxury through restraint.
INJECTABLE INTO STREAMLIT via app/ui/theme.py:
st.markdown(f"[style]{...design_system.css...}[/style]",
unsafe_allow_html=True)
REQUIRED FONT — theme.py injects:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
THEME: tokens live under [data-theme="dark"] / [data-theme="light"].
theme.py::apply_step_accent sets data-theme on <html> and writes
--accent-h / --accent-c / --accent2-h inline, so the accent stays a
single violet family with only a whisper of per-step drift.
Every custom-property name and every class name in this file is part
of the contract with app/ui/theme.py and the screen modules. Values
changed for Aurora; names deliberately unchanged.
============================================================ */
:root {
/* Accent defaults. apply_step_accent() overwrites these inline on <html>.
At these defaults --accent resolves to #8B5CF6 (Aurora primary). */
--accent-h: 293.5;
--accent-c: 0.213;
--accent2-h: 304;
/* Legacy density multipliers kept so any existing calc() still resolves. */
--r: 1;
--pad: 1;
/* radius scale — 8 / 10 / 12 / 16 / 20 / 24 / pill */
--radius-xs: 8px; /* small */
--radius-input: 10px; /* control */
--radius-btn: 12px; /* button */
--radius-sm: 12px; /* alias: button */
--radius: 16px; /* card */
--radius-lg: 20px; /* large card */
--radius-xl: 24px; /* shell */
--radius-pill: 999px;
/* spacing — 8px base unit */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--gap: 16px;
--section-gap: 24px;
--space-xl: 32px;
/* typography — one family */
--ff-display: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ff-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ff-mono: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* motion */
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--t-fast: 120ms;
--t-base: 180ms;
--t-slow: 240ms;
/* rare premium accent — used in exactly one place (.evidence-note) */
--gold: #C8A96B;
/* very fine noise so large dark areas do not read as flat */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- DARK — the Aurora reference ---------- */
[data-theme="dark"] {
--bg: #081020;
--bg-deep: #050A14;
--bg-2: #0B1323;
--surface: rgba(255, 255, 255, 0.04); /* canvas --glass-lo */
--surface-hi: rgba(255, 255, 255, 0.10); /* canvas --glass-hover */
--surface-2: rgba(255, 255, 255, 0.06); /* canvas --glass */
--surface-3: rgba(255, 255, 255, 0.080);
--surface-hover: rgba(255, 255, 255, 0.090);
--glass: rgba(11, 19, 35, 0.72);
--border-soft: rgba(255, 255, 255, 0.07); /* canvas --stroke-soft */
--border: rgba(255, 255, 255, 0.12); /* canvas --stroke */
--border-2: rgba(255, 255, 255, 0.160);
--hairline: rgba(255, 255, 255, 0.07); /* canvas --stroke-soft */
--text: #F8FAFC;
--text-muted: #94A3B8;
--text-faint: #64748B;
--text-disabled: #475569;
--accent: oklch(0.627 var(--accent-c) var(--accent-h));
--accent-2: oklch(0.656 0.225 var(--accent2-h));
--accent-press: oklch(0.542 var(--accent-c) var(--accent-h));
--accent-light: oklch(0.745 0.175 var(--accent2-h));
--on-soft: oklch(0.745 0.175 var(--accent2-h));
--accent-fg: #FFFFFF;
--accent-soft: oklch(0.627 var(--accent-c) var(--accent-h) / 0.14);
--accent-line: oklch(0.720 0.160 var(--accent2-h) / 0.22);
--accent-glow: oklch(0.627 var(--accent-c) var(--accent-h) / 0.22);
--ring: oklch(0.627 var(--accent-c) var(--accent-h) / 0.10);
--focus-ring: oklch(0.627 var(--accent-c) var(--accent-h) / 0.78);
--accent-grad: linear-gradient(135deg,
oklch(0.542 var(--accent-c) var(--accent-h)),
oklch(0.600 0.240 var(--accent-h)) 55%,
oklch(0.656 0.225 var(--accent2-h)));
--go: #22C55E; --go-soft: rgba(34, 197, 94, 0.12); --go-ink: #4ADE80; --go-glow: rgba(34, 197, 94, 0.20);
--warn: #F59E0B; --warn-soft: rgba(245, 158, 11, 0.12); --warn-ink: #FBBF24; --warn-glow: rgba(245, 158, 11, 0.20);
--stop: #EF4444; --stop-soft: rgba(239, 68, 68, 0.12); --stop-ink: #F87171; --stop-glow: rgba(239, 68, 68, 0.20);
--info: #3B82F6;
--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.34);
--shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.42);
--grain-opacity: 0.012;
--aura-1: rgba(139, 92, 246, 0.14);
--mote: rgba(196, 181, 253, 0.50);
--aura-2: rgba(91, 33, 182, 0.09);
--aura-3: rgba(37, 99, 235, 0.05);
--card-grad: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
--card-grad-hi: linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10));
--inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.10);
/* widget layer — consumed by theme.py::_BRIDGE_CSS */
--input-border: rgba(255, 255, 255, 0.09);
--input-focus: rgba(139, 92, 246, 0.58);
--menu-bg: rgba(9, 17, 31, 0.94);
--menu-border: rgba(255, 255, 255, 0.11);
--menu-shadow: 0 18px 50px rgba(0, 0, 0, 0.48);
--sidebar-bg: rgba(5, 10, 20, 0.40);
--nav-hover: rgba(255, 255, 255, 0.055);
--nav-active-text: #FFFFFF;
/* File drop target — deliberately stronger than --surface so the area is
unmistakable on the dark ground, and a clear violet state on drag-over. */
--dropzone-bg: rgba(255, 255, 255, 0.055);
--dropzone-border: rgba(255, 255, 255, 0.240);
--dropzone-bg-hover: rgba(139, 92, 246, 0.10);
/* ---- Artboard primitives -------------------------------------------
Lifted verbatim from the Aurora Glass design canvas (build-g.mjs) so
the components below match the artboards 1:1 rather than approximately. */
--gl-glass: rgba(255, 255, 255, 0.06);
--gl-glass-hi: rgba(255, 255, 255, 0.10);
--gl-glass-lo: rgba(255, 255, 255, 0.04);
--gl-stroke: rgba(255, 255, 255, 0.12);
--gl-stroke-soft: rgba(255, 255, 255, 0.07);
--gl-track: rgba(255, 255, 255, 0.08);
--gl-inner: inset 0 1px 0 rgba(255, 255, 255, 0.10);
--gl-lift: 0 14px 44px rgba(0, 0, 0, 0.48);
--gl-glow: 0 0 20px rgba(139, 92, 246, 0.25);
--gl-violet: #C4B5FD;
--gl-well: rgba(0, 0, 0, 0.24);
--gl-pad-card: 24px;
--gl-gutter: 24px;
}
/* ---------- LIGHT — the same language on paper ---------- */
[data-theme="light"] {
--bg: #F3F5FA;
--bg-deep: #E9EDF5;
--bg-2: #FFFFFF;
--surface: rgba(255, 255, 255, 0.70);
--surface-hi: rgba(255, 255, 255, 0.92);
--surface-2: rgba(255, 255, 255, 0.86);
--surface-3: rgba(15, 23, 42, 0.045);
--surface-hover: rgba(15, 23, 42, 0.055);
--glass: rgba(255, 255, 255, 0.78);
--border-soft: rgba(15, 23, 42, 0.07);
--border: rgba(15, 23, 42, 0.12);
--border-2: rgba(15, 23, 42, 0.170);
--hairline: rgba(255, 255, 255, 0.90);
--text: #0F172A;
--text-muted: #475569;
--text-faint: #64748B;
--text-disabled: #94A3B8;
--accent: oklch(0.542 var(--accent-c) var(--accent-h));
--accent-2: oklch(0.580 0.225 var(--accent2-h));
--accent-press: oklch(0.470 var(--accent-c) var(--accent-h));
--accent-light: oklch(0.627 var(--accent-c) var(--accent-h));
--on-soft: oklch(0.470 var(--accent-c) var(--accent-h));
--accent-fg: #FFFFFF;
--accent-soft: oklch(0.627 var(--accent-c) var(--accent-h) / 0.10);
--accent-line: oklch(0.627 var(--accent-c) var(--accent-h) / 0.26);
--accent-glow: oklch(0.627 var(--accent-c) var(--accent-h) / 0.18);
--ring: oklch(0.627 var(--accent-c) var(--accent-h) / 0.12);
--focus-ring: oklch(0.542 var(--accent-c) var(--accent-h) / 0.78);
--accent-grad: linear-gradient(135deg,
oklch(0.542 var(--accent-c) var(--accent-h)),
oklch(0.580 0.240 var(--accent-h)) 55%,
oklch(0.620 0.225 var(--accent2-h)));
--go: #15803D; --go-soft: rgba(34, 197, 94, 0.13); --go-ink: #166534; --go-glow: rgba(34, 197, 94, 0.18);
--warn: #B45309; --warn-soft: rgba(245, 158, 11, 0.15); --warn-ink: #92400E; --warn-glow: rgba(245, 158, 11, 0.18);
--stop: #B91C1C; --stop-soft: rgba(239, 68, 68, 0.12); --stop-ink: #991B1B; --stop-glow: rgba(239, 68, 68, 0.16);
--info: #1D4ED8;
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07);
--shadow: 0 8px 32px rgba(15, 23, 42, 0.10);
--shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.14);
--grain-opacity: 0.010;
--aura-1: rgba(139, 92, 246, 0.10);
--mote: rgba(109, 40, 217, 0.22);
--aura-2: rgba(91, 33, 182, 0.05);
--aura-3: rgba(37, 99, 235, 0.04);
--card-grad: linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.74));
--card-grad-hi: linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94));
--inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.90);
/* widget layer — consumed by theme.py::_BRIDGE_CSS */
--input-border: rgba(15, 23, 42, 0.10);
--input-focus: rgba(124, 58, 237, 0.55);
--menu-bg: rgba(255, 255, 255, 0.96);
--menu-border: rgba(15, 23, 42, 0.10);
--menu-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
--sidebar-bg: rgba(255, 255, 255, 0.62);
--nav-hover: rgba(15, 23, 42, 0.045);
--nav-active-text: #4C1D95;
/* File drop target — see the dark block. */
--dropzone-bg: rgba(15, 23, 42, 0.030);
--dropzone-border: rgba(15, 23, 42, 0.230);
--dropzone-bg-hover: rgba(124, 58, 237, 0.07);
/* ---- Artboard primitives — the same language on paper ---------------- */
--gl-glass: rgba(255, 255, 255, 0.74);
--gl-glass-hi: rgba(255, 255, 255, 0.94);
--gl-glass-lo: rgba(255, 255, 255, 0.52);
--gl-stroke: rgba(15, 23, 42, 0.12);
--gl-stroke-soft: rgba(15, 23, 42, 0.07);
--gl-track: rgba(15, 23, 42, 0.08);
--gl-inner: inset 0 1px 0 rgba(255, 255, 255, 0.90);
--gl-lift: 0 14px 44px rgba(15, 23, 42, 0.14);
--gl-glow: 0 0 20px rgba(124, 58, 237, 0.18);
--gl-violet: #6D28D9;
--gl-well: rgba(15, 23, 42, 0.04);
--gl-pad-card: 24px;
--gl-gutter: 24px;
}
/* ============================================================ base */
* { box-sizing: border-box; }
body {
font-family: var(--ff-body);
color: var(--text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 14px;
line-height: 1.5;
}
/* Static atmospheric lighting lives on Streamlit's own app container (see the
widget-override section below) because that element paints an opaque
background of its own. Deliberately NOT animated — the glow stays soft and
stationary so content remains the dominant visual element.
The grain rides above as a fixed, click-through film at ~1% opacity. */
body::after {
content: "";
position: fixed; inset: 0; z-index: 9999; pointer-events: none;
background-image: var(--grain); background-size: 160px;
opacity: var(--grain-opacity);
mix-blend-mode: overlay;
}
h1, h2, h3, h4 {
font-family: var(--ff-display);
font-weight: 600;
letter-spacing: -0.025em;
margin: 0;
}
button { font-family: inherit; }
::selection { background: var(--accent-soft); color: var(--on-soft); }
/* Visible focus everywhere — WCAG AA, never removed for glass. */
:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
.mono { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
/* ============================================================ screen header
Emitted by theme.py::screen_head — .screen-head / .eyebrow /
.screen-title / .screen-sub */
.screen-head { margin-bottom: var(--section-gap); }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--ff-mono);
font-size: 12px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent-light);
padding: 5px 12px 5px 10px;
border-radius: var(--radius-pill);
border: 1px solid var(--accent-line);
background: var(--accent-soft);
margin-bottom: 14px;
}
.eyebrow::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
}
.screen-title {
font-size: 40px; font-weight: 600; line-height: 1.2;
letter-spacing: -0.021em; color: var(--text);
margin: 0;
}
.screen-sub {
color: var(--text-muted);
font-size: 14px; line-height: 1.5;
margin: 10px 0 0; max-width: 64ch;
text-wrap: pretty;
}
.screen-sub b { color: var(--text); font-weight: 600; }
/* ============================================================ glass surfaces
.card / .card-pad are emitted by the screens; Streamlit's own
st.container(border=True) is matched to these in theme.py. */
.card {
position: relative;
background: var(--card-grad);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow), var(--inset-hi);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: transform var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
background var(--t-base) var(--ease);
}
.card + .card { margin-top: var(--gap); }
.card-pad { padding: 20px; }
.twocol {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap);
align-items: start;
}
/* ============================================================ evidence lists
.panel-title / .pico / .checkitem / .ci-ico — analysis screen */
.panel-title {
display: flex; align-items: center; gap: 10px;
font-family: var(--ff-display);
font-size: 16px; font-weight: 600; line-height: 1.35;
color: var(--text);
margin-bottom: 6px;
}
.panel-title .pico {
width: 26px; height: 26px; flex: none;
border-radius: var(--radius-xs);
display: inline-grid; place-items: center;
font-size: 13px; line-height: 1;
}
.pico.pos { background: var(--go-soft); color: var(--go-ink); }
.pico.neg { background: var(--warn-soft); color: var(--warn-ink); }
.checkitem {
display: grid; grid-template-columns: 18px 1fr;
gap: 12px; padding: 12px 0; align-items: start;
}
.checkitem + .checkitem { border-top: 1px solid var(--border-soft); }
.checkitem .ci-ico { margin-top: 1px; font-size: 13px; line-height: 1.3; }
.checkitem.pos .ci-ico { color: var(--go); }
.checkitem.neg .ci-ico { color: var(--warn); }
.checkitem b { font-size: 14px; font-weight: 600; color: var(--text); }
.checkitem p {
font-size: 13px; line-height: 1.5;
color: var(--text-muted); margin: 4px 0 0;
text-wrap: pretty;
}
/* ============================================================ verdict banner
Emitted by theme.py::verdict_banner — .verdict.go / .warn / .stop */
.verdict {
position: relative; overflow: hidden;
border-radius: var(--radius-lg);
padding: 24px 26px;
border: 1px solid var(--border);
background: var(--card-grad);
box-shadow: var(--shadow-lg), var(--inset-hi);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.verdict::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(80% 130% at 0% 0%, var(--g-aura), transparent 58%);
}
.verdict.go { --g-aura: var(--go-glow); }
.verdict.warn { --g-aura: var(--warn-glow); }
.verdict.stop { --g-aura: var(--stop-glow); }
.verdict > * { position: relative; }
.verdict-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 13px;
border-radius: var(--radius-pill);
font-family: var(--ff-mono);
font-size: 12px; font-weight: 500;
letter-spacing: 0.10em; text-transform: uppercase;
border: 1px solid var(--border);
background: var(--surface-2);
width: fit-content;
}
.verdict.go .verdict-badge { color: var(--go-ink); }
.verdict.warn .verdict-badge { color: var(--warn-ink); }
.verdict.stop .verdict-badge { color: var(--stop-ink); }
.verdict-badge .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.verdict.go .dot { background: var(--go); }
.verdict.warn .dot { background: var(--warn); }
.verdict.stop .dot { background: var(--stop); }
.verdict h2 {
font-size: 26px; font-weight: 600; line-height: 1.25;
letter-spacing: -0.02em; color: var(--text);
margin: 14px 0 8px;
}
.verdict p {
color: var(--text-muted);
font-size: 14px; line-height: 1.5;
max-width: 60ch; margin: 0;
text-wrap: pretty;
}
/* ============================================================ proposal
Emitted by theme.py::proposal_doc — .doc-toolbar / .wordcount /
.toolbar-spacer / .proposal-doc / .evidence-note */
.doc-toolbar {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; margin-bottom: 12px;
}
.toolbar-spacer { flex: 1; }
.wordcount {
display: inline-flex; align-items: center; gap: 6px;
height: 26px; padding: 0 10px;
border-radius: var(--radius-pill);
border: 1px solid var(--gl-stroke);
background: var(--gl-glass-lo);
font-size: 12px; font-weight: 500;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.proposal-doc {
position: relative; overflow: hidden;
background: var(--card-grad);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow), var(--inset-hi);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 32px 36px;
}
.proposal-doc::before {
content: ""; position: absolute;
left: 0; top: 20px; bottom: 20px; width: 2px;
border-radius: 2px;
background: linear-gradient(var(--accent), var(--accent-2));
}
.proposal-doc p {
position: relative;
margin: 0 0 14px;
font-size: 14px; line-height: 1.5;
color: var(--text);
text-wrap: pretty;
}
.proposal-doc p:last-child { margin-bottom: 0; }
/* The one place gold appears — the grounding guarantee. */
.evidence-note {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 18px;
font-size: 12px; line-height: 1.4;
color: var(--gold);
padding: 6px 12px;
border-radius: var(--radius-pill);
background: rgba(200, 169, 107, 0.08);
border: 1px solid rgba(200, 169, 107, 0.24);
}
.evidence-note::before {
content: ""; width: 5px; height: 5px; border-radius: 50%;
background: var(--gold); flex: none;
}
/* ============================================================ legacy chips
.ups-chip / .ups-section / .ups-side-title are emitted by theme.py.
Definitions also exist in the bridge CSS; kept here so the sheet is
self-contained if the bridge is ever loaded on its own. */
.ups-chip {
display: inline-flex; align-items: center;
padding: 5px 12px;
border-radius: var(--radius-pill);
font-family: var(--ff-mono);
font-size: 12px; font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
}
.ups-chip-ready { background: var(--go-soft); color: var(--go-ink); border: 1px solid rgba(34, 197, 94, 0.28); }
.ups-chip-info { background: var(--accent-soft); color: var(--on-soft); border: 1px solid var(--accent-line); }
.ups-chip-missing { background: var(--stop-soft); color: var(--stop-ink); border: 1px solid rgba(239, 68, 68, 0.28); }
.ups-chip-neutral { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid rgba(245, 158, 11, 0.28); }
/* The panel title. On the canvas every panel is headed by .ct — 18px, semi
bold, sentence case — not by a small tracked label, so .ups-section (which
21 call sites already use) becomes that. */
.ups-section {
font-family: var(--ff-display);
font-size: 18px; font-weight: 600;
letter-spacing: -0.008em; line-height: 1.3;
color: var(--text);
margin: 0 0 18px;
}
.ups-side-title {
font-family: var(--ff-mono);
font-size: 12px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-faint);
margin: 0 0 10px;
}
/* ============================================================ Aurora components
The design canvas's own component vocabulary, ported one-for-one. Sizes,
weights, radii, strokes and shadows are lifted verbatim from the artboard
build (build-g.mjs) and expressed against the theme tokens above, so the
same components hold in light mode.
Everything here is presentational and rendered by theme.py helpers into
markdown blocks. No rule in this section styles, wraps or positions a
Streamlit control — the widget layer lives in theme.py::_BRIDGE_CSS. */
/* icons — 24px view box, 2px stroke, currentColor, sized by CSS only */
.ups-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ups-ico svg {
width: var(--ico, 18px); height: var(--ico, 18px); display: block;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* the glass primitive every surface is built from */
.ups-glass {
position: relative;
background: var(--gl-glass);
backdrop-filter: blur(20px) saturate(1.3);
-webkit-backdrop-filter: blur(20px) saturate(1.3);
border: 1px solid var(--gl-stroke);
border-radius: var(--radius);
box-shadow: var(--shadow), var(--gl-inner);
}
/* type scale */
.ups-h1 { font-size: 40px; line-height: 1.2; font-weight: 600; letter-spacing: -0.021em; margin: 0; }
.ups-h2 { font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -0.016em; margin: 0; }
.ups-ct { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.008em; }
.ups-cap { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.ups-t2 { color: var(--text-muted); }
.ups-num { font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.ups-sp { flex: 1; }
.ups-flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ups-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gl-gutter); align-items: start; }
.ups-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gl-gutter); align-items: start; }
/* ---- top bar: breadcrumb, segmented step rail, step caption ---------- */
.ups-top {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
min-height: 56px; padding: 0 2px 16px; margin: 0 0 20px;
border-bottom: 1px solid var(--gl-stroke-soft);
}
.ups-crumb {
font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
color: var(--text-muted); white-space: nowrap;
}
.ups-crumb b { color: var(--text); font-weight: 600; }
.ups-steps { display: flex; align-items: center; gap: 6px; }
.ups-seg-i {
width: 28px; height: 4px; border-radius: 2px; background: var(--gl-track);
transition: background var(--t-slow) ease-out, box-shadow var(--t-slow) ease-out;
}
.ups-seg-i.is-done { background: oklch(0.627 var(--accent-c) var(--accent-h) / 0.5); }
.ups-seg-i.is-now { background: var(--accent); box-shadow: var(--gl-glow); }
/* ---- sidebar chrome: brand, rail cap, engine card -------------------- */
.ups-brand { display: flex; align-items: center; gap: 11px; padding: 2px 4px 18px; }
.ups-brand-mark {
width: 32px; height: 32px; border-radius: var(--radius-input); flex: none;
display: grid; place-items: center; color: #fff;
background: var(--accent-grad); box-shadow: var(--gl-glow), var(--gl-inner);
}
.ups-brand-mark .ups-ico svg { width: 17px; height: 17px; }
.ups-brand-t { font-weight: 700; font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.35; color: var(--text); }
.ups-brand-tag {
font-size: 11px; line-height: 1.45; color: var(--text-muted);
margin: -10px 0 16px; padding: 0 4px; text-wrap: pretty;
}
.ups-brand-s { font-size: 9.5px; letter-spacing: 0.15em; color: var(--text-muted); margin-top: 3px; display: block; }
.ups-rail-cap {
font-size: 10.5px; letter-spacing: 0.13em; color: var(--text-muted);
padding: 0 6px 6px; text-transform: uppercase; margin: 0;
}
.ups-engine {
padding: 16px; border-radius: var(--radius); background: var(--gl-glass);
border: 1px solid var(--gl-stroke); box-shadow: var(--gl-inner); margin: 10px 0 0;
}
.ups-engine .k { font-size: 10.5px; letter-spacing: 0.12em; color: var(--text-muted); text-transform: uppercase; }
.ups-engine .v { font-weight: 600; font-size: 13.5px; margin-top: 8px; overflow-wrap: anywhere; color: var(--text); }
.ups-engine .s { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }
.ups-dot {
width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; position: relative;
background: var(--go); box-shadow: 0 0 0 3px var(--go-glow);
}
.ups-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-glow); }
.ups-dot.stop { background: var(--stop); box-shadow: 0 0 0 3px var(--stop-glow); }
/* ---- panel ----------------------------------------------------------- */
.ups-panel { padding: var(--gl-pad-card); border-radius: var(--radius); overflow: hidden; }
.ups-panel-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
/* ---- KPI tiles ------------------------------------------------------- */
.ups-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gl-gutter); }
.ups-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ups-kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ups-kpis.one { grid-template-columns: minmax(0, 1fr); }
.ups-kpi {
padding: 20px; border-radius: var(--radius); overflow: hidden; text-align: left;
transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out,
background var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.ups-kpi:hover { background: var(--gl-glass-hi); transform: translateY(-3px); box-shadow: var(--gl-lift), var(--gl-inner); }
.ups-kpi.on { border-color: oklch(0.627 var(--accent-c) var(--accent-h) / 0.5); box-shadow: var(--gl-glow), var(--shadow), var(--gl-inner); }
.ups-kpi-t { display: flex; align-items: flex-start; gap: 12px; }
.ups-kpi .lab { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.ups-kpi .val { font-weight: 600; font-size: 28px; line-height: 1.25; letter-spacing: -0.02em; margin-top: 6px; display: block; color: var(--text); }
.ups-kpi .delta { font-size: 12px; margin-top: 8px; color: var(--go); display: block; }
.ups-kpi .delta.warn { color: var(--warn); }
.ups-kpi .delta.t2 { color: var(--text-muted); }
.ups-kpi .delta.stop { color: var(--stop); }
.ups-kpi .ic {
width: 36px; height: 36px; border-radius: var(--radius-input); flex: none; margin-left: auto;
background: var(--gl-glass-hi); border: 1px solid var(--gl-stroke);
display: grid; place-items: center; color: var(--gl-violet);
box-shadow: var(--gl-inner); font-size: 13px; font-weight: 600;
}
.ups-kpi .ic .ups-ico svg { width: 17px; height: 17px; }
/* ---- data rows ------------------------------------------------------- */
.ups-thead {
display: grid; gap: 14px; padding: 0 14px 10px;
font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-muted); border-bottom: 1px solid var(--gl-stroke-soft);
}
.ups-row {
position: relative; display: grid; align-items: center; gap: 14px;
padding: 12px 14px; border-radius: var(--radius-input);
border: 1px solid transparent; width: 100%; text-align: left;
transition: background var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.ups-row::before {
content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px;
border-radius: 2px; background: var(--accent); pointer-events: none;
transform: scaleY(0); opacity: 0;
transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}
.ups-row:hover::before, .ups-row.on::before { transform: scaleY(1); opacity: 1; }
.ups-row:hover { background: var(--gl-glass-hi); }
.ups-row.on { background: oklch(0.627 var(--accent-c) var(--accent-h) / 0.12); border-color: oklch(0.627 var(--accent-c) var(--accent-h) / 0.3); }
.ups-row b { font-weight: 600; font-size: 14px; }
.ups-row .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: block; }
.ups-tile {
width: 34px; height: 34px; border-radius: var(--radius-xs); flex: none;
background: var(--gl-glass-hi); border: 1px solid var(--gl-stroke);
display: grid; place-items: center; font-size: 10px; font-weight: 600;
color: var(--gl-violet); box-shadow: var(--gl-inner);
}
.ups-tile .ups-ico svg { width: 16px; height: 16px; }
.ups-hr { height: 1px; background: var(--gl-stroke-soft); }
/* ---- read-only field (mirrors the widget layer's input styling) ------ */
.ups-field {
min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
border-radius: var(--radius); background: var(--gl-glass-lo);
border: 1px solid var(--gl-stroke-soft); font-size: 14px;
transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out, background var(--t-fast) ease-out;
}
.ups-field:hover { background: var(--gl-glass-hi); }
.ups-field.on { border-color: oklch(0.627 var(--accent-c) var(--accent-h) / 0.5); box-shadow: var(--gl-glow); background: var(--gl-glass); }
.ups-field .ph { color: var(--text-muted); }
.ups-field .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
/* ---- chips ----------------------------------------------------------- */
.ups-tag {
display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
border-radius: var(--radius-pill); font-size: 12px; font-weight: 500;
border: 1px solid var(--gl-stroke); background: var(--gl-glass-lo);
color: var(--text-muted); white-space: nowrap;
}
.ups-tag .ups-ico svg { width: 12px; height: 12px; }
.ups-tag.ok { color: var(--go); border-color: rgba(34, 197, 94, 0.32); background: var(--go-soft); }
.ups-tag.warn { color: var(--warn); border-color: rgba(245, 158, 11, 0.32); background: var(--warn-soft); }
.ups-tag.stop { color: var(--stop); border-color: rgba(239, 68, 68, 0.32); background: var(--stop-soft); }
.ups-tag.violet { color: var(--gl-violet); border-color: oklch(0.627 var(--accent-c) var(--accent-h) / 0.38); background: oklch(0.627 var(--accent-c) var(--accent-h) / 0.14); }
/* ---- meters ---------------------------------------------------------- */
.ups-meter { height: 6px; border-radius: 3px; background: var(--gl-track); overflow: hidden; }
.ups-meter i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); box-shadow: var(--gl-glow); }
.ups-meter.ok i { background: linear-gradient(90deg, #22C55E, #4ADE80); box-shadow: 0 0 20px rgba(34, 197, 94, 0.25); }
.ups-meter.warn i { background: linear-gradient(90deg, #E0A34A, #F0C078); box-shadow: 0 0 20px rgba(224, 163, 74, 0.25); }
.ups-meter.stop i { background: linear-gradient(90deg, #F1566E, #FB7A8E); box-shadow: 0 0 20px rgba(241, 86, 110, 0.25); }
/* ---- score ring ------------------------------------------------------ */
.ups-ring { position: relative; display: grid; place-items: center; width: 168px; height: 168px; }
.ups-ring svg { width: 168px; height: 168px; transform: rotate(-90deg); overflow: visible; }
.ups-ring .tr { fill: none; stroke: var(--gl-stroke-soft); stroke-width: 10; }
.ups-ring .bar { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 400ms ease-out; }
.ups-ring .comet { transform-box: view-box; transform-origin: 84px 84px; }
.ups-ring .comet circle { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 16px rgba(139, 92, 246, 0.9)); }
.ups-ring .val { position: absolute; text-align: center; }
.ups-ring .val b { display: block; font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.ups-ring .val span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
/* ---- key/value grid --------------------------------------------------- */
.ups-kv {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
background: var(--gl-stroke-soft); border: 1px solid var(--gl-stroke-soft);
border-radius: var(--radius); overflow: hidden;
}
.ups-kv.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ups-kvc { background: var(--gl-glass-lo); padding: 14px 16px; }
.ups-kvc .k { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.ups-kvc .v { font-size: 13.5px; font-weight: 500; margin-top: 6px; color: var(--text); overflow-wrap: anywhere; }
.ups-kvc .v.dim { color: var(--text-muted); font-style: italic; font-weight: 400; }
/* ---- console log ------------------------------------------------------ */
.ups-log {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.9;
color: var(--text-muted); background: var(--gl-well);
border: 1px solid var(--gl-stroke-soft); border-radius: var(--radius-input); padding: 14px 16px;
}
.ups-log .ok { color: var(--go); }
.ups-log .ac { color: var(--gl-violet); }
/* ---- evidence item + citation ----------------------------------------- */
.ups-ev { padding: 14px 0; border-bottom: 1px solid var(--gl-stroke-soft); }
.ups-ev:last-child { border-bottom: none; }
.ups-ev b { font-size: 14px; font-weight: 600; display: block; color: var(--text); }
.ups-ev p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.ups-cite {
display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted);
margin-top: 8px; padding: 4px 9px; border-radius: var(--radius-pill);
background: var(--gl-glass-lo); border: 1px solid var(--gl-stroke-soft);
}
.ups-cite .ups-ico svg { width: 11px; height: 11px; color: var(--gl-violet); }
/* Narrow viewports: the artboard is drawn at 1440. Collapse the multi-column
grids rather than letting them squeeze below a readable measure. */
@media (max-width: 900px) {
.ups-kpis, .ups-kpis.three, .ups-kpis.two,
.ups-grid2, .ups-grid3 { grid-template-columns: minmax(0, 1fr); }
.ups-kv, .ups-kv.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ups-h1 { font-size: 30px; }
}
/* ============================================================ motion
The app should feel alive without ever getting in the way. Ambient loops
are slow (3s+) and never interactive; interaction feedback is fast
(120-240ms). Everything is transform / opacity / background only — no
rule here changes layout, hit-testing or stacking on anything a person
can click. The whole section is off under prefers-reduced-motion, and
entrance delays are kept short so a stalled animation can never leave
content stranded invisible. */
@media (prefers-reduced-motion: no-preference) {
@keyframes auroraIn { from { opacity: 0; transform: translateY(12px) scale(0.994); } }
@keyframes softIn { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
@keyframes railDraw { from { transform: scaleY(0); } }
@keyframes lightPass { 0% { transform: translateX(-130%) skewX(-14deg); }
100% { transform: translateX(260%) skewX(-14deg); } }
@keyframes breathe { 0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.28); } }
/* Content arrives rather than appearing. */
.screen-head, .card, .verdict, .proposal-doc { animation: auroraIn 460ms var(--ease) backwards; }
.card:nth-of-type(2) { animation-delay: 60ms; }
.card:nth-of-type(3) { animation-delay: 120ms; }
/* The screen title resolves out of a soft blur — the one filmic moment. */
.screen-title { animation: softIn 620ms var(--ease) 50ms backwards; }
.screen-sub { animation: softIn 620ms var(--ease) 120ms backwards; }
/* Evidence rows cascade. Delays stay under 260ms on purpose. */
.checkitem { animation: auroraIn 420ms var(--ease) backwards; }
.checkitem:nth-child(2) { animation-delay: 150ms; }
.checkitem:nth-child(3) { animation-delay: 190ms; }
.checkitem:nth-child(4) { animation-delay: 225ms; }
.checkitem:nth-child(n+5) { animation-delay: 260ms; }
/* The eyebrow dot is the app's quiet heartbeat — present on every screen. */
.eyebrow::before { animation: breathe 3.2s var(--ease) infinite; }
/* The accent rail on the proposal draws itself down the page. */
.proposal-doc::before { transform-origin: top; animation: railDraw 760ms var(--ease) 200ms backwards; }
/* The verdict is the moment this whole product exists for. It gets one
slow pass of light, and it is the only surface that does. */
.verdict > * { z-index: 1; }
.verdict::after {
content: ""; position: absolute; z-index: 0; pointer-events: none;
top: 0; bottom: 0; left: 0; width: 42%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07) 48%, transparent);
animation: lightPass 7.5s var(--ease) 700ms infinite;
}
/* ── Ambient loops ───────────────────────────────────────────────────
An entrance plays once. Half a second after a screen loads, everything
above has finished and the page is a photograph. Everything below runs
forever, so every screen still moves while it is being read. All of it
is paint only — transform and opacity on pointer-events:none pseudo
elements — so none of it touches layout, hit-testing or stacking on
anything a person clicks, types into or drops a file onto. */
@keyframes cardPass { 0% { transform: translateX(-140%) skewX(-14deg); }
44% { transform: translateX(300%) skewX(-14deg); }
100% { transform: translateX(300%) skewX(-14deg); } }
@keyframes railGlow { 0%, 100% { opacity: 0.6; }
50% { opacity: 1; } }
@keyframes noteGlow { 0%, 100% { opacity: 0.55; }
50% { opacity: 0.95; } }
/* Every card takes the same slow pass of light the verdict does, at a
third of the strength and out of phase, so no two catch it together. */
.card { overflow: hidden; }
.card > * { position: relative; z-index: 1; }
.card::after {
content: ""; position: absolute; z-index: 0; pointer-events: none;
top: 0; bottom: 0; left: 0; width: 38%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.05) 50%, transparent);
animation: cardPass 9s var(--ease) infinite;
}
.card:nth-of-type(2)::after { animation-delay: 2.3s; }
.card:nth-of-type(3)::after { animation-delay: 4.6s; }
.card:nth-of-type(n+4)::after { animation-delay: 6.4s; }
/* The rail draws itself in, then keeps a slow pulse so the proposal page
is never completely still either. */
.proposal-doc::before { animation: railDraw 760ms var(--ease) 200ms backwards,
railGlow 5.2s var(--ease) 960ms infinite; }
.evidence-note::before { animation: noteGlow 4.6s var(--ease) infinite; }
.card:hover { transform: translateY(-2px); border-color: var(--border-2); background: var(--card-grad-hi); }
}
/* ============================================================
=== STREAMLIT WIDGET OVERRIDES ===
The authoritative widget layer lives in app/ui/theme.py::_BRIDGE_CSS
(injected after this sheet, with !important). These rules mirror it so
the sheet stands alone and the two never disagree.
============================================================ */
[data-testid="stAppViewContainer"] {
background:
radial-gradient(circle at 63% 18%, var(--aura-1), transparent 30%),
radial-gradient(circle at 82% 42%, var(--aura-2), transparent 34%),
radial-gradient(circle at 35% 72%, var(--aura-3), transparent 28%),
var(--bg);
background-attachment: fixed;
}
[data-testid="stHeader"] { background: transparent; }
.block-container { padding-top: 2.2rem; max-width: 960px; }
section[data-testid="stSidebar"] {
background: rgba(5, 10, 20, 0.40);
border-right: 1px solid var(--border-soft);
}
section[data-testid="stSidebar"] .block-container { padding-top: 1.4rem; }
.stButton > button {
font-family: var(--ff-body);
font-weight: 500;
font-size: 14px;
border-radius: var(--radius-btn);
height: 44px;
border: none;
color: var(--accent-fg);
background: var(--accent-grad);
box-shadow: 0 8px 24px var(--accent-glow);
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.stButton > button:hover { transform: translateY(-1px); }
.stButton > button:active { transform: scale(0.98); }
.stButton > button[kind="secondary"] {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
box-shadow: none;
}
.stTextInput input, .stTextArea textarea {
background: var(--surface);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: var(--radius-input);
color: var(--text);
font-family: var(--ff-body);
}
.stTextInput input:focus, .stTextArea textarea:focus {
border-color: rgba(139, 92, 246, 0.58);
box-shadow: 0 0 0 3px var(--ring);
}
[data-testid="stFileUploaderDropzone"] {
background: var(--dropzone-bg);
border: 1.5px dashed var(--dropzone-border);
border-radius: var(--radius);
color: var(--text-muted);
}
[data-testid="stFileUploaderDropzone"]:hover {
border-color: var(--accent);
background: var(--dropzone-bg-hover);
}
h1, h2, h3 { font-family: var(--ff-display) !important; letter-spacing: -0.025em; }
.stTabs [aria-selected="true"] { color: var(--accent-light) !important; }
[data-baseweb="radio"] [aria-checked="true"] div:first-child {
border-color: var(--accent) !important;
background: var(--accent) !important;
}
.stProgress > div > div > div > div {
background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
}
#MainMenu { visibility: hidden; }
footer { visibility: hidden; }
/* ============================================================
DEPTH — Aurora in the round
------------------------------------------------------------
These rules only lift a surface's contents onto their own
planes. They do nothing on their own: without a `perspective`
on an ancestor a translateZ collapses to flat, which is
exactly the safe default.
The perspective is NOT set here. app/ui/motion_runtime.py sets
it on a floated surface's parent at runtime, and only when that
parent passes canMove() — because `perspective` and
`transform-style: preserve-3d` each make an element the
containing block for its position:fixed descendants, the same
hazard as a transform. Putting either on .block-container would
break the file uploader's drop overlay app-wide.
============================================================ */
/* KPI tiles — badge floats above the number, label sits behind. */
.ups-kpi .ic { transform: translateZ(26px); }
.ups-kpi .val { transform: translateZ(15px); }
.ups-kpi .lab { transform: translateZ(7px); }
/* The verdict reads as a stack: badge, headline, body. */
.verdict-badge { transform: translateZ(28px); }
.verdict h2 { transform: translateZ(15px); }
.verdict p { transform: translateZ(7px); }
/* Evidence: the claim in front of its own sentence. */
.ups-ev b { transform: translateZ(14px); }
.ups-ev .ups-cite { transform: translateZ(6px); }
/* The fit ring's number rides above the disc as it lies back. */
.ups-ring .val { transform: translateZ(30px); }
/* Proposal toolbar floats off the page it belongs to. */
.doc-toolbar { transform: translateZ(18px); }
/* The compass turns. Its own lockup carries the vanishing point —
the sidebar brand has no uploader beneath it, so this one
perspective is safe to declare statically. */
.ups-brand { perspective: 420px; }
.ups-brand-mark {
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform;
}
/* Surfaces the driver floats. will-change only — the transform
itself is always written by Motion, never by CSS, so a failure
to animate leaves the surface flat and correct. */
.ups-panel, .ups-kpi, .ups-tile, .card, .verdict, .proposal-doc {
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.ups-kpi .ic, .ups-kpi .val, .ups-kpi .lab,
.verdict-badge, .verdict h2, .verdict p,
.ups-ev b, .ups-ev .ups-cite,
.ups-ring .val, .doc-toolbar { transform: none; }
.ups-brand { perspective: none; }
}
/* ============================================================
Upwork Proposal Strategist — "Aurora Glass" design system
Dark luxury glassmorphism. Luxury through restraint.
INJECTABLE INTO STREAMLIT via app/ui/theme.py:
st.markdown(f"[style]{...design_system.css...}[/style]",
unsafe_allow_html=True)
REQUIRED FONT — theme.py injects:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
THEME: tokens live under [data-theme="dark"] / [data-theme="light"].
theme.py::apply_step_accent sets data-theme on <html> and writes
--accent-h / --accent-c / --accent2-h inline, so the accent stays a
single violet family with only a whisper of per-step drift.
Every custom-property name and every class name in this file is part
of the contract with app/ui/theme.py and the screen modules. Values
changed for Aurora; names deliberately unchanged.
============================================================ */
:root {
/* Accent defaults. apply_step_accent() overwrites these inline on <html>.
At these defaults --accent resolves to #8B5CF6 (Aurora primary). */
--accent-h: 293.5;
--accent-c: 0.213;
--accent2-h: 304;
/* Legacy density multipliers kept so any existing calc() still resolves. */
--r: 1;
--pad: 1;
/* radius scale — 8 / 10 / 12 / 16 / 20 / 24 / pill */
--radius-xs: 8px; /* small */
--radius-input: 10px; /* control */
--radius-btn: 12px; /* button */
--radius-sm: 12px; /* alias: button */
--radius: 16px; /* card */
--radius-lg: 20px; /* large card */
--radius-xl: 24px; /* shell */
--radius-pill: 999px;
/* spacing — 8px base unit */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--gap: 16px;
--section-gap: 24px;
--space-xl: 32px;
/* typography — one family */
--ff-display: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ff-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ff-mono: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* motion */
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--t-fast: 120ms;
--t-base: 180ms;
--t-slow: 240ms;
/* rare premium accent — used in exactly one place (.evidence-note) */
--gold: #C8A96B;
/* very fine noise so large dark areas do not read as flat */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- DARK — the Aurora reference ---------- */
[data-theme="dark"] {
--bg: #081020;
--bg-deep: #050A14;
--bg-2: #0B1323;
--surface: rgba(255, 255, 255, 0.04); /* canvas --glass-lo */
--surface-hi: rgba(255, 255, 255, 0.10); /* canvas --glass-hover */
--surface-2: rgba(255, 255, 255, 0.06); /* canvas --glass */
--surface-3: rgba(255, 255, 255, 0.080);
--surface-hover: rgba(255, 255, 255, 0.090);
--glass: rgba(11, 19, 35, 0.72);
--border-soft: rgba(255, 255, 255, 0.07); /* canvas --stroke-soft */
--border: rgba(255, 255, 255, 0.12); /* canvas --stroke */
--border-2: rgba(255, 255, 255, 0.160);
--hairline: rgba(255, 255, 255, 0.07); /* canvas --stroke-soft */
--text: #F8FAFC;
--text-muted: #94A3B8;
--text-faint: #64748B;
--text-disabled: #475569;
--accent: oklch(0.627 var(--accent-c) var(--accent-h));
--accent-2: oklch(0.656 0.225 var(--accent2-h));
--accent-press: oklch(0.542 var(--accent-c) var(--accent-h));
--accent-light: oklch(0.745 0.175 var(--accent2-h));
--on-soft: oklch(0.745 0.175 var(--accent2-h));
--accent-fg: #FFFFFF;
--accent-soft: oklch(0.627 var(--accent-c) var(--accent-h) / 0.14);
--accent-line: oklch(0.720 0.160 var(--accent2-h) / 0.22);
--accent-glow: oklch(0.627 var(--accent-c) var(--accent-h) / 0.22);