/* ============================================================================ DEFAULT THEME — TOKEN CONTRACT (plain CSS, no build step) ---------------------------------------------------------------------------- This file defines EVERY color token the app consumes. It always loads, on every page, BEFORE the tenant theme. A tenant theme file (domain_color//theme.css) loads immediately AFTER this one and simply re-declares the tokens it wants to change. Same selector (:root), same specificity, later file wins — no !important, no specificity fights. The default look is "Midnight Sapphire": deep navy bars, royal-blue brand, and a lavender -> indigo -> near-black-navy gradient on primary buttons. Every value below passes the contrast rules in _AI_THEME_SPEC.md. DO NOT EDIT THIS FILE FOR A CLIENT. To brand a tenant: copy domain_color/_TENANT_TEMPLATE.css to domain_color//theme.css and edit the copy. See domain_color/_README.md for the exact server steps. ========================================================================== */ :root { /* ========================================================== 1) BRAND CORE — the "main colors" a tenant overrides ========================================================== */ --primary-color: #1d4ed8; /* main brand color — royal sapphire blue */ --primary-color-rgb: 29, 78, 216; /* SAME color as R,G,B numbers (for rgba glows) */ --hover-color: #60a5fa; /* hover state of the brand color — also nav-link hover text on the dark bar, so it stays light */ --hover-color-rgb: 96, 165, 250; /* SAME hover color as R,G,B numbers */ --accent-color: #a78bfa; /* highlight / active nav link — luminous violet */ --secondary-color: #e0e7ff; /* brand text on dark bars (navbar brand, footer text) */ --text-color: #ffffff; /* nav link text on dark bars */ --bg-color: #0f0a53; /* fallback bar color when gradients unsupported — the gradient's effective mid tone */ /* Navbar + footer background — near-black navy at the left edge deepening into indigo across the bar. The solid #01011c in FRONT of the gradient is the background-COLOR half of the same `background` shorthand: the 50% stop is 0.79 alpha, so without an opaque base the page (or a Bootstrap bg-* utility) would show through the middle of every bar and wash it out. */ --bg-gradient: linear-gradient(90deg, rgba(1, 1, 28, 1) 0%, rgba(5, 5, 36, 1) 5%, rgba(6, 6, 59, 1) 27%, rgba(19, 12, 97, 0.65) 51%, rgba(14, 3, 66, 1) 73%, rgba(11, 2, 51, 1) 100%); /* Scrolling announcement bar background — same midnight sweep with a violet-tinged center to echo the button gradient */ --announcement-gradient: linear-gradient(90deg, #0a1230 0%, #131f52 25%, #2b2168 50%, #131f52 75%, #0a1230 100%); /* Text links + small interactive text (dropdown toggles, card hover text) */ --link-color: #1d4ed8; --link-hover-color: #1e40af; /* Search box focus ring + search placeholder */ --focus-ring-color: #6366f1; /* Primary buttons (.btn-primary): background, text, border. The signature gradient: a lavender highlight on the left edge sweeping into deep indigo and then near-black navy. The solid #0e0342 in FRONT of the gradient is the background-COLOR half of the same `background` shorthand. It sits beneath the 0.9-alpha middle stop so no page color bleeds through the button — the face stays fully opaque and reads as one solid slab. */ --btn-primary-bg: #0e0342 linear-gradient(90deg, rgba(190, 190, 250, 1) 2%, rgba(19, 12, 97, 0.9) 51%, rgba(14, 3, 66, 1) 70%, rgba(18, 4, 74, 1) 100%); --btn-primary-color: #ffffff; --btn-primary-border-color: #0b0230; /* a shade under the fill: a firm edge, not a contrasting ring */ /* Primary button HOVER — a MILD color shift and nothing else: identical gradient geometry with every stop lifted one small step. No glow, no shadow change, no movement (BOOTSTRAP_BRIDGE.css deliberately leaves box-shadow untouched on hover, so the rest-state shadow carries over). --btn-primary-bg carries a gradient (a background-IMAGE), so a hover that only changed background-color would be painted underneath it and never show. BOOTSTRAP_BRIDGE.css swaps the whole `background` shorthand on hover using the token below, which may be a solid color, a gradient, or — as here — a solid color plus a gradient. The pair is mutually consistent, so a tenant that overrides only the brand core still gets a working, visible hover. A solid value like var(--hover-color) is also valid here. */ --btn-primary-hover-bg: #170a5c linear-gradient(90deg, rgba(205, 205, 255, 1) 2%, rgba(32, 22, 128, 0.9) 51%, rgba(26, 10, 96, 1) 70%, rgba(31, 11, 106, 1) 100%); --btn-primary-hover-color: var(--btn-primary-color); --btn-primary-hover-border-color: #150747; /* --------------------------------------------------------------------- TWO THEMED BUTTONS, AND ONLY TWO: PRIMARY (indigo) + SECONDARY (graphite) --------------------------------------------------------------------- The primary tokens above own the loud, lavender-lit indigo slab — that is the commit action (LOGIN, SUBMIT, PAY, SAVE). The secondary family below owns a graphite slab that cools into the SAME near-black navy at its right edge: related to the primary, clearly quieter than it. A form says at a glance which button commits and which one backs out. EVERY OTHER BUTTON IS STOCK BOOTSTRAP and has no tokens here — outline variants, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-link. That is what keeps a page from reading as a wall of identical branded slabs: the utility actions on a card ("Image", "Reset", "Copy", "Add") stay visibly lighter than the one button that commits. There are therefore NO --btn-outline-* tokens. BOOTSTRAP_BRIDGE.css does not read them, so adding them back to a tenant file changes nothing — to give a button brand weight, change its class in the markup to .btn-primary or .btn-secondary instead. SHAPE never varies BETWEEN THE TWO: BOOTSTRAP_BRIDGE.css gives both the same size, weight, casing and shadow. Only the COLORS differ. --------------------------------------------------------------------- */ /* Secondary buttons (.btn-secondary) — the quieter action next to a primary ("Reset", "Cancel", "Refresh"). Graphite at the left edge, muted periwinkle through the middle, then the primary's own near-black navy at the right. Same 90deg sweep and the same shape of stop list as --btn-primary-bg, so the two read as one family; the absent lavender highlight is what makes this one recede. The solid #51515e in FRONT of the gradient is the background-COLOR half of the same `background` shorthand. The 49% stop is 0.82 alpha, so without an opaque base the page would show through the middle of the button. (The stop list ends with two stops at 100%: the last one has zero width and never paints. Kept exactly as authored.) White text measures 6.2:1 at the lightest point of this fill — that 49% stop composited over the base — comfortably past the 4.5:1 floor in _AI_THEME_SPEC.md. To collapse secondary back into the primary look, point all six values below at the matching --btn-primary-* token. */ --btn-secondary-bg: #51515e linear-gradient(90deg, rgba(81, 81, 94, 1) 0%, rgba(96, 95, 148, 0.82) 49%, rgba(14, 3, 66, 1) 100%, rgba(75, 74, 84, 1) 100%); --btn-secondary-color: #ffffff; --btn-secondary-border-color: #3e3e49; /* a shade under the graphite edge: a firm edge, not a contrasting ring */ /* Secondary HOVER — same rule as the primary: identical gradient geometry with every stop lifted one small step, and nothing else touched. No glow, no shadow change, no movement. White still clears the floor at 5.0:1. */ --btn-secondary-hover-bg: #5e5e6b linear-gradient(90deg, rgba(94, 94, 107, 1) 0%, rgba(110, 109, 168, 0.82) 49%, rgba(26, 10, 96, 1) 100%, rgba(88, 87, 97, 1) 100%); --btn-secondary-hover-color: var(--btn-secondary-color); --btn-secondary-hover-border-color: #4b4b58; /* (No --btn-outline-* tokens: .btn-outline-primary and .btn-outline-secondary are stock Bootstrap. See the note above.) */ /* ========================================================== 2) COMPONENT TOKENS — page-level accents. Override per tenant only when specifically requested. ========================================================== */ /* Neutral surfaces and text */ --surface-color: #ffffff; /* card body background */ --muted-text-color: #666666; /* activity card label text */ --heading-color: #343a40; /* dashboard section heading */ --delete-icon-color: red; /* small delete "x" on admin cards */ /* Full-screen loading overlay (spinner + shimmer text) — blue/violet pair matching the button gradient family */ --loading-glow-1: rgba(59, 130, 246, 0.10); --loading-glow-2: rgba(124, 58, 237, 0.12); --loading-spinner-left: rgba(124, 58, 237, 0.88); --loading-spinner-top: rgba(59, 130, 246, 0.90); --loading-spinner-glow: rgba(79, 70, 229, 0.22); --loading-shimmer-a: rgba(59, 130, 246, 0.95); --loading-shimmer-b: rgba(124, 58, 237, 0.95); /* Toasts (success / error / confirm) */ --toast-header-font: 'Arial', sans-serif; --toast-icon-spacing: 1rem; --toast-primary-color: white; --toast-success-color: rgb(27, 4, 68); --toast-danger-color: red; --toast-success-bg: #32054b; --toast-danger-bg: #dc3545; /* Confirm/redirect toast (aeToastR / aeToastP) */ --_toastR-bg-color: #4FFFB0; --_toastR-text-color: #1B4D3E; --_toastR-icon-color: #6c757d; --_toastR-icon-font-size: 18px; --_toastR-icon-margin-right: 10px; --_toastR-btn-primary-bg-color: #0eb56a; --_toastR-btn-primary-border-color: #032a18; /* Info toast (aeToastF) */ --toastF-bg-color-rgb: 255, 255, 255; --toastF-text-color: #000000; --toastF-icon-color: #f1c40f; --toastF-icon-font-size: 1.5rem; --toastF-icon-margin-right: 0.5rem; --toastF-btn-primary-bg-color: #007bff; --toastF-btn-primary-border-color: #0056b3; }