/* ═══════════════════════════════════════════════════════════════════════════ Pitch Workspace — JRCO design tokens Default: dark mode. Light: or ═══════════════════════════════════════════════════════════════════════════ */ @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap"); /* ── Font family tokens ───────────────────────────────────────────────────── */ :root { --font-heading: "Bebas Neue", sans-serif; --font-body: "DM Sans", sans-serif; --font-mono: "DM Mono", monospace; } /* ── Design tokens — dark (default) ───────────────────────────────────────── */ :root { color-scheme: dark; /* Core palette */ --red: #e74c3c; --black: #0e0e0e; --charcoal: #1a1a1a; --steel: #2c2c2c; --off-white: #f0ede8; --muted: #7a7a7a; --amber: #e8a020; --green: #2ecc71; --blue: #4a9eff; --purple: #a855f7; --orange: #f97316; /* Accent backgrounds (alpha) */ --amber-bg: rgba(232, 160, 32, 0.12); --green-bg: rgba(46, 204, 113, 0.12); --blue-bg: rgba(74, 158, 255, 0.12); --purple-bg: rgba(168, 85, 247, 0.12); --orange-bg: rgba(249, 115, 22, 0.12); /* Surfaces & structure */ --surface: #1a1a1a; --surface-hover: #242424; --border: #333333; --mid: #3d3d3d; /* Layout */ --radius: 4px; /* Scrollbars (Firefox) */ scrollbar-color: var(--steel) var(--black); } /* ── Design tokens — light ───────────────────────────────────────────────── */ body.light, [data-theme="light"] { color-scheme: light; /* Core palette */ --red: #c0392b; --black: #fafaf9; --charcoal: #ffffff; --steel: #f6f6f6; --off-white: #1a1a1a; --muted: #666666; --amber: #c87d10; --green: #1e9e52; --blue: #2275cc; --purple: #7c3aed; --orange: #ea580c; /* Accent backgrounds (alpha) */ --amber-bg: rgba(200, 125, 16, 0.1); --green-bg: rgba(30, 158, 82, 0.1); --blue-bg: rgba(34, 117, 204, 0.1); --purple-bg: rgba(124, 58, 237, 0.1); --orange-bg: rgba(234, 88, 12, 0.1); /* Surfaces & structure */ --surface: #ffffff; --surface-hover: #f2f2f2; --border: #dadada; --mid: #ececec; } /* ── Base reset ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } body { min-height: 100vh; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; background: var(--black); color: var(--off-white); } /* ── Utilities ─────────────────────────────────────────────────────────────── */ .mono { font-family: var(--font-mono); } /* ── Scrollbars — dark (default) ───────────────────────────────────────────── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--black); } ::-webkit-scrollbar-thumb { background: var(--steel); border-radius: var(--radius); border: 2px solid var(--black); } ::-webkit-scrollbar-thumb:hover { background: var(--mid); } /* ── Scrollbars — light ────────────────────────────────────────────────────── */ body.light, [data-theme="light"] { scrollbar-color: var(--mid) var(--black); } body.light ::-webkit-scrollbar-track, [data-theme="light"] ::-webkit-scrollbar-track { background: var(--black); } body.light ::-webkit-scrollbar-thumb, [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c4c4c4; border-color: var(--black); } body.light ::-webkit-scrollbar-thumb:hover, [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }