/* assets/css/tokens.css */ /* ───────────────────────────────────────────────────────────────────────────── Shared design tokens — colors, spacing, typography scale, shadows, radii, and sizing standards (like the chevron variables below). This file defines VALUES ONLY — no element rules, no resets, no fonts. That's the whole point of splitting it out from base.css: it's safe to load on every single page (main app, admin, auth) with zero risk of visual side effects, since custom properties that nothing references simply do nothing. Extracted from base.css's :root block on 2026-08-27. Before this, admin pages never loaded base.css at all (they build their own and never included it — see admin.css's own header comment, which describes admin's tokens as independently "matching" base.css's palette rather than sharing it). That meant variables like --card-chevron-size could be changed here with zero visible effect anywhere in /admin/*, because the variable simply didn't exist in that page's cascade — every var() fell straight through to its hardcoded final fallback instead. This file is the actual fix: load it everywhere, and there is genuinely one source of truth. base.css still exists and still owns fonts, resets, and base element styling (button/input/heading rules etc.) — those remain main-app-only, since admin already built its own equivalents on purpose. Auth pages (auth-variables.css) are a third, still-separate token system — not touched by this pass; see the CSS refactor entry in todo.txt for that. ───────────────────────────────────────────────────────────────────────── */ :root { /* Color Palette - Based on screenshot */ --color-primary: #FF6B9D; /* Pink/Coral */ --color-primary-light: #FDE4EA; --color-primary-dark: #E85A8A; --color-secondary: #667eea; /* Purple gradient start */ --color-secondary-dark: #764ba2; /* Purple gradient end */ --color-accent: #2ECC71; /* Green for CTAs */ --color-accent-dark: #27AE60; /* WhatsApp-style pill background — deliberately its own token rather than reusing --color-accent-dark, since it's a visually distinct (lighter) shade meant for a specific use (search-tag-input pills), not a redeclaration of the same CTA green at a different value. Added 2026-09-11 for components/search-tag-input. */ --color-pill-bg: #46DA7D; --color-blue: #4A90E2; /* Blue for buttons */ --color-blue-light: #E3F2FD; /* Neutrals */ --color-text: #333333; --color-text-light: #666666; --color-border: #E0E0E0; --color-background: #F8F9FA; --color-white: #FFFFFF; /* "Needs a human" state (e.g. a transaction in needs_review) — amber, deliberately neither the success green nor the error red: no confirmed money movement to put a sign on yet. One source for admin rows, count badges and the customer wallet list, so they can't drift apart. */ --color-review-bg: #FAEEDA; --color-review-border: #EF9F27; --color-review-text: #8A6100; /* Success / danger pill colors — formalizes hex values already used ad hoc elsewhere (admin-toast--success and admin-pill--active already share these exact success values; admin-toast--error and admin-pill--inactive already share these danger values) into named tokens, so new status pills (admin-pill--success/--danger, added 2026-09 for the transaction table) draw from one source instead of re-hardcoding the same hex a fourth time. The existing rules using the literal hex are left as-is — not touched by this pass. */ --color-success-bg: #D4EDDA; --color-success-text: #155724; --color-danger-bg: #F8D7DA; --color-danger-text: #721C24; /* Rail nav-item active state (admin-shell) — distinct from success green: this marks "current selection," not a completed/positive outcome. Kept as its own token pair rather than reusing --color-accent, even though the hue is close, since the two mean different things and could diverge. */ --color-nav-active-bg: #E6F7EE; --color-nav-active-text: #0F9D58; /* Avatar corner badges (components/user-dropdown). Alert = red, "needs attention" (admin alerts); vote = green, ambient balance info. Alert red matches .shop-cart-badge. The vote green is deliberately darker than --color-accent so white 11px text stays readable on it. The ring separates a pill from the avatar it overlaps. */ --badge-alert-bg: #E74C3C; --badge-vote-bg: #1F8A43; --badge-text: #FFFFFF; --badge-ring: var(--color-white); /* Badge size standard — the avatar corner pills AND the Moderate menu count read these, so one change resizes them all. Was 20px / 11px / 6px; trimmed to 18px / 10px / 5px so the pills crowd the 40px avatar less. */ --badge-size: 16px; --badge-font-size: 9px; --badge-pad-x: 5px; /* Small circles/pills centre their text with flexbox, but Poppins' line box sits the glyph a touch low at tiny sizes. Padding below the text lifts it by half this value (so 0.2em ~ 0.1em up). Read by the New chip count only; currently 0 (no lift). Scales with the element's own font size. */ --badge-glyph-lift: 0.0em; /* Same idea in the other direction: padding ABOVE lowers the Account failed-row (i) icon's glyph by half this value (0.2em ~ 0.1em down). Tune independently of the lift above. */ --info-glyph-drop: 0.2em; /* Avatar corner badge placement. --badge-overlap is how far each pill's INNER edge sits inside the avatar's edge; it was a hardcoded 8px, which let a "99+" pill poke past the screen edge on phones (the avatar sits at the navbar's right end, with only 1rem of padding beyond it). Both pills read it, so they stay symmetric. --badge-top lifts them slightly so they cover less of the avatar's top edge. */ --badge-overlap: 14px; --badge-top: -8px; /* Gradients */ --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-warm: linear-gradient(135deg, #FF6B9D 0%, #FFB3C6 100%); /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Typography */ --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; --font-size-4xl: 2.5rem; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Border radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* Minimum touch target size (WCAG 2.5.5 / Apple HIG: 44px) */ --touch-target-min: 44px; /* Chevron / navigation arrow size standard. Used in list row chevrons, back arrows, and any directional indicator. Matches the user-dropdown chevron at 18px. Always pair with line-height:1 to avoid vertical misalignment. */ --chevron-size: 18px; /* Card-category chevron override. Falls back to --chevron-size when unset at the point of use: font-size: var(--card-chevron-size, var(--chevron-size, 18px)); Change THIS value to resize every card chevron app-wide (admin-grid cards, topup-modal card pickers) without touching back-arrows or dropdown chevrons, which stay on --chevron-size directly. */ --card-chevron-size: 25px; /* Filter-bar chip height standard — gallery-filter-chip, gallery-filter-select, and the search-tag-input's .tagify all read this instead of hardcoding their own height, so they can't drift apart the way the chevron sizes did. Added 2026-09-26 after the tag-input chip was found sitting 2px taller than its neighbours at desktop widths (it never had its own 768px override). Only the VALUE changes below — no element rule lives here, same as every other token in this file. */ --chip-height: 38px; } @media (min-width: 768px) { :root { --chip-height: 36px; } }