/* ============================================================ Purple Wallet — marketing site design tokens ------------------------------------------------------------ Canonical values: docs/design/DESIGN.md (single source of truth). Mirrors the cabinet tokens (resources/js/assets/css/variables.css) and the design-system export so site + cabinet stay visually consistent. Dark is the native (:root) theme; light is the [data-theme='light'] scope — flip one attribute on . ============================================================ */ /* ============================================================ Purple Wallet — Webfonts Inter (OFL) is the single product typeface across web + Flutter. Loaded from Google Fonts; weights 300/400/500/600/700. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* ============================================================ Purple Wallet — Color tokens (the canon) ------------------------------------------------------------ Dark is the product's native/default theme (:root); light is the [data-theme='light'] scope. Every component references ONLY these variables — never raw hex — so theme = one attribute flip on . Reconciliation note (web vs app vs admin): - Brand violet #6c63ff + violet→magenta gradient is the shared anchor on every surface. - Semantic income/expense are the bright product values (#00d4aa / #ff6b6b). Accessible darker variants for text on light surfaces come from the Flutter side and live as --income-strong / --expense-strong. - --info (#2f73d8) was promoted from the admin palette into the shared canon (it was missing from the main set). ============================================================ */ :root { color-scheme: dark; /* ── Brand ──────────────────────────────────────────────── */ --accent: #6c63ff; /* primary brand violet */ --accent-hover: #5a52e0; /* hover / pressed primary */ --accent-light: rgba(108, 99, 255, 0.1); /* soft brand tint (dark = 16%-ish on near-black) */ /* ── Semantic / financial ───────────────────────────────── */ --income: #00d4aa; /* income / positive / success */ --income-bg: rgba(0, 212, 170, 0.1); --income-strong: #128b6f; /* accessible income text on light surfaces */ --expense: #ff6b6b; /* expense / negative / danger */ --expense-bg: rgba(255, 107, 107, 0.1); --expense-strong: #d45d4b; /* accessible expense text on light surfaces */ --transfer: #0984e3; /* transfers between accounts (theme-invariant) */ --transfer-bg: rgba(9, 132, 227, 0.1); --goal: #ffa726; /* goals / savings envelopes */ --goal-bg: rgba(255, 167, 38, 0.1); --warning: #fbbf24; /* amber — overdue / at-risk */ --warning-bg: rgba(251, 191, 36, 0.1); --info: #2f73d8; /* informational (promoted from admin) */ --info-bg: rgba(47, 115, 216, 0.1); /* ── Neutrals — surfaces (dark default) ─────────────────── */ --bg-primary: #0f0f23; /* deep navy — app canvas */ --bg-secondary: #1a1a2e; --bg-tertiary: #16213e; --bg-card: #1a1a2e; --bg-hover: #252540; /* ── Neutrals — text (dark default) ─────────────────────── */ --text-primary: #e0e0e0; --text-secondary: #a0a0b0; --text-muted: #6c6c7c; /* ── Borders (dark default) ─────────────────────────────── */ --border-color: #2a2a4a; --border-light: #3a3a5a; /* ── Gradients ──────────────────────────────────────────── */ --gradient-primary: linear-gradient(135deg, #6c63ff 0%, #a855f7 100%); /* @kind color */ --gradient-income: linear-gradient(135deg, #00d4aa 0%, #00b894 100%); /* @kind color */ --gradient-expense: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%); /* @kind color */ --gradient-warning: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); /* @kind color */ --gradient-card: linear-gradient(145deg, #1e1e3f 0%, #1a1a2e 100%); /* @kind color */ /* ── Glassmorphism (frosted islands) ────────────────────── */ --glass-bg: rgba(22, 22, 50, 0.72); /* @kind color */ --glass-bg-strong: rgba(15, 15, 35, 0.85); /* @kind color */ --glass-border: rgba(255, 255, 255, 0.07); /* @kind color */ } /* ============================================================ Light theme — soft lavender-grey ============================================================ */ [data-theme='light'] { color-scheme: light; --accent-light: rgba(108, 99, 255, 0.08); --income-bg: rgba(0, 212, 170, 0.1); --expense-bg: rgba(255, 107, 107, 0.1); --bg-primary: #f0f2f8; /* canonical light canvas (reconciled web #f0f2f8 over admin #f4f5fa) */ --bg-secondary: #ffffff; --bg-tertiary: #e8ecf4; --bg-card: #ffffff; --bg-hover: #f5f6fa; --text-primary: #1a1a2e; --text-secondary: #5a5a7a; --text-muted: #9a9ab0; --border-color: #e2e6f0; --border-light: #d0d5e2; --gradient-card: linear-gradient(145deg, #ffffff 0%, #f8f9fc 100%); /* @kind color */ --glass-bg: rgba(255, 255, 255, 0.75); /* @kind color */ --glass-bg-strong: rgba(248, 249, 252, 0.88); /* @kind color */ --glass-border: rgba(255, 255, 255, 0.65); /* @kind color */ } /* ============================================================ Purple Wallet — Typography tokens ------------------------------------------------------------ Single family: Inter. Base 16px (14px ≤768px). Headings 600 / line-height 1.3. Large display slots carry negative tracking; all aligned numbers use tabular figures (--font-numeric). ============================================================ */ :root { /* Family */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* @kind font */ --font-numeric: 'Inter', system-ui, sans-serif; /* @kind font */ /* Weights */ --fw-light: 300; /* @kind other */ --fw-regular: 400; /* @kind other */ --fw-medium: 500; /* @kind other */ --fw-semibold: 600; /* @kind other */ --fw-bold: 700; /* @kind other */ /* Type scale (reconciled web rem scale + app Material-3 slots) */ --fs-display: 2.25rem; /* 36px — hero amounts, displayLarge */ --fs-h1: 1.75rem; /* 28px */ --fs-h2: 1.5rem; /* 24px */ --fs-h3: 1.25rem; /* 20px */ --fs-h4: 1rem; /* 16px — titleMedium */ --fs-body-lg: 0.9rem; /* 14.4px */ --fs-body: 0.875rem; /* 14px — base body */ --fs-body-sm: 0.8rem; /* 12.8px — muted */ --fs-label: 0.85rem; /* 13.6px — form labels */ --fs-caption: 0.6875rem; /* 11px — UPPERCASE section captions */ /* Line-height */ --lh-tight: 1.3; /* @kind other */ --lh-body: 1.5; /* @kind other */ /* Letter-spacing (em, applied to large slots) */ --tracking-display: -0.02em; /* @kind other */ --tracking-h: -0.01em; /* @kind other */ --tracking-caption: 0.05em; /* @kind other */ } /* ============================================================ Purple Wallet — Spacing, radii, elevation, glass & motion ============================================================ */ :root { /* ── Spacing scale (rem) ────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px — gap between island tiles */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px — base screen padding */ --space-5: 1.25rem; /* 20px — card padding */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ /* ── Radii ──────────────────────────────────────────────── */ --radius-sm: 8px; /* inputs, chips, icon containers */ --radius-md: 12px; /* buttons, dropdowns, summary pills */ --radius-lg: 16px; /* cards, nav islands, glass cards */ --radius-xl: 24px; /* bottom-sheets, modals */ --radius-pill: 999px; /* CTAs, filter chips, badges */ /* ── Layout frame ───────────────────────────────────────── */ --sidebar-width: 260px; /* @kind spacing */ --sidebar-collapsed: 70px; /* @kind spacing */ --header-height: 60px; /* @kind spacing */ /* ── Elevation / shadows (dark default) ─────────────────── */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-accent: 0 4px 20px rgba(108, 99, 255, 0.3); /* brand glow */ --shadow-income: 0 4px 20px rgba(0, 212, 170, 0.2); /* mint glow */ --shadow-expense: 0 4px 20px rgba(255, 107, 107, 0.2); /* coral glow */ /* ── Glass blur ─────────────────────────────────────────── */ --glass-blur: 24px; /* @kind other */ --glass-saturate: 180%; /* @kind other */ --backdrop-blur: 8px; /* @kind other */ /* ── Motion — easings ───────────────────────────────────── */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* @kind other */ --stagger-delay: 50ms; /* @kind other */ /* ── Motion — transitions/durations ─────────────────────── */ --transition-fast: 0.15s ease; /* @kind other */ --transition-normal: 0.3s ease; /* @kind other */ --transition-slow: 0.5s ease; /* @kind other */ } /* Light theme softens shadows and tints them subtly violet */ [data-theme='light'] { --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(108, 99, 255, 0.04); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(108, 99, 255, 0.06); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(108, 99, 255, 0.08); --shadow-accent: 0 4px 20px rgba(108, 99, 255, 0.15); --shadow-income: 0 4px 20px rgba(0, 212, 170, 0.12); --shadow-expense: 0 4px 20px rgba(255, 107, 107, 0.12); } /* ============================================================ Purple Wallet — Base element styles (Applied globally; references token variables only.) ============================================================ */ body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--text-primary); margin: 0; } h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-h); } h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-h); } h3 { font-size: var(--fs-h3); } p { color: var(--text-secondary); margin: 0; } a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-hover); } /* Tabular figures helper — apply wherever amounts align vertically */ .pw-tabular { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; } /* Smooth theme transition — active only while flipping the theme attr */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.4s ease, background 0.4s ease, color 0.3s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.3s ease !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }