/* ============================================================ DukonOS Design Tokens Single source of truth for color, type, spacing, and motion. Both themes via [data-theme="dark"] on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap'); :root { /* ---------- BASE COLOR TOKENS (light, default) ---------- */ --bg-deep: #f4f4f5; --bg-outer: #0f0f0f; /* phone-frame backdrop */ --surface: #ffffff; --card-bg: #ffffff; --card-bg-soft: rgba(255,255,255,0.9); --card-border: rgba(0, 0, 0, 0.15); --card-border-faint: rgba(0,0,0,0.05); --card-highlight: rgba(255,255,255,1); --text-main: #18181b; --text-muted: #71717a; --text-subtle: #a1a1aa; --neon-cyan: #06b6d4; --neon-green: #059669; --neon-red: #dc2626; --neon-purple: #7c3aed; --neon-amber: #f59e0b; --tint-cyan-bg: rgba(6, 182, 212, 0.12); --tint-green-bg: rgba(5, 150, 105, 0.14); --tint-red-bg: rgba(220, 38, 38, 0.12); --tint-purple-bg: rgba(124, 58, 237, 0.12); --nav-bg: #ffffff; --nav-shadow: 0 10px 30px rgba(0,0,0,0.06); /* ---------- SEMANTIC COLOR ROLES ---------- */ --fg1: var(--text-main); /* primary text */ --fg2: var(--text-muted); /* secondary text */ --fg3: var(--text-subtle); /* tertiary / disabled */ --bg1: var(--bg-deep); /* page background */ --bg2: var(--card-bg); /* card surface */ --accent: var(--neon-cyan); /* primary brand accent */ --positive: var(--neon-green); --negative: var(--neon-red); --warning: var(--neon-amber); /* ---------- TYPE TOKENS ---------- */ --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --fs-display: 30px; /* big balance / hero numerals */ --fs-h1: 24px; /* stat values, large titles */ --fs-h2: 20px; /* brand wordmark, screen titles */ --fs-h3: 16px; /* section headings */ --fs-body: 15px; /* default body */ --fs-small: 14px; /* secondary body, list items */ --fs-tiny: 13px; /* feed item description */ --fs-label: 12px; /* uppercase labels */ --fs-micro: 11px; /* uppercase tiny labels, kicker text */ --fs-nano: 10px; /* chart tick, tag */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-relaxed: 1.6; --tracking-tight: -0.5px; /* big numerals, wordmark */ --tracking-normal: 0; --tracking-wide: 0.5px; /* uppercase labels */ /* ---------- SPACING SCALE ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ---------- RADIUS ---------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 14px; /* inputs */ --r-lg: 16px; /* small action buttons */ --r-xl: 20px; /* stat cards, block cards */ --r-2xl: 24px; /* balance card, modals top */ --r-pill: 100px; /* time-filter pills */ --r-phone: 44px; /* phone frame */ /* ---------- SHADOWS ---------- */ --shadow-card: 0 8px 24px rgba(0,0,0,0.04); --shadow-card-hover: 0 10px 30px rgba(0,0,0,0.06); --shadow-nav: 0 10px 30px rgba(0,0,0,0.06); --shadow-modal: 0 40px 100px rgba(0,0,0,0.5); --shadow-pill-active:0 6px 16px rgba(0,0,0,0.1); --shadow-cta: 0 8px 20px rgba(6,182,212,0.3); --shadow-glow-cyan: 0 0 8px var(--neon-cyan); /* inset highlight used on accent cards (balance, AI advisor) */ --shadow-inset-cyan: inset 0 1px 0 rgba(6, 182, 212, 0.2); /* ---------- BLUR ---------- */ --blur-card: blur(12px); --blur-nav: blur(16px); --blur-modal: blur(4px); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* sheets, page entry */ --ease-default:ease; --t-fast: 0.2s; --t-base: 0.3s; --t-page: 0.4s; --t-sheet: 0.3s; } /* ---------- DARK THEME ---------- */ [data-theme="dark"] { --bg-deep: #09090b; --bg-outer: #000000; --surface: #141414; --card-bg: rgba(24,24,27,0.6); --card-bg-soft: rgba(24,24,27,0.7); --card-border: rgba(255,255,255,0.05); --card-border-faint: rgba(255,255,255,0.05); --card-highlight: rgba(255,255,255,0.08); --text-main: #ffffff; --text-muted: #a1a1aa; --text-subtle: #52525b; --neon-cyan: #22d3ee; --neon-green: #10b981; --neon-red: #ef4444; --neon-purple: #8b5cf6; --neon-amber: #fbbf24; --tint-cyan-bg: rgba(34, 211, 238, 0.14); --tint-green-bg: rgba(16, 185, 129, 0.16); --tint-red-bg: rgba(239, 68, 68, 0.14); --tint-purple-bg: rgba(139, 92, 246, 0.14); --nav-bg: rgba(24, 24, 27, 0.8); --nav-shadow: 0 20px 40px rgba(0,0,0,0.6); --shadow-card: 0 12px 32px rgba(0,0,0,0.3); --shadow-card-hover: 0 12px 32px rgba(0,0,0,0.4); --shadow-nav: 0 20px 40px rgba(0,0,0,0.6); --shadow-pill-active:0 6px 16px rgba(255,255,255,0.1); --shadow-inset-cyan: inset 0 1px 0 rgba(34,211,238,0.2); } /* ============================================================ SEMANTIC TYPE CLASSES Use these in marketing/site code; product code uses tokens directly. ============================================================ */ .t-display { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-display); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--fg1); font-variant-numeric: tabular-nums; } .t-h1 { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); color: var(--fg1); } .t-h2 { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); color: var(--fg1); } .t-h3 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg1); } .t-body { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg1); } .t-small { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg1); } .t-muted { color: var(--fg2); } .t-subtle { color: var(--fg3); } /* The DukonOS section-label motif: uppercase, wide tracking, bold, micro size. */ .t-label { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg2); } .t-numeric { font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }