/* * ByteFederal design tokens — the single source of truth for product colour. * * Every value here is lifted verbatim from the bf-landing marketing site so the * wallet and the landing page render the same brand. Landing sources: * bf-landing/src/styles/layout.css — :root brand vars (--red, --black, …) * bf-landing/tailwind.config.mjs — white / neutral-100 / brand overrides * * The neutral ramp is Tailwind's `neutral` scale (pure grey), NOT `slate`. * That distinction is the whole point: the wallet used to mix Borex's navy * (#22354e) with a slate override layer (#0f172a), so the two products read as * different hues. Landing uses neutral throughout; so do we now. * * Dark mode keys off [data-layout-mode="dark"], which the existing * session-backed toggle (layouts/topbar.blade.php, DashboardController@ * changeLayoutMode) already writes onto both and . Nothing in this * file changes how that toggle works — it only changes what the values are. * * Consumed by: * - resources/css/app.css (Tailwind theme + the Bootstrap-compat layer) * - tailwind.config.js (colours reference these vars) */ :root { color-scheme: light; /* ---- Brand -------------------------------------------------------- */ /* RGB channel triplets exist so Tailwind's opacity modifier works (bg-brand/10, border-brand/30). A hex cannot be used that way — this is the same trick, and the same reasoning, as bf-landing's --red-rgb. */ --bf-red: #ec0401; --bf-red-rgb: 236 4 1; --bf-red-dark: #d00300; --bf-red-dark-rgb: 208 3 0; --bf-bitcoin: #f7931a; /* ---- Surfaces ----------------------------------------------------- */ /* Landing pairs a #f8f8f8 page with white panels separated by border-neutral-300 (342 uses) rather than by drop shadows. */ --bf-page: #f8f8f8; --bf-surface: #ffffff; --bf-surface-raised: #fafafa; --bf-surface-sunken: #ebebeb; --bf-hover: #f5f5f5; /* ---- Lines -------------------------------------------------------- */ --bf-border: #d4d4d4; --bf-border-subtle: #e5e5e5; /* ---- Text --------------------------------------------------------- */ --bf-heading: #171717; --bf-text: #404040; --bf-muted: #737373; --bf-faint: #a3a3a3; --bf-inverse: #f8f8f8; /* ---- Semantic ----------------------------------------------------- */ /* Grounded in the colours landing actually uses for status text (text-red-600, text-green-400, text-blue-400, amber accents) rather than invented. Danger deliberately sits at red-600, distinct from the brand red, so a destructive action never looks like a primary action. */ --bf-success: #15803d; --bf-success-soft: #dcfce7; --bf-on-success: #ffffff; --bf-warning: #d97706; --bf-warning-soft: #fef3c7; --bf-danger: #dc2626; --bf-danger-soft: #fee2e2; --bf-info: #2563eb; --bf-info-soft: #dbeafe; /* ---- Data visualization ------------------------------------------ */ /* A categorical sequence with distinct hue and luminance steps. The first four align with existing brand/semantic colours; violet and cyan extend the set for multi-series and distribution charts. */ --bf-chart-1: #ec0401; --bf-chart-2: #2563eb; --bf-chart-3: #d97706; --bf-chart-4: #15803d; --bf-chart-5: #7c3aed; --bf-chart-6: #0e7490; --bf-chart-grid: #e5e5e5; /* ---- Sidebar ------------------------------------------------------ */ /* The left nav is deliberately dark in BOTH themes — it renders under body[data-sidebar="dark"], which the app's light/dark toggle never touches. Its own token set keeps that intentional, and keeps it from being mistaken for a dark-mode bug. Values sit on landing's neutral ramp so the always-dark rail matches landing's dark surfaces exactly. */ --bf-sidebar-bg: #171717; --bf-sidebar-fg: #a3a3a3; --bf-sidebar-fg-muted: #737373; --bf-sidebar-fg-active: #f8f8f8; --bf-sidebar-hover: rgb(255 255 255 / 6%); --bf-sidebar-hover-strong: rgb(255 255 255 / 12%); --bf-sidebar-active-bg: rgb(var(--bf-red-rgb) / 15%); --bf-sidebar-border: rgb(255 255 255 / 6%); /* ---- Geometry ----------------------------------------------------- */ /* Landing's measured radius distribution: rounded-full dominates buttons (391 uses), rounded-xl cards (183), rounded-lg inputs (180). */ --bf-radius-pill: 9999px; --bf-radius-card: 0.75rem; --bf-radius-input: 0.5rem; --bf-radius-sm: 0.375rem; /* ---- Elevation ---------------------------------------------------- */ /* Deliberately faint. Landing separates surfaces with lines, not shadow. */ --bf-shadow-sm: 0 1px 2px rgb(0 0 0 / 4%); --bf-shadow: 0 1px 3px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 4%); --bf-shadow-lg: 0 10px 30px rgb(0 0 0 / 8%); /* ---- Focus -------------------------------------------------------- */ --bf-ring: rgb(var(--bf-red-rgb) / 35%); } /* Dark mode. * * Both and carry the attribute, so this selector matches twice. * That is harmless — the declarations are identical — and it is what lets the * page background be themed all the way to the viewport edge during elastic * overscroll, which needs the value on . */ [data-layout-mode='dark'] { color-scheme: dark; /* Surfaces climb the neutral ramp instead of the slate one. */ --bf-page: #171717; --bf-surface: #262626; --bf-surface-raised: #404040; --bf-surface-sunken: #0a0a0a; --bf-hover: #404040; /* neutral-700 for lines, because a neutral-800 border on a neutral-800 card is invisible. Landing does the same: border-neutral-700 appears specifically where the surface is already neutral-800. */ --bf-border: #404040; --bf-border-subtle: #262626; --bf-heading: #f8f8f8; --bf-text: #d4d4d4; --bf-muted: #a3a3a3; --bf-faint: #737373; --bf-inverse: #171717; /* Status colours lighten in dark mode so they clear contrast on a dark surface — the 400-step variants landing uses in its own dark blocks. */ --bf-success: #4ade80; --bf-success-soft: #052e16; --bf-on-success: #052e16; --bf-warning: #fbbf24; --bf-warning-soft: #3f2d0a; --bf-danger: #f87171; --bf-danger-soft: #450a0a; --bf-info: #60a5fa; --bf-info-soft: #0b2545; --bf-chart-1: #ff5c5a; --bf-chart-2: #60a5fa; --bf-chart-3: #fbbf24; --bf-chart-4: #4ade80; --bf-chart-5: #c4b5fd; --bf-chart-6: #22d3ee; --bf-chart-grid: #404040; /* Shadows need real weight to register against a dark page. */ --bf-shadow-sm: 0 1px 2px rgb(0 0 0 / 30%); --bf-shadow: 0 1px 3px rgb(0 0 0 / 40%), 0 1px 2px rgb(0 0 0 / 30%); --bf-shadow-lg: 0 10px 30px rgb(0 0 0 / 45%); }