/* ============================================================ EasyCabinet design system — shared tokens, fonts, primitives Used by the app (styles.css), website, and Learn site. Theme is controlled by [data-theme] on (default dark). ============================================================ */ :root, :root[data-theme="dark"] { /* stage + chrome */ --bg: #0d0b08; --stage: #0b0907; --glow: rgba(236, 154, 60, .07); --gridline: rgba(255, 255, 255, .028); --vignette: rgba(0, 0, 0, .55); /* panels / rails */ --panel: #15110c; --panel-2: #1c160f; --panel-3: #241c13; --rail: rgba(20, 15, 9, .92); /* glass rail fill */ --scrim: rgba(7, 5, 3, .66); /* modal backdrop */ /* hairlines */ --line: rgba(240, 228, 210, .10); --line-2: rgba(240, 228, 210, .055); /* text */ --text: #f1e9db; --muted: #b8ac99; --faint: #867c6e; /* amber accent */ --accent: #ec9a3c; --amber: #ec9a3c; --amber-2: #f6b563; --amber-ink: #1c1304; --accent-soft: rgba(236, 154, 60, .15); --accent-softer: rgba(236, 154, 60, .09); /* green status (legacy --accent-2 stays green) */ --accent-2: #83dca0; --green: #83dca0; --green-chip: rgba(131, 220, 160, .12); /* cream "paper" cards (PDF / cut list) */ --card: #f7f2e8; --card-ink: #251d12; --card-ink-2: #6c6253; --card-line: rgba(40, 30, 18, .13); /* shape + type */ --radius: 11px; --radius-lg: 18px; --font-ui: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: "Fraunces", "Hanken Grotesk", Georgia, serif; --shadow: 0 24px 60px rgba(0, 0, 0, .45); --shadow-sm: 0 8px 24px rgba(0, 0, 0, .35); /* amber-text token (spec: amber-text-light for pills/labels on dark bg) */ --amber-text: #f4b45f; /* Inset surfaces (active tab, user bubble, composer, menus) — near-black in dark mode; MUST flip with the theme (smoke 8-12 #1: hardcoded #131009 left the active tab unreadable in light mode). */ --panel-inset: #131009; --panel-inset-hover: rgba(255, 255, 255, 0.03); } :root[data-theme="light"] { --bg: #efe7d6; --stage: #efe7d6; --glow: rgba(236, 154, 60, .14); --gridline: rgba(70, 52, 28, .07); --vignette: rgba(120, 96, 58, .10); --panel: #fbf7ef; --panel-2: #f3ece0; --panel-3: #eadfce; --rail: rgba(252, 248, 240, .94); --scrim: rgba(120, 96, 58, .30); --line: rgba(45, 33, 18, .13); --line-2: rgba(45, 33, 18, .06); --text: #241c12; --muted: #6a6051; --faint: #9a9080; --accent: #d9822b; --amber: #d9822b; --amber-2: #b8691c; --amber-text: #b8691c; --amber-ink: #fff7ec; --accent-soft: rgba(217, 130, 43, .15); --accent-softer: rgba(217, 130, 43, .09); --accent-2: #3f9e63; --green: #3f9e63; --green-chip: rgba(63, 158, 99, .15); --card: #ffffff; --card-ink: #241c12; --card-ink-2: #6c6253; --card-line: rgba(40, 30, 18, .13); --shadow: 0 24px 60px rgba(80, 60, 30, .22); --shadow-sm: 0 8px 24px rgba(80, 60, 30, .16); --panel-inset: #ffffff; --panel-inset-hover: rgba(45, 33, 18, 0.05); } /* ---- shared primitives ---- */ /* Floating glass rail (toolbars, overlays, cards over the stage). */ .ec-glass { background: var(--rail); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); } /* The signature 3D stage: dotted grid + radial amber glow + vignette. */ .ec-stage-bg { background: radial-gradient(130% 100% at 50% -10%, var(--glow), transparent 55%), linear-gradient(var(--gridline) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, var(--gridline) 1px, transparent 1px) 0 0 / 30px 30px, var(--stage); } .ec-stage-vignette::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 42%, transparent 52%, var(--vignette) 100%); } /* Pill chip (quick actions, "popular starts"). */ .ec-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--accent-softer); color: var(--muted); font: 600 12.5px var(--font-ui); cursor: pointer; transition: transform .14s ease, border-color .14s ease, color .14s ease; } .ec-chip:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text); } /* Primary amber button. */ .ec-btn-primary { border: none; border-radius: var(--radius); background: var(--accent); color: var(--amber-ink); font: 800 15px var(--font-ui); cursor: pointer; box-shadow: 0 12px 30px rgba(236, 154, 60, .28); transition: transform .14s ease, box-shadow .14s ease; } .ec-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(236, 154, 60, .4); } ::selection { background: var(--accent-soft); }