/* Onceproof design tokens. Every colour, size, radius, shadow and duration used by the UI comes from here. Themes: light (default), dark, and system (follows the OS). Set via . */ :root { /* ---- type ---------------------------------------------------------------- */ --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace; --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 26px; --text-3xl: 34px; --text-4xl: 48px; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --weight-regular: 430; --weight-medium: 520; --weight-semibold: 600; --weight-bold: 680; --tracking-caps: 0.06em; /* ---- space (4px grid) ------------------------------------------------------- */ --space-0: 2px; --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; /* ---- shape ---------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --border-width: 1px; /* ---- layout ---------------------------------------------------------------- */ --topbar-h: 52px; --sidebar-w: 232px; --sidebar-w-min: 196px; --sidebar-w-max: 340px; --sidebar-w-collapsed: 56px; --content-max: 1360px; --row-h: 40px; /* breakpoints (used in @media): 640 phone, 900 tablet, 1200 laptop */ /* ---- motion ---------------------------------------------------------------- */ --ease-out: cubic-bezier(.2, .8, .2, 1); --dur-fast: 90ms; --dur-base: 160ms; --dur-slow: 240ms; /* ---- layers ---------------------------------------------------------------- */ --z-sticky: 10; --z-sidebar: 20; --z-drawer: 40; --z-modal: 60; --z-palette: 70; --z-toast: 80; } /* ---- light theme ------------------------------------------------------------ */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #f5f6f4; /* app background: warm-cool neutral */ --bg-raised: #fbfbfa; --surface: #ffffff; /* panels, tables */ --surface-2: #f0f1ee; /* hover, subtle fills */ --surface-3: #e7e8e4; --border: #e1e3de; --border-strong: #cfd2cb; --text: #16181d; --text-2: #4a4f59; /* secondary */ --text-3: #6f7480; /* muted / meta (AA on --surface) */ --text-inverse: #ffffff; --focus: #2446b8; --shadow-1: 0 1px 2px rgba(20, 22, 28, .05); --shadow-2: 0 6px 24px rgba(20, 22, 28, .10), 0 1px 3px rgba(20, 22, 28, .06); --shadow-3: 0 18px 60px rgba(20, 22, 28, .18); --scrim: rgba(18, 20, 26, .38); --accent: #2446b8; --accent-hover: #1b3799; --accent-weak: #eaeefb; --accent-text: #2446b8; /* semantic states: fg (text/icon), bg (fill), line (border/rail) */ --success-fg: #17693f; --success-bg: #e6f3eb; --success-line: #7cc39b; --warning-fg: #8a5300; --warning-bg: #fbf0dc; --warning-line: #e0b060; --danger-fg: #b3261e; --danger-bg: #fbe9e7; --danger-line: #e89a93; --info-fg: #2446b8; --info-bg: #eaeefb; --info-line: #9fb1ea; --unknown-fg: #5b3fc4; --unknown-bg: #efebfc; --unknown-line: #a894ef; --pending-fg: #8a5300; --pending-bg: #fbf0dc; --pending-line: #e0b060; --blocked-fg: #3c414b; --blocked-bg: #eceee9; --blocked-line: #9aa0a8; --recover-fg: #0d6b73; --recover-bg: #e3f3f3; --recover-line: #7cc4c8; --neutral-fg: #4a4f59; --neutral-bg: #eef0ec; --neutral-line: #c6c9c2; } /* ---- dark theme (designed, not inverted) ------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1013; --bg-raised: #121418; --surface: #15181c; --surface-2: #1b1f24; --surface-3: #232830; --border: #252a31; --border-strong: #333a43; --text: #e8eaee; --text-2: #b3b9c3; --text-3: #8b929d; --text-inverse: #0e1013; --focus: #8aa4ff; --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 28px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .4); --shadow-3: 0 18px 60px rgba(0, 0, 0, .6); --scrim: rgba(0, 0, 0, .55); --accent: #7f9cff; --accent-hover: #9cb3ff; --accent-weak: #1a2240; --accent-text: #9cb3ff; --success-fg: #62c793; --success-bg: #11241a; --success-line: #2f7a52; --warning-fg: #f0b35a; --warning-bg: #2a2111; --warning-line: #8a6420; --danger-fg: #ff8c82; --danger-bg: #2c1614; --danger-line: #8e3a33; --info-fg: #9cb3ff; --info-bg: #182041; --info-line: #3e519a; --unknown-fg: #b8a6ff; --unknown-bg: #211a3d; --unknown-line: #6a54c9; --pending-fg: #f0b35a; --pending-bg: #2a2111; --pending-line: #8a6420; --blocked-fg: #c2c8d1; --blocked-bg: #1e2228; --blocked-line: #5c636d; --recover-fg: #64cdd3; --recover-bg: #102629; --recover-line: #2b7a80; --neutral-fg: #b3b9c3; --neutral-bg: #1c2026; --neutral-line: #3b424c; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; --bg: #0e1013; --bg-raised: #121418; --surface: #15181c; --surface-2: #1b1f24; --surface-3: #232830; --border: #252a31; --border-strong: #333a43; --text: #e8eaee; --text-2: #b3b9c3; --text-3: #8b929d; --text-inverse: #0e1013; --focus: #8aa4ff; --shadow-1: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 8px 28px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4); --shadow-3: 0 18px 60px rgba(0,0,0,.6); --scrim: rgba(0,0,0,.55); --accent: #7f9cff; --accent-hover: #9cb3ff; --accent-weak: #1a2240; --accent-text: #9cb3ff; --success-fg: #62c793; --success-bg: #11241a; --success-line: #2f7a52; --warning-fg: #f0b35a; --warning-bg: #2a2111; --warning-line: #8a6420; --danger-fg: #ff8c82; --danger-bg: #2c1614; --danger-line: #8e3a33; --info-fg: #9cb3ff; --info-bg: #182041; --info-line: #3e519a; --unknown-fg: #b8a6ff; --unknown-bg: #211a3d; --unknown-line: #6a54c9; --pending-fg: #f0b35a; --pending-bg: #2a2111; --pending-line: #8a6420; --blocked-fg: #c2c8d1; --blocked-bg: #1e2228; --blocked-line: #5c636d; --recover-fg: #64cdd3; --recover-bg: #102629; --recover-line: #2b7a80; --neutral-fg: #b3b9c3; --neutral-bg: #1c2026; --neutral-line: #3b424c; } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }