/* theme.css — shared CSS custom properties for light/dark/auto theming. Variables only, no rules. Toggle via data-theme="dark"|"light" on . "auto" (no attribute or data-theme="auto") follows prefers-color-scheme. Consumer projects override :root / [data-theme] to set their own palette. */ :root { /* ── Jardyx CI palette (raw — reference via semantic tokens below, do not use in components) ── */ --jardyx-red: #e2001a; --jardyx-blue: #275382; --jardyx-green: #587b37; --jardyx-yellow: #d6a733; --jardyx-purple: #7b2484; --jardyx-orange: #e27708; --jardyx-darkgrey: #606060; --jardyx-lightgrey: #e0e0e0; --color-bg: #f0f2f7; --color-surface: #ffffff; --color-surface-alt: var(--jardyx-lightgrey); --color-card: #ffffff; --color-text: #1a202c; --color-muted: var(--jardyx-darkgrey); --color-border: #cbd5e0; --color-primary: var(--jardyx-red); --color-primary-hover: #b8001a; --color-secondary: var(--jardyx-darkgrey); --color-secondary-hover: #4d4d4d; --color-secondary-alt: var(--jardyx-lightgrey); --color-danger: #9a0014; --color-danger-hover: #7a0010; --color-success: var(--jardyx-green); --color-success-hover: #456028; --color-success-alt: #dbe7cc; --color-warning: var(--jardyx-yellow); --color-warning-hover: #b8901c; --color-info: var(--jardyx-blue); --color-info-hover: #1e4268; --color-dark: #212529; --color-dark-hover: #1a1e21; --color-nav-bg: #ffffff; --color-nav-text: #1a202c; --color-accent: var(--color-primary); --color-on-accent: #ffffff; --font-sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", monospace; --radius: 0.375rem; --radius-sm: 0.25rem; --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); --shadow: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06); /* Spacing scale — 4 px base rhythm, theme-independent. Consumer apps should use these tokens instead of raw rem values for padding/margin/gap. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; } [data-theme="dark"] { --color-bg: #0f0f1a; --color-surface: #1a1a2e; --color-surface-alt: #16213e; --color-card: #16213e; --color-text: #e2e8f0; --color-muted: #8a8a8a; --color-border: #2d3748; --color-primary: #ff3347; --color-primary-hover: #ff5c6b; --color-secondary: #8a8a8a; --color-secondary-hover: #a3a3a3; --color-secondary-alt: #2c3034; --color-danger: var(--jardyx-red); --color-danger-hover: #b8001a; --color-success: #7ba550; --color-success-hover: #8fbf5e; --color-success-alt: #1a2e10; --color-warning: #e8bc4d; --color-warning-hover: #f0cc6b; --color-info: #5a92cc; --color-info-hover: #7dabd9; --color-dark: #dee2e6; --color-dark-hover: #f8f9fa; --color-nav-bg: #1a1a2e; --color-nav-text: #e2e8f0; --color-on-accent: #ffffff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0f0f1a; --color-surface: #1a1a2e; --color-surface-alt: #16213e; --color-card: #16213e; --color-text: #e2e8f0; --color-muted: #8a8a8a; --color-border: #2d3748; --color-primary: #ff3347; --color-primary-hover: #ff5c6b; --color-secondary: #8a8a8a; --color-secondary-hover: #a3a3a3; --color-secondary-alt: #2c3034; --color-danger: var(--jardyx-red); --color-danger-hover: #b8001a; --color-success: #7ba550; --color-success-hover: #8fbf5e; --color-success-alt: #1a2e10; --color-warning: #e8bc4d; --color-warning-hover: #f0cc6b; --color-info: #5a92cc; --color-info-hover: #7dabd9; --color-dark: #dee2e6; --color-dark-hover: #f8f9fa; --color-nav-bg: #1a1a2e; --color-nav-text: #e2e8f0; --color-on-accent: #ffffff; } }