/* ============================================================ Hasp — Design Tokens (variable.css) Mirrors the Flutter app palette in lib/constants/design.dart (VColorsTheme.dark / .light). Load this BEFORE any page stylesheet so the var(--v-*) tokens resolve. Reuse across every admin/marketing page. For translucent text/overlays use rgba(var(--v-fg), ) — --v-fg is the R,G,B triplet of the foreground colour, so the whole UI re-tints from a single value. ============================================================ */ :root { /* ── Surfaces (neutral dark grey — purple lives only in the accent) ── */ --v-bg: #0E0E11; /* page background */ --v-container: #1A1A1D; /* cards / panels / bars */ --v-raised: #26262A; /* inputs / chips / hovers*/ /* ── Accent (purple) ── */ --v-accent: #C084FC; --v-accent-rgb: 192, 132, 252; --v-accent-dim: rgba(var(--v-accent-rgb), 0.15); --v-accent-glow: rgba(var(--v-accent-rgb), 0.25); --v-on-accent: #0E0E11; /* text/icon over an accent fill */ /* ── Foreground (near-neutral white) ── */ --v-fg: 244, 244, 248; --v-text-1: rgb(var(--v-fg)); /* headings / values */ --v-text-2: rgba(var(--v-fg), 0.60); /* body */ --v-text-3: rgba(var(--v-fg), 0.35); /* muted / captions */ /* ── Borders & dividers (neutral, not accent-tinted) ── */ --v-border: rgba(255, 255, 255, 0.08); --v-border-md: rgba(255, 255, 255, 0.14); /* ── Status ── */ --v-error: #FF4D4D; --v-error-rgb: 255, 77, 77; --v-success: #4ADE80; --v-success-rgb: 74, 222, 128; --v-warn: #FACC15; --v-warn-rgb: 250, 204, 21; /* ── Subscription tiers (brand indicators) ── */ --v-gold: #D4AF37; --v-gold-rgb: 212, 175, 55; --v-platinum: #B0C4DE; --v-platinum-rgb: 176, 196, 222; /* ── Shape ── */ --v-radius: 14px; /* ── Brand lockup: the "H" mark + "asp" wordmark ── The mark is a full-bleed glyph — its strokes touch the left and right edges of the PNG, so it carries no side bearing of its own and the optical gap has to be set here. Size it in `em` so the mark keeps the same proportion to the wordmark everywhere, and align the lockup on the baseline: an 's baseline is its bottom edge, which sits the mark's foot on the same line as "asp" rather than down in the descender space that `align-items: flex-end` leaves under it. */ --v-brand-gap: 1px; /* optical only — the mark has no side bearing */ --v-brand-track: -0.02em; /* tightens "asp" to match the mark's weight */ --v-brand-mark: 1.32em; /* mark height, relative to the wordmark size */ /* ── Toast (toast.js) theme hooks ── Maps the portable toast module onto the Hasp palette. --accent is left unset so success stays green and info stays blue. */ --red: var(--v-error); --yellow: var(--v-warn); --glass-bg: var(--v-container); --glass-border: var(--v-border-md); --text: var(--v-text-1); --text2: var(--v-text-2); --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Light theme ("Purple White") — opt in per page with . Kept in sync with VColorsTheme.light. */ :root[data-theme="light"] { --v-bg: #FDFCFF; --v-container: #FFFFFF; --v-raised: #F3F0FA; --v-accent: #7C3AED; --v-accent-rgb: 124, 58, 237; --v-on-accent: #FFFFFF; --v-fg: 26, 24, 30; /* near-neutral ink */ --v-text-2: rgba(var(--v-fg), 0.58); --v-text-3: rgba(var(--v-fg), 0.36); --v-border: rgba(0, 0, 0, 0.10); --v-border-md: rgba(0, 0, 0, 0.16); --v-error: #DC2626; --v-error-rgb: 220, 38, 38; --v-success: #16A34A; --v-success-rgb: 22, 163, 74; }