/* ============================================================================= SriJova palette themes - the single source of colour for the application. Four selectable palettes, chosen with the data-sj-theme attribute on : srijova-coastal teal / sage (default) srijova-terracotta red / sand srijova-slate indigo / periwinkle srijova-pastel the original SriJova pastel palette TWO CHANGES FROM THE SUPPLIED FILE 1. Every custom property is prefixed --sj-. The supplied palettes declared bare names: --bg, --text, --border, --primary, --surface. Those are far too generic to sit on :root in this app. Bootstrap ships its own --primary, the admin template declares --border and --muted, and a page that happens to define --text locally would silently shadow the theme for its whole subtree. That exact collision has already cost this project once, with --itj-border. Prefixing removes the entire class of bug. 2. An alias layer maps the vocabularies already in the codebase onto these palettes. It lives in srijova-shell.css, which loads last - see the note at the end of this file for why that placement is load-bearing. There are roughly 900 references to --srijova-*, --default-*, --custom-* and --itj-* across 19 files. Renaming them all in one change would be a diff nobody could review. Instead those names become thin aliases pointing here, so colour has ONE definition and the old names keep working until they are retired. NOTE ON DARK MODE All four palettes are light. This theme has no dark variant, so selecting a palette replaces the previous Light/Dark switch rather than extending it. If dark is wanted later it is a fifth palette in this file - nothing else needs to change. ============================================================================= */ :root { --sj-font: Inter, "Segoe UI", Roboto, Arial, sans-serif; --sj-radius: 15px; /* Kept so a palette can be resolved before one is chosen. */ color-scheme: light; } /* ---------- Palette 1: Coastal (default) ---------- */ :root, [data-sj-theme="srijova-coastal"] { --sj-bg: #F5FAF9; --sj-surface: #FFFFFF; --sj-surface-2: #EAF3F0; --sj-text: #233A3D; --sj-text-2: #496164; --sj-muted: #718789; --sj-border: #D4E3DE; --sj-primary: #568E96; --sj-primary-hover: #477A81; --sj-accent: #87B6BC; --sj-soft: #BED4CB; --sj-sidebar: linear-gradient(180deg, #87B6BC, #BED4CB); --sj-sidebar-text: #183337; --sj-active: rgba(255, 255, 255, .48); --sj-success: #3D8B64; --sj-warning: #B27A32; --sj-danger: #B95050; /* Same primary as an RGB triple: app.css composes translucent washes as rgba(var(--primary-rgb), .08), which a hex value cannot supply. */ --sj-primary-rgb: 86, 142, 150; --sj-accent-rgb: 135, 182, 188; } /* ---------- Palette 2: Terracotta ---------- */ [data-sj-theme="srijova-terracotta"] { --sj-bg: #FCF8F3; --sj-surface: #FFFFFF; --sj-surface-2: #F6ECE0; --sj-text: #3C2B2B; --sj-text-2: #675252; --sj-muted: #8C7770; --sj-border: #E9DDD0; --sj-primary: #BF4646; --sj-primary-hover: #A73A3A; --sj-accent: #BF4646; --sj-soft: #EDDCC6; --sj-sidebar: linear-gradient(180deg, #BF4646, #A83E3E); --sj-sidebar-text: #FFFFFF; --sj-active: rgba(255, 255, 255, .17); --sj-success: #4C8A62; --sj-warning: #B87A30; --sj-danger: #BF4646; /* Same primary as an RGB triple: app.css composes translucent washes as rgba(var(--primary-rgb), .08), which a hex value cannot supply. */ --sj-primary-rgb: 191, 70, 70; --sj-accent-rgb: 237, 220, 198; } /* ---------- Palette 3: Slate ---------- */ [data-sj-theme="srijova-slate"] { --sj-bg: #F5F6FC; --sj-surface: #FFFFFF; --sj-surface-2: #ECEEFC; --sj-text: #25314A; --sj-text-2: #536079; --sj-muted: #7C869B; --sj-border: #D9DDF0; --sj-primary: #576A8F; --sj-primary-hover: #485A7C; --sj-accent: #727FB1; --sj-soft: #B7BDF7; --sj-sidebar: linear-gradient(180deg, #576A8F, #4C5E80); --sj-sidebar-text: #FFFFFF; --sj-active: rgba(183, 189, 247, .25); --sj-success: #4C8A68; --sj-warning: #B68038; --sj-danger: #B75568; /* Same primary as an RGB triple: app.css composes translucent washes as rgba(var(--primary-rgb), .08), which a hex value cannot supply. */ --sj-primary-rgb: 87, 106, 143; --sj-accent-rgb: 183, 189, 247; } /* ---------- Palette 4: Pastel ---------- */ [data-sj-theme="srijova-pastel"] { --sj-bg: #F8FAFF; --sj-surface: #FFFFFF; --sj-surface-2: #F2F4FF; --sj-text: #24324A; --sj-text-2: #42506A; --sj-muted: #718096; --sj-border: #DCE2F0; --sj-primary: #6E73E8; --sj-primary-hover: #5F64D4; --sj-accent: #9FA1FF; --sj-soft: #D9F9DF; --sj-sidebar: linear-gradient(180deg, #B5BAFF 0%, #AEE2FF 55%, #D9F9DF 100%); --sj-sidebar-text: #24324A; --sj-active: rgba(255, 255, 255, .52); --sj-success: #4AAB68; --sj-warning: #D99A35; --sj-danger: #D95C78; /* Same primary as an RGB triple: app.css composes translucent washes as rgba(var(--primary-rgb), .08), which a hex value cannot supply. */ --sj-primary-rgb: 110, 115, 232; --sj-accent-rgb: 159, 161, 255; } /* ============================================================================= Derived tokens. The palettes give a base set. These fill the gaps the application needs - a hover wash, a selected state, an elevated surface, three shadow weights - derived from the palette so a new palette gets them for free. colour-mix keeps them in the palette's own hue instead of a neutral grey that would look foreign in Terracotta. ============================================================================= */ :root { --sj-surface-3: color-mix(in srgb, var(--sj-surface-2) 70%, var(--sj-bg)); --sj-elevated: var(--sj-surface); --sj-hover: color-mix(in srgb, var(--sj-primary) 6%, var(--sj-surface)); --sj-selected: color-mix(in srgb, var(--sj-primary) 12%, var(--sj-surface)); --sj-primary-soft: color-mix(in srgb, var(--sj-primary) 12%, var(--sj-surface)); --sj-success-soft: color-mix(in srgb, var(--sj-success) 14%, var(--sj-surface)); --sj-warning-soft: color-mix(in srgb, var(--sj-warning) 14%, var(--sj-surface)); --sj-danger-soft: color-mix(in srgb, var(--sj-danger) 14%, var(--sj-surface)); --sj-info: var(--sj-accent); --sj-info-soft: color-mix(in srgb, var(--sj-accent) 14%, var(--sj-surface)); --sj-border-subtle: color-mix(in srgb, var(--sj-border) 55%, var(--sj-surface)); --sj-border-strong: color-mix(in srgb, var(--sj-border) 70%, var(--sj-text)); --sj-text-disabled: color-mix(in srgb, var(--sj-muted) 60%, var(--sj-surface)); --sj-text-inverse: #FFFFFF; --sj-shadow-sm: 0 1px 2px rgba(40, 50, 70, .05); --sj-shadow-md: 0 8px 24px rgba(40, 50, 70, .06); --sj-shadow-lg: 0 18px 48px rgba(40, 50, 70, .12); --sj-focus-ring: 0 0 0 3px color-mix(in srgb, var(--sj-primary) 24%, transparent); --sj-sidebar-muted: color-mix(in srgb, var(--sj-sidebar-text) 65%, transparent); --sj-sidebar-hover: rgba(255, 255, 255, .12); --sj-sidebar-selected: var(--sj-active); --sj-transition: 200ms ease; } /* The alias layer that maps --srijova-*, --default-*, --custom-* and --itj-* onto these palettes lives in srijova-shell.css, NOT here. It has to load after app.css and srijova-design-system.css. Both of those declare the same names on :root - app.css declares --menu-bg four times - and at equal specificity the later stylesheet wins. With the aliases in this file, which loads first, every one of them was silently overridden and the sidebar kept painting app.css's hardcoded #14284A whatever palette was selected. */