/* ============================================================================ PERSONAL SUITE — DESIGN TOKENS (single source of truth) Hosted: https://launcher-site-nu.vercel.app/design-tokens.css Adopt in each app by importing this at the TOP of your global stylesheet: @import url('https://launcher-site-nu.vercel.app/design-tokens.css'); (or copy this file in and @import it locally to pin a version). Dark-first, with a light theme. Toggle by setting data-theme="light|dark" on . Ship the pre-paint script from DESIGN-SYSTEM.md so there's no flash. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* Surfaces */ --bg: #0F0F11; --surface: #17171A; --surface-hover: #1E1E22; --surface-raised: #1C1C20; --panel-bg: #111114; /* Inputs & lines */ --input-bg: rgba(255,255,255,0.05); --hover-subtle: rgba(255,255,255,0.03); --border: rgba(255,255,255,0.07); --border-hover: rgba(255,255,255,0.13); --border-strong: rgba(255,255,255,0.18); --scrollbar: rgba(255,255,255,0.10); /* Text */ --text-primary: #F2F2F3; --text-secondary: #8C8C94; --text-muted: #52525A; /* Brand & status. Each app sets --accent to its own hue (see below); the rest are shared so success/warning/danger look identical across the suite. */ --accent: #5B7FFF; --accent-soft: rgba(91,127,255,0.14); --success: #50C88A; --warn: #C89632; --danger: #E85555; /* Soft status backgrounds (for banners/badges/chips) — mirror --accent-soft. */ --success-soft: rgba(80,200,138,0.14); --warn-soft: rgba(200,150,50,0.14); --danger-soft: rgba(232,85,85,0.14); /* Canonical per-app accents — set --accent to one of these in the app. */ --accent-holdings: #3B9E7A; --accent-travel: #E08B3A; --accent-tax: #4C7FE0; --accent-insurance: #2E9E93; --accent-portal: #5B7FFF; /* Radii */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; /* Shadows */ --shadow-card: 0 1px 2px rgba(0,0,0,0.20); --shadow-pop: 0 8px 24px rgba(0,0,0,0.35); /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Type */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --content-max: 960px; /* page content max-width */ } /* Light theme (explicit choice) */ :root[data-theme="light"] { --bg: #F4F4F6; --surface: #FFFFFF; --surface-hover: #F0F0F3; --surface-raised: #FAFAFC; --panel-bg: #FFFFFF; --input-bg: rgba(0,0,0,0.03); --hover-subtle: rgba(0,0,0,0.03); --border: rgba(0,0,0,0.09); --border-hover: rgba(0,0,0,0.15); --border-strong: rgba(0,0,0,0.22); --scrollbar: rgba(0,0,0,0.15); --text-primary: #18181B; --text-secondary: #56565E; --text-muted: #93939C; --accent-soft: rgba(91,127,255,0.12); --success-soft: rgba(80,200,138,0.12); --warn-soft: rgba(200,150,50,0.12); --danger-soft: rgba(232,85,85,0.12); --shadow-card: 0 1px 2px rgba(0,0,0,0.06); --shadow-pop: 0 8px 24px rgba(0,0,0,0.12); } /* Follow the OS when the user hasn't explicitly chosen dark */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #F4F4F6; --surface: #FFFFFF; --surface-hover: #F0F0F3; --surface-raised: #FAFAFC; --panel-bg: #FFFFFF; --input-bg: rgba(0,0,0,0.03); --hover-subtle: rgba(0,0,0,0.03); --border: rgba(0,0,0,0.09); --border-hover: rgba(0,0,0,0.15); --border-strong: rgba(0,0,0,0.22); --scrollbar: rgba(0,0,0,0.15); --text-primary: #18181B; --text-secondary: #56565E; --text-muted: #93939C; --accent-soft: rgba(91,127,255,0.12); --success-soft: rgba(80,200,138,0.12); --warn-soft: rgba(200,150,50,0.12); --danger-soft: rgba(232,85,85,0.12); --shadow-card: 0 1px 2px rgba(0,0,0,0.06); --shadow-pop: 0 8px 24px rgba(0,0,0,0.12); } } /* ── Base ─────────────────────────────────────────────────────────────────── */ body { background: var(--bg); color: var(--text-primary); font-family: var(--font-sans); transition: background-color 0.25s ease, color 0.25s ease; } /* ── Optional component classes (use directly, or map Tailwind to the vars) ── */ .ds-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); } .ds-card--flat { box-shadow: none; } .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 500 var(--text-sm)/1 var(--font-sans); padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); cursor: pointer; transition: background 0.15s, border-color 0.15s, opacity 0.15s; } .ds-btn:hover { background: var(--surface-hover); border-color: var(--border-hover); } .ds-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .ds-btn--primary:hover { opacity: 0.9; background: var(--accent); } .ds-btn--ghost { background: transparent; border-color: transparent; color: var(--text-secondary); } .ds-btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); } .ds-btn:disabled { opacity: 0.4; cursor: not-allowed; } .ds-input { width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font: var(--text-sm) var(--font-sans); color: var(--text-primary); outline: none; transition: border-color 0.15s; } .ds-input:focus { border-color: var(--accent); } .ds-input::placeholder { color: var(--text-muted); } .ds-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); font: 500 var(--text-sm) var(--font-sans); cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.15s; } .ds-pill:hover { background: var(--surface-hover); border-color: var(--accent); transform: translateY(-1px); } .ds-tag { font: 500 var(--text-xs) var(--font-sans); padding: 3px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); } .ds-scroll::-webkit-scrollbar { width: 4px; height: 4px; } .ds-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 2px; } /* ── Top nav bar → hamburger drawer on mobile (the suite-wide nav) ─────────── */ .ds-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); height: 56px; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .ds-nav-brand { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: 600; color: var(--text-primary); text-decoration: none; } .ds-nav-links { display: flex; align-items: center; gap: var(--space-1); } .ds-nav-links a { padding: 7px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: background 0.15s, color 0.15s; } .ds-nav-links a:hover { background: var(--surface-hover); color: var(--text-primary); } .ds-nav-links a[aria-current="page"], .ds-nav-links a.active { color: var(--accent); background: var(--accent-soft); } .ds-nav-right { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; } .ds-nav-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .ds-nav-icon:hover { background: var(--surface-hover); color: var(--text-primary); } .ds-nav-burger { display: none; } .ds-nav-drawer { display: none; } @media (max-width: 720px) { .ds-nav-links { display: none; } .ds-nav-burger { display: flex; } .ds-nav-drawer { display: flex; flex-direction: column; position: absolute; top: 56px; left: 0; right: 0; background: var(--panel-bg); border-bottom: 1px solid var(--border); padding: var(--space-2); gap: 2px; box-shadow: var(--shadow-pop); } .ds-nav-drawer a { padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); text-decoration: none; } .ds-nav-drawer a:hover { background: var(--surface-hover); } .ds-nav-drawer a[aria-current="page"], .ds-nav-drawer a.active { color: var(--accent); background: var(--accent-soft); } }