/* ===================================================================== _theme.css — THE BRAND IDENTITY TOKEN LAYER. Loaded by every Bookili web surface this repo serves (owner ERP, platform admin, supplier portal, the public share page), BEFORE that surface's own stylesheet. ONE definition, consumed everywhere. Do NOT re-declare these values in a surface stylesheet — that is how the palette forks and drifts. A surface maps its own `--erp-*` names onto these `--bk-*` tokens. ── HOW THE SWITCH WORKS ─────────────────────────────────────────────── Laravel stamps the resolved theme on : (or "purple") from App\Support\BookiliTheme::current(), which coerces anything unknown / missing / NULL back to `red`. The cascade below is SPECIFICITY-based, not order-based — do not "tidy" it into a single block: · bare `:root` = (0,1,0) → the RED default, and the only rule that matches when the attribute is absent entirely (a page that forgot the stamp still renders red). · `:root[data-bookili-theme="…"]` = (0,2,0) → wins whenever the attribute IS present. Exactly one of the two ever matches. There is deliberately NO `--bk-theme` name token. It existed here with zero consumers; anything that needs to know the theme reads the attribute itself (`document.documentElement.dataset.bookiliTheme` in JS, the `:root[data-bookili-theme="…"]` selector in CSS, `BookiliTheme::current()` / `data.theme` on the server). Do not re-add it. ── ONE OFFICIAL GRADIENT, DEGENERATE UNDER RED ──────────────────────── Both themes define `--bk-grad-brand`. Purple's is the founder's OFFICIAL ramp, three stops, #6B2FA0 -> #A83678 -> #E85AA8 at 135deg with the stops at 0% / 50% / 100%. RED's is DEGENERATE, the same #D90217 at every stop. That is the whole point: a gradient component reads ONE token in both themes and never needs an `if theme == purple` branch, and `red` is provably unregressed because a same-colour gradient renders identically to the solid fill it replaces. There is exactly ONE brand ramp. The founder's sheet carries exactly one "Gradient (Official)", and it is what primary buttons, banners and featured elements paint. `--bk-grad-brand-hover` is that same ramp darkened for :hover. It has to exist as its own IMAGE, because a gradient `background-image` sits ON TOP of `background-color`: a colour-only hover is covered by the resting image and the darkening silently never shows. MEASURED, and on the record: white on purple's #E85AA8 end stop is 3.25:1, under WCAG-AA body's 4.5:1. The founder has ruled that the three-colour ramp IS the identity, so the ramp is NOT clamped and #E85AA8 is NOT darkened (it is founder-verbatim and pinned on the wire as theme_palette.brand.secondary). What the pink measures UNDER A LABEL is a different number from what it measures at the end stop, because the gradient position beneath a glyph is a function of the box: on a wide button with a centred label the last stop falls past the final glyph. The per-selector measurement lives in the change that restored this ramp. A previous revision carried a SECOND, clamped `--bk-grad-brand-cta` ramp (#6B2FA0 -> #A83678) for text-bearing controls. The founder reversed it. Do not reintroduce a second ramp without him. ── BRAND TINT RAMP ──────────────────────────────────────────────────── `--bk-primary-wash / -soft / -hairline / -ink / -lift` are the SOFT brand surfaces the panels paint on — the tints that used to be co-located hex literals next to a tokenised brand foreground (which is how purple text ended up inside a red-pink box). Each RED value is the exact literal the surfaces hard-coded before this layer existed, so `red` is byte-identical. Where an inherited surface's literal drifts from the rung by a step or two (red's washes range #FFF0F1 … #FFF5F6), the surface KEEPS its own declaration untouched and adds a `:root[data-bookili-theme="purple"] …` override beside it. Collapsing those onto one token would have CHANGED `red`, which the unregressed-red rule forbids; the scoped override leaves the red declaration literally untouched instead. ── CANONICAL SOURCE ─────────────────────────────────────────────────── App\Support\BookiliTheme (PHP) is canonical; this file is its CSS mirror and the API serves the same table as `theme_palette`. A change to one MUST be made in the other. NOTE: this is NOT public/erp-web/_tokens.css. That file is GENERATED from design/tokens.json (repo root) and holds the DreamsPOS structural tokens — slate neutrals, radii, shadows, shell metrics, type. Those are the business design LANGUAGE (layout, density, shape) and do not change with the theme. Only the COLOUR identity lives here. ===================================================================== */ /* ───────────────────────────────────────────────────────────────────── THEME: red — the current Bookili vivid-red brand. THE DEFAULT. ───────────────────────────────────────────────────────────────────── */ :root { --bk-primary: #D90217; --bk-primary-dark: #8F0110; --bk-primary-hover: #B30213; --bk-primary-pressed: #8F0110; --bk-primary-transparent: #FDECEC; --bk-primary-100: #FBDCDC; --bk-secondary: #D90217; --bk-accent: #D90217; --bk-on-primary: #FFFFFF; /* Soft brand surfaces — RED's values are the exact literals the panels hard-coded before this layer existed (see the header note). */ --bk-primary-wash: #FFF5F5; --bk-primary-soft: #FDE3E3; --bk-primary-hairline: #F4A6AC; --bk-primary-ink: #7A2B30; --bk-primary-lift: #E8556A; /* THE official gradient — DEGENERATE here (same colour at every stop), so a gradient-filled primary button renders the identical flat #D90217 the solid fill rendered, and :hover the identical flat #B30213. */ --bk-grad-brand-start: #D90217; --bk-grad-brand-mid: #D90217; --bk-grad-brand-end: #D90217; --bk-grad-brand: linear-gradient(135deg, #D90217 0%, #D90217 50%, #D90217 100%); --bk-grad-brand-hover: linear-gradient(135deg, #B30213 0%, #B30213 50%, #B30213 100%); /* Vertical button-depth gradient + its tonal shadow (today's exact values). */ --bk-grad-depth: linear-gradient(180deg, #E8253A 0%, #B30213 100%); --bk-grad-depth-hover: linear-gradient(180deg, #B30213 0%, #8F0110 100%); --bk-shadow-primary: 0 5px 13px -6px rgba(217, 2, 23, .42); /* Brand RGB CHANNELS — for rgba() tints that need their own alpha: rgba(var(--bk-primary-rgb), .5). A hex token cannot carry a custom alpha. */ --bk-primary-rgb: 217, 2, 23; } :root[data-bookili-theme="red"] { --bk-primary: #D90217; --bk-primary-dark: #8F0110; --bk-primary-hover: #B30213; --bk-primary-pressed: #8F0110; --bk-primary-transparent: #FDECEC; --bk-primary-100: #FBDCDC; --bk-secondary: #D90217; --bk-accent: #D90217; --bk-on-primary: #FFFFFF; --bk-primary-wash: #FFF5F5; --bk-primary-soft: #FDE3E3; --bk-primary-hairline: #F4A6AC; --bk-primary-ink: #7A2B30; --bk-primary-lift: #E8556A; --bk-grad-brand-start: #D90217; --bk-grad-brand-mid: #D90217; --bk-grad-brand-end: #D90217; --bk-grad-brand: linear-gradient(135deg, #D90217 0%, #D90217 50%, #D90217 100%); --bk-grad-brand-hover: linear-gradient(135deg, #B30213 0%, #B30213 50%, #B30213 100%); --bk-grad-depth: linear-gradient(180deg, #E8253A 0%, #B30213 100%); --bk-grad-depth-hover: linear-gradient(180deg, #B30213 0%, #8F0110 100%); --bk-shadow-primary: 0 5px 13px -6px rgba(217, 2, 23, .42); /* Brand RGB CHANNELS — for rgba() tints that need their own alpha: rgba(var(--bk-primary-rgb), .5). A hex token cannot carry a custom alpha. */ --bk-primary-rgb: 217, 2, 23; } /* ───────────────────────────────────────────────────────────────────── THEME: purple — "Bookili Design System v1.0". primary / primary-dark / secondary / accent and the identity gradient are the founder's EXACT sheet values. hover / pressed / every tint rung are DERIVED shades of #A83678, mirroring the ratios the red brand uses. The four DERIVED brand slots (hover / pressed / transparent / 100) are canonical in App\Support\BookiliTheme and served on the wire as `theme_palette.brand`; every other surface mirrors THOSE values. ───────────────────────────────────────────────────────────────────── */ :root[data-bookili-theme="purple"] { --bk-primary: #A83678; --bk-primary-dark: #6B2FA0; --bk-primary-hover: #8E2A64; --bk-primary-pressed: #74245A; --bk-primary-transparent: #F7ECF3; --bk-primary-100: #EFD7E6; --bk-secondary: #E85AA8; --bk-accent: #C66BD9; --bk-on-primary: #FFFFFF; /* Soft brand surfaces — tints of #A83678 at the same lightness rungs red uses, so a tinted panel reads identically bright in both themes. MEASURED on --bk-primary-wash: --bk-primary 5.72:1 · --bk-primary-ink 9.54:1 · --bk-primary-pressed 9.25:1 (red's equivalents: 4.94 / 8.87 / 9.01) — every rung clears WCAG-AA by more than red does. */ --bk-primary-wash: #FCF7FA; --bk-primary-soft: #F6EAF1; --bk-primary-hairline: #D79FC4; --bk-primary-ink: #6B2A52; --bk-primary-lift: #E85AA8; /* THE official gradient, founder-verbatim: Primary Dark -> Primary 500 -> Secondary Pink, 135deg, stops 0% / 50% / 100%. This is what primary buttons, banners and featured elements paint. White measures 8.27:1 on #6B2FA0, 6.06:1 on #A83678 and 3.25:1 on #E85AA8; the last of those is under AA body and is a known, founder-accepted measurement, NOT a licence to darken #E85AA8 or to clamp the ramp. What a label actually sits on depends on the control's width (see the header note). */ --bk-grad-brand-start: #6B2FA0; --bk-grad-brand-mid: #A83678; --bk-grad-brand-end: #E85AA8; --bk-grad-brand: linear-gradient(135deg, #6B2FA0 0%, #A83678 50%, #E85AA8 100%); /* The same ramp darkened for :hover, stop for stop. #8E2A64 is the canonical primary_hover from App\Support\BookiliTheme; #5A2786 and #C64D8F are the matching 15% darkenings of the other two stops, and they are the exact three stops the customer web already ships as --bk-gradient-brand-hover (apps/marketplace-web .../src/app/themes.scss), so the two web surfaces hover identically instead of each inventing a ramp. */ --bk-grad-brand-hover: linear-gradient(135deg, #5A2786 0%, #8E2A64 50%, #C64D8F 100%); /* Button-depth ramp. TOP STOP was the founder's light accent #C66BD9, which put white at 3.23:1 — a WCAG-AA failure, and worse than red's own 4.41:1 at #E8253A. Darkened to #B43CCD: white = 4.70:1 (AA), and the ramp is still visibly a ramp (relative luminance .173 → .077, a 2.25× spread vs red's 1.94×). #C66BD9 is untouched as --bk-accent. */ --bk-grad-depth: linear-gradient(180deg, #B43CCD 0%, #6B2FA0 100%); --bk-grad-depth-hover: linear-gradient(180deg, #6B2FA0 0%, #4E2275 100%); --bk-shadow-primary: 0 5px 13px -6px rgba(168, 54, 120, .42); --bk-primary-rgb: 168, 54, 120; } /* ───────────────────────────────────────────────────────────────────── THEME-INVARIANT design-system tokens (founder's sheet). Declared ONCE, on :root only — the SAME value in both themes, so a component reading them never needs the attribute. !! WARNING — these are for NEW components. Retrofitting them onto !! existing `red` UI would VISIBLY CHANGE `red`, which the !! "red stays unregressed" rule forbids. Read them; do not repaint. !! In particular the business surfaces keep the DreamsPOS radii and !! slate neutrals from _tokens.css; these are the CUSTOMER system's. ── WHAT "THEME-INVARIANT" DOES AND DOES NOT PROMISE ─────────────────── It is a promise about THESE DECLARATIONS: the value here, and the value `theme_palette.neutral / .status / .radius / .shadow.card` carries in the API, is the same whichever theme is in force. Colour identity is the only thing the flag swaps. It is NOT a promise that every surface RENDERS the same radius or shadow in both themes, and it never was: the customer web already ships 24px cards in `red` and 20px in `purple`, and the business panels keep the DreamsPOS radii from _tokens.css in BOTH themes and never read these at all. Treat `--bk-radius-*` / `--bk-shadow-card` as ADVISORY per-surface DEFAULTS for new components — a surface may hold its own shape language, and several deliberately do. `brand` + `gradient` are the only groups a consumer may assume follow the flag. ───────────────────────────────────────────────────────────────────── */ :root { --bk-white: #FFFFFF; --bk-bg: #F8F8FA; --bk-border: #E5E7EB; --bk-text: #1F1F1F; --bk-text-2: #6B7280; --bk-text-disabled: #9CA3AF; --bk-success: #22C55E; --bk-warning: #F59E0B; --bk-error: #EF4444; --bk-info: #3B82F6; --bk-rating: #FBBF24; /* ERROR SURFACE family — the wash / hairline / ink an error flash paints. THEME-INVARIANT ON PURPOSE, and the reason this group exists at all: red-means-error is a SEMANTIC, not the brand. Binding an error flash to --bk-primary-transparent made it follow the identity, so switching to purple rendered "something went wrong" on a purple wash. These stay red in both themes. Values are the literals the admin panels already used, so `red` is byte-identical and `purple` inherits the correct red error surface (ink 5.69:1 on the wash). */ --bk-error-surface: #FDECEC; --bk-error-border: #F5C2C7; --bk-error-ink: #B02A37; --bk-radius-button: 16px; --bk-radius-card: 20px; --bk-radius-input: 14px; --bk-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08); }