/* Design tokens for superpfeif — Duolingo-flavored, light + dark. * * The same bright green (#58cc02) anchors both pickly (dark) and switchly (light); * here we support both via [data-theme] on the element. Per-user choice is * persisted server-side and applied before first paint (see base.html). */ :root { /* Brand palette — shared across themes */ --green: #58cc02; --green-edge: #58a700; /* 3D button shadow */ --green-deep: #15803d; --blue: #1cb0f6; --blue-edge: #1899d6; --yellow: #ffc800; --yellow-edge: #e6a100; --red: #ff4b4b; --red-edge: #ea2b2b; --gold: #f59e0b; /* Shape + motion */ --radius-card: 16px; --radius-control: 12px; --touch-min: 44px; --bottom-nav-height: 76px; --safe-bottom: env(safe-area-inset-bottom, 0px); --shadow-raised: 0 4px 0 var(--green-edge); --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.18); --bounce-duration: 350ms; --bounce-easing: cubic-bezier(0.34, 1.56, 0.64, 1); --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; } /* Dark theme (pickly-like) */ [data-theme="dark"] { --bg-body: #101416; --bg-card: #1b2429; --bg-input: #2b363d; --bg-hover: #344149; --border-soft: rgba(255, 255, 255, 0.08); --text: #f3f4f6; --text-muted: #9ca3af; --nav-bg: #15803d; --nav-text: #ffffff; } /* Light theme (switchly-like, Duolingo-classic) */ [data-theme="light"] { --bg-body: #f7f7f7; --bg-card: #ffffff; --bg-input: #ffffff; --bg-hover: #f0f0f0; --border-soft: #e5e5e5; --text: #3c3c3c; --text-muted: #777777; --nav-bg: #58cc02; --nav-text: #ffffff; }