/** * FENN retail theme tokens. * Default: light, calm, warm, trustworthy. * Future preference: set data-theme="dark" on (tokens reserved below). */ :root { color-scheme: light; --bg: #f4f1ea; --bg-elev: #fffcf7; --bg-soft: #ebe6dc; --line: #d9d2c6; --text: #1c1915; --muted: #6b645a; --good: #1f6b4a; --watch: #9a6b1a; --risk: #9f2d3a; --accent: #0f6b63; --accent-soft: #d7ebe7; --panel: rgba(255, 252, 247, 0.92); --shadow: 0 14px 40px rgba(28, 25, 21, 0.08); --font-display: "Playfair Display", "Fraunces", Georgia, serif; --font-body: "DM Sans", "Manrope", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --sans: var(--font-body); --radius: 16px; --radius-sm: 10px; /* Primary control: dark fill + light label (warm light theme). */ --btn-fg: #f7f4ee; --btn-bg: var(--text); --btn-bg-hover: #2a2620; --btn-bg-pressed: #0f0e0c; --btn-bg-disabled: #9a948a; --btn-fg-disabled: #f7f4ee; --btn-outline-bg: transparent; --btn-outline-fg: var(--text); --btn-outline-border: var(--line); --btn-outline-hover-bg: var(--bg-soft); --btn-outline-pressed-bg: var(--bg-soft); --focus-ring: var(--accent); } html[data-theme="dark"] { color-scheme: dark; --bg: #0b0d10; --bg-elev: #12151a; --bg-soft: #151922; --line: #1e2430; --text: #e8eaed; --muted: #8b93a7; --good: #3ddc97; --watch: #e6b84d; --risk: #ff6b6b; --accent: #7eb8ff; --accent-soft: #1a2a3d; --panel: rgba(18, 21, 26, 0.92); --shadow: 0 18px 50px rgba(0, 0, 0, 0.35); --btn-fg: #0b0d10; --btn-bg: var(--text); --btn-bg-hover: #f2f4f8; --btn-bg-pressed: #dfe3ea; --btn-bg-disabled: #5a6272; --btn-fg-disabled: #0b0d10; --btn-outline-bg: transparent; --btn-outline-fg: var(--text); --btn-outline-border: var(--line); --btn-outline-hover-bg: var(--bg-soft); --btn-outline-pressed-bg: var(--bg-soft); --focus-ring: var(--accent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }