/* ============================================================================= Credit Dashboard — Design System v2 tokens.css — Single source of truth for all design tokens. Usage: (load FIRST, before app CSS) Theme is controlled via the `data-theme` attribute on : (default) With no attribute, dark is assumed. Conventions: --c-* color (raw + semantic) --fs-* font-size --fw-* font-weight --lh-* line-height --ls-* letter-spacing --sp-* spacing (4px base) --r-* radius --sh-* shadow / elevation --z-* z-index --dur-* duration --ease-* easing Color values inside translucent tokens are pre-baked per theme so that alpha overlays read correctly on each surface. ========================================================================== */ /* ----------------------------------------------------------------------------- THEME-AGNOSTIC TOKENS (shared by both themes) -------------------------------------------------------------------------- */ :root { /* ---- Typography: families ---- */ --font-sans: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-display: var(--font-sans); /* ---- Typography: size scale (1.20 minor-third-ish, tuned) ---- */ --fs-2xs: 10.5px; /* micro labels, axis ticks */ --fs-xs: 11.5px; /* badges, tags, captions */ --fs-sm: 12.5px; /* secondary text, table cells */ --fs-base: 13.5px; /* body default */ --fs-md: 15px; /* card titles, emphasised body */ --fs-lg: 17px; /* section headers */ --fs-xl: 20px; /* page / drawer titles */ --fs-2xl: 26px; /* KPI sub-figures */ --fs-3xl: 34px; /* hero balance figures */ --fs-4xl: 44px; /* oversized hero / login wordmark */ /* ---- Typography: weights ---- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Typography: line-heights ---- */ --lh-none: 1; --lh-tight: 1.15; /* large numerals, headings */ --lh-snug: 1.3; /* titles */ --lh-normal: 1.5; /* body copy */ --lh-relaxed: 1.65; /* long-form hints */ /* ---- Typography: letter-spacing ---- */ --ls-tighter: -0.02em; /* hero figures */ --ls-tight: -0.01em; /* headings */ --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.06em; /* uppercase eyebrows / overlines */ /* ---- Numeric rendering (tabular figures for money) ---- */ --fnum-tabular: "tnum" 1, "lnum" 1; /* ---- Spacing scale (4px base) ---- */ --sp-0: 0; --sp-px: 1px; --sp-0\.5: 2px; --sp-1: 4px; --sp-1\.5: 6px; --sp-2: 8px; --sp-2\.5: 10px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ---- Radii ---- */ --r-xs: 4px; /* tags, inline chips */ --r-sm: 6px; /* small buttons, inputs */ --r-md: 8px; /* buttons, list items */ --r-lg: 12px; /* cards, modals */ --r-xl: 16px; /* drawers, large panels */ --r-2xl: 22px; /* hero panels */ --r-pill: 999px; --r-circle: 50%; /* ---- Border widths ---- */ --bw-hair: 1px; --bw-thick: 1.5px; --bw-focus: 2px; /* ---- Layout dimensions ---- */ --layout-sidebar-w: 248px; --layout-sidebar-w-collapsed: 64px; --layout-topbar-h: 60px; --layout-drawer-w: 480px; --layout-content-max: 1320px; --layout-gutter: var(--sp-6); /* ---- Z-index scale ---- */ --z-base: 0; --z-sticky: 100; /* topbar, sticky table head */ --z-sidebar: 200; --z-dropdown: 600; --z-drawer: 800; --z-modal: 900; --z-toast: 1000; --z-tooltip: 1100; /* ---- Motion: durations ---- */ --dur-instant: 80ms; --dur-fast: 130ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 480ms; /* ---- Motion: easings ---- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* enter/move, Material-ish */ --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); /* exit */ --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle overshoot */ /* ---- Data-viz categorical series (theme-agnostic, vivid yet harmonious) ---- Use in order. Designed to stay distinct in both themes. */ --c-series-1: #4f8cff; /* blue — primary / accent-aligned */ --c-series-2: #2dd4a7; /* teal */ --c-series-3: #f0a93b; /* amber */ --c-series-4: #c084fc; /* violet */ --c-series-5: #f472b6; /* pink */ --c-series-6: #38bdf8; /* sky */ --c-series-7: #a3e635; /* lime */ --c-series-8: #fb7185; /* rose */ } /* ----------------------------------------------------------------------------- DARK THEME (default) -------------------------------------------------------------------------- */ :root, [data-theme="dark"] { color-scheme: dark; /* ---- Surfaces (lowest → highest elevation) ---- */ --c-bg: #0b0e14; /* app canvas / page background */ --c-bg-subtle: #0e121a; /* alt canvas, table zebra base */ --c-panel: #131822; /* primary cards, sidebar */ --c-panel-2: #1a212d; /* nested panels, inputs-on-panel, list items */ --c-elevated: #212a38; /* dropdowns, popovers, drawer header */ --c-overlay-scrim: rgba(3, 6, 12, 0.66); /* modal/drawer backdrop */ /* ---- Hairline / borders ---- */ --c-border: #232c3a; /* default hairline */ --c-border-strong: #303b4d; /* emphasised dividers, focused container */ --c-border-subtle: #1a212d; /* barely-there separators */ /* ---- Text ---- */ --c-text: #e7ecf3; /* primary */ --c-text-muted: #9aa6b8; /* secondary, labels */ --c-text-faint: #5f6c80; /* tertiary, placeholders, disabled */ --c-text-inverse: #0b0e14; /* text on accent / solid fills */ /* ---- Accent (brand) ---- */ --c-accent: #4f8cff; --c-accent-hover: #6ea0ff; --c-accent-active: #3d77e6; --c-accent-contrast: #ffffff; /* text on accent fill */ --c-accent-soft: rgba(79, 140, 255, 0.14); /* translucent fill */ --c-accent-soft-hover: rgba(79, 140, 255, 0.22); --c-accent-ring: rgba(79, 140, 255, 0.45); /* focus ring */ --c-accent-border: rgba(79, 140, 255, 0.5); /* ---- Semantic: success ---- */ --c-success: #3fb950; --c-success-hover: #4fd163; --c-success-contrast: #04150a; --c-success-soft: rgba(63, 185, 80, 0.14); --c-success-border: rgba(63, 185, 80, 0.42); /* ---- Semantic: warning ---- */ --c-warning: #e0a32e; --c-warning-hover: #f0b647; --c-warning-contrast: #1a1203; --c-warning-soft: rgba(224, 163, 46, 0.14); --c-warning-border: rgba(224, 163, 46, 0.42); /* ---- Semantic: danger ---- */ --c-danger: #f85149; --c-danger-hover: #ff6b63; --c-danger-contrast: #1a0504; --c-danger-soft: rgba(248, 81, 73, 0.14); --c-danger-border: rgba(248, 81, 73, 0.42); /* ---- Semantic: info / neutral-positive ---- */ --c-info: #58a6ff; --c-info-hover: #79b8ff; --c-info-contrast: #04101f; --c-info-soft: rgba(88, 166, 255, 0.14); --c-info-border: rgba(88, 166, 255, 0.42); /* ---- Kind accents (provider classification) ---- */ --c-kind-live: var(--c-success); --c-kind-live-soft: var(--c-success-soft); --c-kind-consumption: var(--c-accent); --c-kind-consumption-soft: var(--c-accent-soft); --c-kind-manual: var(--c-warning); --c-kind-manual-soft: var(--c-warning-soft); /* ---- Ledger event accents ---- */ --c-ledger-topup: var(--c-success); --c-ledger-adjustment: var(--c-warning); --c-ledger-checkpoint: var(--c-info); /* ---- Misc UI ---- */ --c-skeleton-base: #1a212d; --c-skeleton-shimmer: rgba(255, 255, 255, 0.06); --c-track: #1a212d; /* progress / meter track */ --c-selection: rgba(79, 140, 255, 0.3); --c-backdrop-blur: saturate(140%) blur(6px); /* ---- Elevation shadows (subtle, layered, low-spread) ---- */ --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.18); --sh-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4); --sh-3: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4); --sh-4: 0 18px 50px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.45); --sh-focus: 0 0 0 var(--bw-focus) var(--c-bg), 0 0 0 4px var(--c-accent-ring); --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* ---- Gradients (use sparingly for hero / KPI accents) ---- */ --grad-accent: linear-gradient(135deg, #4f8cff 0%, #6e6bff 100%); --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%); --grad-spark-fill: linear-gradient(180deg, rgba(79, 140, 255, 0.28) 0%, rgba(79, 140, 255, 0) 100%); /* ---- Data-viz: grid & axis ---- */ --c-viz-grid: rgba(255, 255, 255, 0.06); --c-viz-axis: rgba(255, 255, 255, 0.14); --c-viz-label: var(--c-text-faint); } /* ----------------------------------------------------------------------------- LIGHT THEME -------------------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; /* ---- Surfaces ---- */ --c-bg: #f6f8fb; --c-bg-subtle: #eef1f6; --c-panel: #ffffff; --c-panel-2: #f4f6fa; --c-elevated: #ffffff; --c-overlay-scrim: rgba(15, 23, 38, 0.32); /* ---- Borders ---- */ --c-border: #e2e7ef; --c-border-strong: #cfd6e1; --c-border-subtle: #eef1f6; /* ---- Text ---- */ --c-text: #111826; --c-text-muted: #5a6678; --c-text-faint: #97a1b2; --c-text-inverse: #ffffff; /* ---- Accent ---- */ --c-accent: #2f6fed; --c-accent-hover: #245fd6; --c-accent-active: #1c50bc; --c-accent-contrast: #ffffff; --c-accent-soft: rgba(47, 111, 237, 0.10); --c-accent-soft-hover: rgba(47, 111, 237, 0.16); --c-accent-ring: rgba(47, 111, 237, 0.35); --c-accent-border: rgba(47, 111, 237, 0.4); /* ---- Success ---- */ --c-success: #16a34a; --c-success-hover: #15913f; --c-success-contrast: #ffffff; --c-success-soft: rgba(22, 163, 74, 0.10); --c-success-border: rgba(22, 163, 74, 0.38); /* ---- Warning ---- */ --c-warning: #c2820a; --c-warning-hover: #aa7108; --c-warning-contrast: #ffffff; --c-warning-soft: rgba(194, 130, 10, 0.12); --c-warning-border: rgba(194, 130, 10, 0.4); /* ---- Danger ---- */ --c-danger: #dc3838; --c-danger-hover: #c62f2f; --c-danger-contrast: #ffffff; --c-danger-soft: rgba(220, 56, 56, 0.10); --c-danger-border: rgba(220, 56, 56, 0.4); /* ---- Info ---- */ --c-info: #2f6fed; --c-info-hover: #245fd6; --c-info-contrast: #ffffff; --c-info-soft: rgba(47, 111, 237, 0.10); --c-info-border: rgba(47, 111, 237, 0.4); /* ---- Kind accents ---- */ --c-kind-live: var(--c-success); --c-kind-live-soft: var(--c-success-soft); --c-kind-consumption: var(--c-accent); --c-kind-consumption-soft: var(--c-accent-soft); --c-kind-manual: var(--c-warning); --c-kind-manual-soft: var(--c-warning-soft); /* ---- Ledger event accents ---- */ --c-ledger-topup: var(--c-success); --c-ledger-adjustment: var(--c-warning); --c-ledger-checkpoint: var(--c-info); /* ---- Misc UI ---- */ --c-skeleton-base: #e7ebf2; --c-skeleton-shimmer: rgba(255, 255, 255, 0.7); --c-track: #e7ebf2; --c-selection: rgba(47, 111, 237, 0.18); --c-backdrop-blur: saturate(120%) blur(6px); /* ---- Elevation shadows (soft, neutral-cool) ---- */ --sh-1: 0 1px 2px rgba(15, 23, 38, 0.06), 0 0 0 1px rgba(15, 23, 38, 0.04); --sh-2: 0 2px 6px rgba(15, 23, 38, 0.08), 0 1px 2px rgba(15, 23, 38, 0.06); --sh-3: 0 10px 28px rgba(15, 23, 38, 0.10), 0 2px 6px rgba(15, 23, 38, 0.06); --sh-4: 0 22px 55px rgba(15, 23, 38, 0.16), 0 6px 16px rgba(15, 23, 38, 0.08); --sh-focus: 0 0 0 var(--bw-focus) var(--c-bg), 0 0 0 4px var(--c-accent-ring); --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ---- Gradients ---- */ --grad-accent: linear-gradient(135deg, #2f6fed 0%, #6a5cff 100%); --grad-surface: linear-gradient(180deg, rgba(15, 23, 38, 0.02) 0%, rgba(15, 23, 38, 0) 100%); --grad-spark-fill: linear-gradient(180deg, rgba(47, 111, 237, 0.18) 0%, rgba(47, 111, 237, 0) 100%); /* ---- Data-viz ---- */ --c-viz-grid: rgba(15, 23, 38, 0.07); --c-viz-axis: rgba(15, 23, 38, 0.16); --c-viz-label: var(--c-text-faint); /* ---- Series: slightly deepened for contrast on white ---- */ --c-series-1: #2f6fed; --c-series-2: #0d9488; --c-series-3: #d97706; --c-series-4: #9333ea; --c-series-5: #db2777; --c-series-6: #0284c7; --c-series-7: #65a30d; --c-series-8: #e11d48; } /* ----------------------------------------------------------------------------- ACCESSIBILITY: reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; } }