/* ============================================================ DESIGN TOKENS — single source of truth Change here, every page updates. Usage: ships with no data-theme -> follows OS. data-theme="dark" / "light" forces the mode. ============================================================ */ :root { /* ─── Brand ─────────────────────────────────────────────── */ --color-accent: #5b8def; --color-accent-hover: #4a7ee0; --color-accent-fg: #ffffff; --color-accent-soft: rgba(91, 141, 239, 0.14); /* ─── Semantic (same in both themes for recognisability) ── */ --color-success: #30b586; --color-success-soft: rgba(48, 181, 134, 0.14); --color-danger: #e5556a; --color-danger-soft: rgba(229, 85, 106, 0.14); --color-warning: #d89a3b; --color-warning-soft: rgba(216, 154, 59, 0.14); /* ─── Spacing (4-pt grid) ───────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ─── Radius ────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ─── Typography ────────────────────────────────────────── */ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", "Sarabun", Roboto, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale (body=15, nothing smaller than 12) */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 40px; --leading-tight: 1.2; --leading-normal: 1.5; --leading-loose: 1.7; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─── Motion ────────────────────────────────────────────── */ --ease: cubic-bezier(0.2, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 260ms; /* ─── Layout ────────────────────────────────────────────── */ --touch-min: 40px; --topbar-h: 56px; --sidebar-w: 240px; --bottomnav-h: 56px; --content-max: 1280px; /* ─── z-index scale ─────────────────────────────────────── */ --z-base: 1; --z-sticky: 10; --z-drawer: 50; --z-modal: 100; --z-toast: 1000; } /* ─── DARK (default — first paint matches the existing app feel) ─── */ :root, [data-theme="dark"] { --color-bg: #0b0d12; --color-surface: #141821; --color-surface-2: #1a1f29; --color-surface-3: #222833; --color-border: #2a3140; --color-border-subtle: #222937; --color-text: #e7ebf2; --color-text-muted: #9aa4b2; --color-text-subtle: #6b7385; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); } /* ─── LIGHT — when OS prefers light AND no manual dark override ─── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --color-bg: #fafbfc; --color-surface: #ffffff; --color-surface-2: #f4f5f7; --color-surface-3: #ebeef2; --color-border: #d9dde3; --color-border-subtle: #e8ebef; --color-text: #0f1217; --color-text-muted: #5c6470; --color-text-subtle: #8b93a1; --shadow-sm: 0 1px 2px rgba(15, 18, 23, 0.06); --shadow-md: 0 4px 14px rgba(15, 18, 23, 0.08); --shadow-lg: 0 16px 40px rgba(15, 18, 23, 0.12); } } /* ─── LIGHT — manual override (takes precedence over OS) ─── */ [data-theme="light"] { --color-bg: #fafbfc; --color-surface: #ffffff; --color-surface-2: #f4f5f7; --color-surface-3: #ebeef2; --color-border: #d9dde3; --color-border-subtle: #e8ebef; --color-text: #0f1217; --color-text-muted: #5c6470; --color-text-subtle: #8b93a1; --shadow-sm: 0 1px 2px rgba(15, 18, 23, 0.06); --shadow-md: 0 4px 14px rgba(15, 18, 23, 0.08); --shadow-lg: 0 16px 40px rgba(15, 18, 23, 0.12); } /* ─── Reset + base ─── */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; } ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } html { color-scheme: dark light; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Accessible focus ring — works in both themes */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; } /* Utility: visually hidden but readable by screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Utility: tabular numbers for financial figures */ .num { font-variant-numeric: tabular-nums; } /* Utility: semantic colors applied to text */ .t-success { color: var(--color-success); } .t-danger { color: var(--color-danger); } .t-muted { color: var(--color-text-muted); } .t-subtle { color: var(--color-text-subtle); }