/* ============================================================================ tokens.css — design-system tokens Source of truth: Figma variables (authored via figma-mcp-go / ThroughLine). Do not hand-edit values here long-term — resync from Figma. Theme model: theme is chosen per-surface via , NOT by the OS. Marketing surfaces set data-theme="dark"; the product UI (dashboard, app detail) sets data-theme="light". Light is also the default (:root). ============================================================================ */ :root { /* ---- Color primitives (theme-agnostic raw palette) ---- */ --neutral-0: #ffffff; --neutral-50: #fafafc; --neutral-100: #f5f5f7; --neutral-200: #d2d2d7; --neutral-400: #a1a1a6; --neutral-500: #86868b; --neutral-600: #6e6e73; --neutral-800: #2a2a2e; --neutral-900: #1d1d1f; --neutral-925: #141416; --neutral-950: #101012; --neutral-975: #0a0a0c; --neutral-1000: #000000; --blue-600: #0066cc; --blue-500: #0a84ff; --blue-400: #2997ff; --green-500: #34c759; --green-600: #34a853; --red-500: #ff3b30; --orange-500: #ff9f0a; --gray-500: #8e8e93; /* ---- Spacing (4-based) ---- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-88: 88px; /* ---- Radius ---- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; /* ---- Type scale ---- */ --size-xs: 11px; --size-sm: 13px; --size-base: 15px; --size-md: 17px; --size-lg: 19px; --size-xl: 21px; --size-2xl: 24px; --size-3xl: 30px; --size-4xl: 40px; --size-5xl: 48px; --size-6xl: 60px; /* ---- Weights ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* ---- Font families ---- */ --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; } /* ---- Semantic color — LIGHT (default surface: product UI) ---- */ :root, :root[data-theme="light"] { --bg: #ffffff; --bg-alt: #f5f5f7; --bg-sunk: #fafafc; --text: #1d1d1f; --muted: #6e6e73; --faint: #86868b; --line: #d2d2d7; --hairline: rgba(0, 0, 0, 0.08); --accent: #0066cc; --accent-tx: #ffffff; --panel: #ffffff; --chrome: rgba(255, 255, 255, 0.72); --tick: #1d1d1f; --success: #1a8c3c; --danger: #c62f27; --warning: #b5730a; --info: #0a63c9; --store-apple: #000000; --store-play: #34a853; } /* ---- Semantic color — DARK (marketing surface) ---- */ :root[data-theme="dark"] { --bg: #000000; --bg-alt: #101012; --bg-sunk: #0a0a0c; --text: #f5f5f7; --muted: #a1a1a6; --faint: #86868b; --line: #2a2a2e; --hairline: rgba(255, 255, 255, 0.10); --accent: #2997ff; --accent-tx: #ffffff; --panel: #141416; --chrome: rgba(0, 0, 0, 0.72); --tick: #ffffff; --success: #4cd569; --danger: #ff6b61; --warning: #ffb340; --info: #5aa9ff; --store-apple: #333333; --store-play: #34a853; }