/* ───────────────────────────────────────────────────────────────────── tokens.css — design tokens for every Yep web surface. Loaded FIRST by every HTML file (index, automation, trading, siblings, site). All existing legacy token names are preserved so that consumers (yep.css, trading.css, automation.css, siblings.css) keep working without rename. New tokens layer on top. Theme resolution order: 1. If or "dark", that wins. 2. Else, follow @media (prefers-color-scheme) to pick the override. 3. Default (no preference, no attr) = dark (matches historical look). Inline bootstrap in each HTML's reads localStorage('yep:theme') and sets data-theme pre-paint to avoid flash-of-wrong-theme. ───────────────────────────────────────────────────────────────────── */ :root { /* ── Color (dark, default) ────────────────────────────────────── */ --bg: #0e0f12; --bg-2: #1a1a2e; --panel: #1a1d24; --panel-2: #14161c; --panel-3: #20232b; --border: #2a2c33; --border-soft: #1f2228; --text: #e8e8e8; --text-muted: #c0c4cc; --muted: #888; --muted-2: #6a6d75; --accent: #4a90e2; --accent-soft: #6aa9d6; --accent-fg: #ffffff; --user-bg: #1a3a5a; --user-fg: #e6f1ff; --error: #e07070; --warn: #f7b500; --ok: #4caf50; --link: #88c5ff; --link-visited:#b8a4ff; --link-hover: #b3dcff; --surface-overlay: rgba(255, 255, 255, 0.04); --surface-overlay-2: rgba(255, 255, 255, 0.08); --code-bg: var(--panel-2); /* ── Tinted backgrounds for severity callouts (warn / error / ok) ── */ --bg-warn: #2a2418; --bg-warn-2: #1f1c14; --border-warn:#3a3322; --fg-warn: #f5c061; --bg-error: #2a1818; --bg-error-2: #1f1414; --border-error:#3a2222; --bg-ok: #141f14; --fg-ok: #a8e6aa; /* ── Type ────────────────────────────────────────────────────── */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter var", Inter, system-ui, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; --mono: var(--font-mono); /* legacy alias */ --text-xs: 11px; --text-sm: 12.5px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --leading-tight: 1.35; --leading-body: 1.55; --leading-relaxed: 1.7; --measure-chat: 72ch; /* ── Spacing (8-pt with 4-pt half) ───────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ── Radii ───────────────────────────────────────────────────── */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ── Elevation / shadow ──────────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.18); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.28); --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-drawer: 4px 0 24px rgba(0, 0, 0, 0.40); /* ── Motion ──────────────────────────────────────────────────── */ --motion-fast: 0.12s; --motion-base: 0.18s; --motion-slow: 0.28s; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ── Light theme override (manual via data-theme="light") ────────── */ :root[data-theme="light"] { --bg: #fbfbfc; --bg-2: #ececf3; --panel: #ffffff; --panel-2: #f4f5f8; --panel-3: #eceef3; --border: #d8dbe2; --border-soft: #e6e8ee; --text: #16181d; --text-muted: #3d424b; --muted: #5a606b; --muted-2: #828794; --accent: #2563c8; --accent-soft: #3b7bd9; --accent-fg: #ffffff; --user-bg: #dbe9fb; --user-fg: #0c2440; --error: #c43c3c; --warn: #b27800; --ok: #2e7d32; --link: #1d5bb8; --link-visited:#6f47c4; --link-hover: #0a3d80; --surface-overlay: rgba(0, 0, 0, 0.04); --surface-overlay-2: rgba(0, 0, 0, 0.07); --bg-warn: #fff8e1; --bg-warn-2: #fffbea; --border-warn:#e8c970; --fg-warn: #8a5a00; --bg-error: #fdebeb; --bg-error-2: #fff5f5; --border-error:#e8a8a8; --bg-ok: #e6f4e6; --fg-ok: #2e7d32; } /* ── System preference fallback (only if user hasn't chosen) ─────── */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #fbfbfc; --bg-2: #ececf3; --panel: #ffffff; --panel-2: #f4f5f8; --panel-3: #eceef3; --border: #d8dbe2; --border-soft: #e6e8ee; --text: #16181d; --text-muted: #3d424b; --muted: #5a606b; --muted-2: #828794; --accent: #2563c8; --accent-soft: #3b7bd9; --accent-fg: #ffffff; --user-bg: #dbe9fb; --user-fg: #0c2440; --error: #c43c3c; --warn: #b27800; --ok: #2e7d32; --link: #1d5bb8; --link-visited:#6f47c4; --link-hover: #0a3d80; --surface-overlay: rgba(0, 0, 0, 0.04); --surface-overlay-2: rgba(0, 0, 0, 0.07); --bg-warn: #fff8e1; --bg-warn-2: #fffbea; --border-warn:#e8c970; --fg-warn: #8a5a00; --bg-error: #fdebeb; --bg-error-2: #fff5f5; --border-error:#e8a8a8; --bg-ok: #e6f4e6; --fg-ok: #2e7d32; } }