/* Design tokens for the EFABLINK site. Neutral scale (bg/surface/border/text) is shared by every color theme below and defined once here for light and dark. Each color theme preset then only overrides --color-primary/-accent/-focus-ring and their paired "on" text colors — selected in Admin > Settings > Site Identity, applied via [data-color-theme] on (see app/Views/layouts/*.php). "classic-crimson" is both the default (:root) and the only preset without its own [data-color-theme="..."] block — it activates automatically when no other preset is selected. Every dark rule below is duplicated deliberately: once for an explicit [data-theme="dark"] choice (applies regardless of OS setting), and once inside @media (prefers-color-scheme: dark) guarded with :not([data-theme="light"]):not([data-theme="dark"]) for visitors who haven't made an explicit choice yet. Both must stay in sync. */ :root { /* ---- Shared neutrals: light ---- */ --color-bg: #ffffff; --color-bg-subtle: #f6f5f5; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-border: #e1dfdf; --color-border-strong: #c7c4c4; --color-text: #1c1b1b; --color-text-muted: #5a5a5c; --color-success: #1c7a3e; --color-danger: #b3261e; --color-danger-subtle: #fbe9e8; --shadow-sm: 0 1px 2px rgba(20, 18, 18, 0.08); --shadow-md: 0 4px 16px rgba(20, 18, 18, 0.12); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --content-max-width: 1200px; /* ---- Classic Crimson (default preset): light ---- */ --color-primary: #c81e1e; --color-primary-hover: #a81616; --color-primary-subtle: #fbeaea; --color-accent: #2b2b2e; --color-accent-hover: #1a1a1c; --color-accent-subtle: #e8e8e9; --color-text-on-primary: #ffffff; --color-text-on-accent: #ffffff; --color-link: var(--color-primary); --color-focus-ring: #c81e1e; } /* ---- Shared neutrals: dark, explicit choice ---- */ :root[data-theme="dark"] { --color-bg: #131212; --color-bg-subtle: #191818; --color-surface: #1f1e1e; --color-surface-raised: #262424; --color-border: #333131; --color-border-strong: #474444; --color-text: #f2f0ef; --color-text-muted: #b3aead; --color-success: #4ac37c; --color-danger: #ef6a62; --color-danger-subtle: #3a1917; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5); /* Classic Crimson: dark */ --color-primary: #f17a72; --color-primary-hover: #f58f88; --color-primary-subtle: #3d1815; --color-accent: #d3d6d9; --color-accent-hover: #e0e2e4; --color-accent-subtle: #2e3134; --color-text-on-primary: #2a0806; --color-text-on-accent: #1a1c1e; --color-focus-ring: #f17a72; } /* ---- Shared neutrals: dark, system preference (no explicit choice made yet) ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-bg: #131212; --color-bg-subtle: #191818; --color-surface: #1f1e1e; --color-surface-raised: #262424; --color-border: #333131; --color-border-strong: #474444; --color-text: #f2f0ef; --color-text-muted: #b3aead; --color-success: #4ac37c; --color-danger: #ef6a62; --color-danger-subtle: #3a1917; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5); --color-primary: #f17a72; --color-primary-hover: #f58f88; --color-primary-subtle: #3d1815; --color-accent: #d3d6d9; --color-accent-hover: #e0e2e4; --color-accent-subtle: #2e3134; --color-text-on-primary: #2a0806; --color-text-on-accent: #1a1c1e; --color-focus-ring: #f17a72; } } /* ========================================================================= Color theme presets — pick one in Admin > Settings > Site Identity. Each only overrides primary/accent/focus tokens; the shared neutrals above still apply underneath every preset, light or dark. ========================================================================= */ /* ---- Charcoal & Ember: charcoal takes the lead role, red is a sparse accent ---- */ [data-color-theme="charcoal-ember"] { --color-primary: #23262b; --color-primary-hover: #14171b; --color-primary-subtle: #e7e8ea; --color-accent: #d6322a; --color-accent-hover: #b0241d; --color-accent-subtle: #fbeae9; --color-text-on-primary: #ffffff; --color-text-on-accent: #ffffff; --color-focus-ring: #d6322a; } [data-color-theme="charcoal-ember"][data-theme="dark"] { --color-primary: #d3d6d9; --color-primary-hover: #e0e2e4; --color-primary-subtle: #2e3134; --color-accent: #f58077; --color-accent-hover: #f79891; --color-accent-subtle: #3d1815; --color-text-on-primary: #17191b; --color-text-on-accent: #2c0805; --color-focus-ring: #f58077; } @media (prefers-color-scheme: dark) { [data-color-theme="charcoal-ember"]:not([data-theme="light"]):not([data-theme="dark"]) { --color-primary: #d3d6d9; --color-primary-hover: #e0e2e4; --color-primary-subtle: #2e3134; --color-accent: #f58077; --color-accent-hover: #f79891; --color-accent-subtle: #3d1815; --color-text-on-primary: #17191b; --color-text-on-accent: #2c0805; --color-focus-ring: #f58077; } } /* ---- Crimson & Steel: red with cool blue-gray, a more corporate/technical feel ---- */ [data-color-theme="crimson-steel"] { --color-primary: #c4232b; --color-primary-hover: #a11b22; --color-primary-subtle: #fbeaea; --color-accent: #3d5266; --color-accent-hover: #2c3d4d; --color-accent-subtle: #e7ebef; --color-text-on-primary: #ffffff; --color-text-on-accent: #ffffff; --color-focus-ring: #c4232b; } [data-color-theme="crimson-steel"][data-theme="dark"] { --color-primary: #f17e77; --color-primary-hover: #f5928c; --color-primary-subtle: #3d1815; --color-accent: #9cb0c2; --color-accent-hover: #aec0d0; --color-accent-subtle: #24303b; --color-text-on-primary: #2a0906; --color-text-on-accent: #111a22; --color-focus-ring: #f17e77; } @media (prefers-color-scheme: dark) { [data-color-theme="crimson-steel"]:not([data-theme="light"]):not([data-theme="dark"]) { --color-primary: #f17e77; --color-primary-hover: #f5928c; --color-primary-subtle: #3d1815; --color-accent: #9cb0c2; --color-accent-hover: #aec0d0; --color-accent-subtle: #24303b; --color-text-on-primary: #2a0906; --color-text-on-accent: #111a22; --color-focus-ring: #f17e77; } } /* ---- Deep Maroon: muted brick-red with warm charcoal-brown, a premium/furniture feel ---- */ [data-color-theme="deep-maroon"] { --color-primary: #7a2320; --color-primary-hover: #5e1a18; --color-primary-subtle: #f3e7e6; --color-accent: #3a2e29; --color-accent-hover: #291f1b; --color-accent-subtle: #efeae7; --color-text-on-primary: #ffffff; --color-text-on-accent: #ffffff; --color-focus-ring: #7a2320; } [data-color-theme="deep-maroon"][data-theme="dark"] { --color-primary: #d48178; --color-primary-hover: #dd948c; --color-primary-subtle: #3d1a15; --color-accent: #c7b4a6; --color-accent-hover: #d3c3b8; --color-accent-subtle: #332821; --color-text-on-primary: #2a0f0c; --color-text-on-accent: #221a15; --color-focus-ring: #d48178; } @media (prefers-color-scheme: dark) { [data-color-theme="deep-maroon"]:not([data-theme="light"]):not([data-theme="dark"]) { --color-primary: #d48178; --color-primary-hover: #dd948c; --color-primary-subtle: #3d1a15; --color-accent: #c7b4a6; --color-accent-hover: #d3c3b8; --color-accent-subtle: #332821; --color-text-on-primary: #2a0f0c; --color-text-on-accent: #221a15; --color-focus-ring: #d48178; } } /* ---- Monochrome + Red Accent: near black-and-white UI, red used only as a sparse highlight ---- */ [data-color-theme="monochrome-red"] { --color-primary: #1c1d1f; --color-primary-hover: #000000; --color-primary-subtle: #e9e9ea; --color-accent: #d62d20; --color-accent-hover: #c22a1f; --color-accent-subtle: #fceae8; --color-text-on-primary: #ffffff; --color-text-on-accent: #ffffff; --color-focus-ring: #d62d20; } [data-color-theme="monochrome-red"][data-theme="dark"] { --color-primary: #d5d6d8; --color-primary-hover: #e6e7e8; --color-primary-subtle: #2a2b2d; --color-accent: #f58077; --color-accent-hover: #f79891; --color-accent-subtle: #3d1815; --color-text-on-primary: #131415; --color-text-on-accent: #2c0805; --color-focus-ring: #f58077; } @media (prefers-color-scheme: dark) { [data-color-theme="monochrome-red"]:not([data-theme="light"]):not([data-theme="dark"]) { --color-primary: #d5d6d8; --color-primary-hover: #e6e7e8; --color-primary-subtle: #2a2b2d; --color-accent: #f58077; --color-accent-hover: #f79891; --color-accent-subtle: #3d1815; --color-text-on-primary: #131415; --color-text-on-accent: #2c0805; --color-focus-ring: #f58077; } }