/* ========================================================================== Plower design tokens — the only place literal values live. Dark is the default; `data-theme="light"` on switches. index.html sets the attribute before first paint from the stored preference. Rules: .claude/skills/plower-frontend-ui/SKILL.md ========================================================================== */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-variable.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metric-matched fallbacks so the swap from system fonts does not shift layout. */ @font-face { font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: "JetBrains Mono Fallback"; src: local("Courier New"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; } /* ── Theme-independent ────────────────────────────────────────────────── */ :root { /* type */ --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Consolas, monospace; --text-11: 11px; --text-12: 12px; --text-13: 13px; --text-14: 14px; --text-16: 16px; --text-20: 20px; --text-24: 24px; --text-32: 32px; --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --tracking-tight: -0.011em; --tracking-title: -0.02em; /* space — 4px scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* shape */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 999px; /* sizing */ --control-sm: 32px; --control-md: 36px; --control-lg: 40px; --row-h: 48px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --dot: 8px; /* Field focus: accent border plus a soft halo (theme via --accent-soft). */ --focus-ring: 0 0 0 3px var(--accent-soft); /* layout */ --header-h: 48px; --sidebar-w: 240px; --sidebar-w-collapsed: 56px; --page-max: 1280px; --page-max-narrow: 720px; --page-gutter: clamp(16px, 4cqi, 40px); --prose-max: 72ch; /* motion */ --duration-fast: 120ms; --duration-base: 180ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* stacking */ --z-sticky: 10; --z-header: 30; --z-sidebar: 40; --z-overlay: 60; /* Above overlays: a Select inside a drawer portals its list to . */ --z-popover: 65; --z-toast: 70; /* terminal — theme-invariant: a terminal is always dark */ --terminal-bg: #0d1014; --terminal-fg: #e6edf3; --terminal-dim: #8b949e; --terminal-cursor: #ffb020; --terminal-selection: rgba(255, 176, 32, 0.28); --terminal-line: rgba(255, 255, 255, 0.1); } /* ── Dark (default) ───────────────────────────────────────────────────── */ :root { color-scheme: dark; --bg: #101216; --bg-subtle: #14171d; --bg-raised: #1a1d24; --bg-hover: #242833; --bg-selected: #2a2f3b; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); --text: #f1f3f7; --text-dim: #b2bac9; --text-faint: #939dad; --accent: #ffb020; --accent-hover: #ffc04d; --accent-fg: #241c07; --accent-text: #ffb020; --accent-soft: rgba(255, 176, 32, 0.14); --accent-line: rgba(255, 176, 32, 0.45); --focus: #ffb020; --brand-blade: #8fcaf4; --brand-furrow: #b8813a; --success: #22c55e; --success-soft: rgba(34, 197, 94, 0.14); --warning: #f59e0b; --warning-soft: rgba(245, 158, 11, 0.14); --danger: #ff7b86; --danger-soft: rgba(255, 123, 134, 0.14); --danger-line: rgba(255, 123, 134, 0.4); --danger-fg: #2a0a0e; --info: #6aa7ff; --info-soft: rgba(106, 167, 255, 0.14); --neutral: #939dad; --neutral-soft: rgba(147, 157, 173, 0.14); --chart-1: #4f8ef7; --chart-2: #f2a13c; --chart-3: #43b581; --chart-4: #e05c6e; --chart-5: #9b6ef3; --chart-6: #2fb8c6; --chart-7: #d4a72c; --chart-8: #8a93a5; --chart-grid: rgba(255, 255, 255, 0.06); --scrim: rgba(5, 6, 8, 0.62); --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35); } /* ── Light ────────────────────────────────────────────────────────────── */ :root[data-theme="light"] { color-scheme: light; --bg: #f7f8fa; --bg-subtle: #f1f3f6; --bg-raised: #ffffff; --bg-hover: #eceff3; --bg-selected: #e3e7ed; --line: rgba(16, 18, 24, 0.09); --line-strong: rgba(16, 18, 24, 0.18); --text: #12151b; --text-dim: #4a5261; --text-faint: #646c7d; --accent: #ffb020; --accent-hover: #f5a300; --accent-fg: #241c07; --accent-text: #8f5400; --accent-soft: rgba(255, 176, 32, 0.18); --accent-line: rgba(196, 122, 0, 0.5); --focus: #b86e00; --brand-blade: #2b7bb9; --brand-furrow: #a3690f; --success: #12723a; --success-soft: rgba(18, 114, 58, 0.09); --warning: #9e5200; --warning-soft: rgba(217, 119, 6, 0.12); --danger: #c8283a; --danger-soft: rgba(200, 40, 58, 0.09); --danger-line: rgba(200, 40, 58, 0.35); --danger-fg: #ffffff; --info: #1f5fc7; --info-soft: rgba(31, 95, 199, 0.09); --neutral: #646c7d; --neutral-soft: rgba(100, 108, 125, 0.1); --chart-1: #2f6fdb; --chart-2: #c7760a; --chart-3: #23905f; --chart-4: #cc3d52; --chart-5: #7c4fe0; --chart-6: #1a97a5; --chart-7: #a8820b; --chart-8: #6b7385; --chart-grid: rgba(16, 18, 24, 0.07); --scrim: rgba(16, 18, 24, 0.32); --shadow-popover: 0 8px 24px rgba(16, 18, 24, 0.12), 0 1px 3px rgba(16, 18, 24, 0.08); --shadow-overlay: 0 24px 64px rgba(16, 18, 24, 0.18), 0 2px 8px rgba(16, 18, 24, 0.08); }