/* ============================================================= * pandOS Design Tokens * Single source of truth for colors, typography, spacing, motion. * Theme switching: [data-theme="dark"] overrides on ; falls * back to prefers-color-scheme when no attribute is set. * Keep this file in sync with docs/DESIGN_SYSTEM.md §2. * ============================================================= */ /* ---------- Self-hosted Inter (variable, wght axis, latin) ------ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/Inter/Inter-Variable-5e6b0c47.woff2") format("woff2-variations"), url("/assets/Inter/Inter-Variable-5e6b0c47.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/Inter/Inter-Variable-Italic-6b9ed46f.woff2") format("woff2-variations"), url("/assets/Inter/Inter-Variable-Italic-6b9ed46f.woff2") format("woff2"); } /* ---------- Light (default) ------------------------------------- */ :root { color-scheme: light; /* Surface hierarchy */ --surface: #f8f9ff; --surface-container-lowest: #ffffff; --surface-container-low: #eff4ff; --surface-container: #e5eeff; --surface-container-high: #dce9ff; --surface-container-highest: #d3e4fe; /* Foreground */ --on-surface: #0b1c30; --on-surface-variant: #4a4455; --on-surface-muted: #7b7487; /* Outline */ --outline: #7b7487; --outline-variant: #ccc3d8; /* Brand */ --primary: #630ed4; --primary-container: #7c3aed; --on-primary: #ffffff; --secondary: #6a4fa0; --secondary-container: #c4a7ff; --on-secondary-container: #523787; /* Status */ --success: #10b981; --warning: #f59e0b; --error: #ba1a1a; --info: #2563eb; /* Reserved for future AAA high-contrast theme; do not use yet */ --on-surface-high-contrast: #000000; /* Elevation (shadows never pure black; tint with brand in dark) */ --shadow-ambient: 0 24px 48px rgba(11, 28, 48, 0.04); --shadow-elevated: 0 12px 32px rgba(99, 14, 212, 0.08); /* Focus ring (reserved — apply via .pa-* components or custom :focus-visible rules; Tailwind ring-* utilities keep working). */ --focus-ring: 0 0 0 2px var(--primary); /* Radius */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* Motion */ --motion-fast: 150ms; --motion-standard: 200ms; --motion-graceful: 400ms; --easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* Typography families */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ---------- Dark --------------------------------------------------- */ html[data-theme="dark"] { color-scheme: dark; --surface: #131313; --surface-container-lowest: #0e0e0e; --surface-container-low: #1c1b1b; --surface-container: #201f1f; --surface-container-high: #2a2a2a; --surface-container-highest: #353534; --on-surface: #e5e2e1; --on-surface-variant: #ccc3d8; --on-surface-muted: #958da1; --outline: #958da1; --outline-variant: #4a4455; --primary: #d2bbff; --primary-container: #7c3aed; --on-primary: #3f008e; --secondary: #cebdff; --secondary-container: #4f319c; --on-secondary-container: #bea8ff; --success: #34d399; --warning: #fbbf24; --error: #ffb4ab; --info: #93c5fd; --on-surface-high-contrast: #ffffff; --shadow-ambient: 0 12px 32px rgba(210, 187, 255, 0.08); --shadow-elevated: 0 12px 32px rgba(124, 58, 237, 0.20); } /* ---------- prefers-color-scheme fallback ------------------------- * When the user has not explicitly chosen a theme (no data-theme * attribute on ), mirror the system preference. Mirrors the * semantics of the @custom-variant dark rule in application.css. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; --surface: #131313; --surface-container-lowest: #0e0e0e; --surface-container-low: #1c1b1b; --surface-container: #201f1f; --surface-container-high: #2a2a2a; --surface-container-highest: #353534; --on-surface: #e5e2e1; --on-surface-variant: #ccc3d8; --on-surface-muted: #958da1; --outline: #958da1; --outline-variant: #4a4455; --primary: #d2bbff; --primary-container: #7c3aed; --on-primary: #3f008e; --secondary: #cebdff; --secondary-container: #4f319c; --on-secondary-container: #bea8ff; --success: #34d399; --warning: #fbbf24; --error: #ffb4ab; --info: #93c5fd; --on-surface-high-contrast: #ffffff; --shadow-ambient: 0 12px 32px rgba(210, 187, 255, 0.08); --shadow-elevated: 0 12px 32px rgba(124, 58, 237, 0.20); } } /* ---------- Root styling ------------------------------------------ */ html { font-family: var(--font-sans); font-feature-settings: "cv11", "ss01"; /* Inter: straighter 1, single-storey a */ background: var(--surface); color: var(--on-surface); transition: background var(--motion-standard) var(--easing-standard), color var(--motion-standard) var(--easing-standard); }