/* * theme-copackhq.css * * Load order: bootstrap.min.css -> THIS FILE -> main.css -> header.css * * CONTRACT: raw values only. * - No var() referencing another theme token. * - No selectors beyond the three blocks below. * - No components, no derivations. main.css derives everything else. * * Three blocks: * :root mode-invariant (typography, radii) * :root, [data-bs-theme="light"] light values * [data-bs-theme="dark"] dark values * * Every COLOUR and SURFACE token must appear in both mode blocks. * A missing one there falls back to the light value and produces a * half-themed dark mode. Typography and radii are declared once and * can be overridden in a mode block if a brand ever needs it. * * Fonts required in : * Inter 300..700 roman + italic, Bricolage Grotesque 400..700 */ /* ============================================================ MODE-INVARIANT ============================================================ */ :root { /* -- Typography -- */ --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif; --theme-font-heading: 'Bricolage Grotesque', system-ui, sans-serif; --theme-font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.6; /* -- Border radius -- */ --bs-border-radius: 0.375rem; --bs-border-radius-sm: 0.25rem; --bs-border-radius-lg: 0.5rem; --bs-border-radius-xl: 1rem; --bs-border-radius-xxl: 2rem; --bs-border-radius-pill: 50rem; /* -- Layout -- */ --btn-text-transform: none; --section-padding-y: 3.5rem; --section-padding-y-lg: 5rem; } /* ============================================================ LIGHT MODE ============================================================ */ :root, [data-bs-theme="light"] { /* -- Brand accent -- #2478CC / hover #1E63A9 -- */ --theme-h: 210; --theme-s: 70%; --theme-l: 47%; --theme-hover-h: 210; --theme-hover-s: 70%; --theme-hover-l: 39%; --theme-rgb: 36, 120, 204; --theme-hover-rgb: 30, 99, 169; --theme-contrast: #fff; /* 4.5:1 on brand fill */ --theme-light-alpha: 0.08; --glow-alpha: 0.25; /* -- State colours -- hsl components + matching rgb triplet -- */ --success-h: 150; --success-s: 50%; --success-l: 45%; --success-rgb: 57, 172, 115; /* #39AC73 */ --warning-h: 40; --warning-s: 80%; --warning-l: 55%; --warning-rgb: 232, 171, 48; /* #E8AB30 */ --danger-h: 0; --danger-s: 84%; --danger-l: 60%; --danger-rgb: 239, 67, 67; /* #EF4343 */ --info-h: 199; --info-s: 83%; --info-l: 42%; --info-rgb: 18, 140, 196; /* #128CC4 */ /* -- Emphasis / subtle knobs -- */ --emphasis-l: 30%; --subtle-bg-alpha: 0.10; --subtle-border-alpha: 0.28; /* -- Surfaces -- */ --bs-body-bg: hsl(210, 47%, 95%); /* #EDF3F9 */ --bs-body-bg-rgb: 237, 243, 249; --bs-secondary-bg: hsl(210, 53%, 91%); /* #DDE9F5 */ --bs-secondary-bg-rgb: 221, 233, 245; --bs-tertiary-bg: hsl(210, 49%, 93%); /* #E5EEF7 */ --bs-tertiary-bg-rgb: 229, 238, 247; --bs-border-color: hsl(210, 40%, 84%); /* #C5D7E8 */ --bs-border-color-translucent: hsla(210, 30%, 50%, 0.15); --form-control: hsl(210, 50%, 99%); /* #FCFDFE */ /* -- Text -- */ --bs-body-color: hsl(220, 30%, 10%); --bs-body-color-rgb: 18, 23, 33; --bs-secondary-color: hsl(220, 15%, 45%); --bs-secondary-color-rgb: 98, 109, 132; --bs-tertiary-color: hsl(220, 12%, 60%); --bs-emphasis-color: hsl(220, 30%, 4%); --bs-emphasis-color-rgb: 7, 9, 13; /* -- Shadows -- */ --shadow-rgb: 18, 23, 33; --shadow-opacity-sm: 0.04; --shadow-opacity: 0.06; --shadow-opacity-lg: 0.08; /* -- Inverse: mirrors the OPPOSITE mode's surfaces -- */ --body-bg-inverse: hsl(210, 50%, 7.8%); /* = dark --bs-body-bg */ --body-color-inverse: hsl(210, 47%, 95%); /* = this mode's --bs-body-bg */ --theme-hsl-inverse: 210, 70%, 47%; } /* ============================================================ DARK MODE ============================================================ */ [data-bs-theme="dark"] { /* -- Brand accent -- #2478CC / hover #3C8CDD -- */ --theme-h: 210; --theme-s: 70%; --theme-l: 47%; --theme-hover-h: 210; --theme-hover-s: 70%; --theme-hover-l: 55%; --theme-rgb: 36, 120, 204; --theme-hover-rgb: 60, 140, 221; --theme-contrast: #fff; /* 4.5:1 on brand fill */ --theme-light-alpha: 0.10; --glow-alpha: 0.30; /* -- State colours -- hsl components + matching rgb triplet -- */ --success-h: 150; --success-s: 50%; --success-l: 55%; --success-rgb: 83, 198, 140; /* #53C68C */ --warning-h: 40; --warning-s: 80%; --warning-l: 62%; --warning-rgb: 236, 184, 81; /* #ECB851 */ --danger-h: 0; --danger-s: 84%; --danger-l: 66%; --danger-rgb: 241, 95, 95; /* #F15F5F */ --info-h: 199; --info-s: 83%; --info-l: 42%; --info-rgb: 18, 140, 196; /* #128CC4 */ /* -- Emphasis / subtle knobs -- */ --emphasis-l: 76%; --subtle-bg-alpha: 0.14; --subtle-border-alpha: 0.32; /* -- Surfaces -- */ --bs-body-bg: hsl(210, 50%, 7.8%); /* #0A141E */ --bs-body-bg-rgb: 10, 20, 30; --bs-secondary-bg: hsl(210, 45.7%, 13.7%); /* #132333 */ --bs-secondary-bg-rgb: 19, 35, 51; --bs-tertiary-bg: hsl(210, 42.2%, 17.6%); /* #1A2D40 */ --bs-tertiary-bg-rgb: 26, 45, 64; --bs-border-color: hsla(210, 50%, 70%, 0.12); --bs-border-color-translucent: hsla(210, 50%, 70%, 0.07); --form-control: hsl(210, 50%, 5.5%); /* #070E15 */ /* -- Text -- */ --bs-body-color: hsl(210, 20%, 92%); --bs-body-color-rgb: 231, 235, 239; --bs-secondary-color: hsl(220, 10%, 58%); --bs-secondary-color-rgb: 137, 144, 159; --bs-tertiary-color: hsl(220, 8%, 45%); --bs-emphasis-color: hsl(0, 0%, 100%); --bs-emphasis-color-rgb: 255, 255, 255; /* -- Shadows -- */ --shadow-rgb: 0, 0, 0; --shadow-opacity-sm: 0.20; --shadow-opacity: 0.30; --shadow-opacity-lg: 0.40; /* -- Inverse: mirrors the OPPOSITE mode's surfaces -- */ --body-bg-inverse: hsl(210, 47%, 95%); /* = light --bs-body-bg */ --body-color-inverse: hsl(210, 50%, 7.8%); /* = this mode's --bs-body-bg */ --theme-hsl-inverse: 210, 70%, 47%; }