| 1 | /* |
| 2 | * Design tokens — Nothing design system. |
| 3 | * |
| 4 | * Every color is written once as light-dark(LIGHT, DARK). The active side is |
| 5 | * picked by `color-scheme`: the OS preference by default, or forced by the |
| 6 | * [data-theme] attribute set from the server config / theme toggle. |
| 7 | */ |
| 8 | |
| 9 | :root { |
| 10 | color-scheme: light dark; |
| 11 | } |
| 12 | :root[data-theme="light"] { |
| 13 | color-scheme: light; |
| 14 | } |
| 15 | :root[data-theme="dark"] { |
| 16 | color-scheme: dark; |
| 17 | } |
| 18 | |
| 19 | :root { |
| 20 | /* Surfaces: OLED black / printed-manual off-white. */ |
| 21 | --black: light-dark(#F5F5F5, #000000); |
| 22 | --surface: light-dark(#FFFFFF, #111111); |
| 23 | --surface-raised: light-dark(#F0F0F0, #1A1A1A); |
| 24 | --border: light-dark(#E8E8E8, #222222); |
| 25 | --border-visible: light-dark(#CCCCCC, #333333); |
| 26 | |
| 27 | /* Text: the gray scale is the hierarchy. */ |
| 28 | --text-disabled: light-dark(#999999, #666666); |
| 29 | --text-secondary: light-dark(#666666, #999999); |
| 30 | --text-primary: light-dark(#1A1A1A, #E8E8E8); |
| 31 | --text-display: light-dark(#000000, #FFFFFF); |
| 32 | |
| 33 | /* Accent & status — identical in both modes. */ |
| 34 | --accent: #D71921; |
| 35 | --accent-subtle: rgba(215, 25, 33, 0.15); |
| 36 | --success: #4A9E5C; |
| 37 | --warning: #D4A843; |
| 38 | --error: #D71921; |
| 39 | --info: var(--text-secondary); |
| 40 | --interactive: light-dark(#007AFF, #5B9BF6); |
| 41 | |
| 42 | /* Empty segment in segmented bars. */ |
| 43 | --segment-empty: light-dark(#E0E0E0, #222222); |
| 44 | |
| 45 | /* Type families. --font-code may be overridden via ui.code_font. */ |
| 46 | --font-display: "Doto", "Space Mono", monospace; |
| 47 | --font-body: "Space Grotesk", "DM Sans", system-ui, sans-serif; |
| 48 | --font-mono: "Space Mono", "JetBrains Mono", "SF Mono", monospace; |
| 49 | --font-code: var(--font-mono); |
| 50 | |
| 51 | /* Type scale. */ |
| 52 | --display-xl: 72px; |
| 53 | --display-lg: 48px; |
| 54 | --display-md: 36px; |
| 55 | --heading: 24px; |
| 56 | --subheading: 18px; |
| 57 | --body: 16px; |
| 58 | --body-sm: 14px; |
| 59 | --caption: 12px; |
| 60 | --label: 11px; |
| 61 | |
| 62 | /* Spacing (8px base). */ |
| 63 | --space-2xs: 2px; |
| 64 | --space-xs: 4px; |
| 65 | --space-sm: 8px; |
| 66 | --space-md: 16px; |
| 67 | --space-lg: 24px; |
| 68 | --space-xl: 32px; |
| 69 | --space-2xl: 48px; |
| 70 | --space-3xl: 64px; |
| 71 | --space-4xl: 96px; |
| 72 | |
| 73 | /* Layout. */ |
| 74 | --gutter: var(--space-md); |
| 75 | --page-max: 1200px; |
| 76 | --rail: 280px; |
| 77 | |
| 78 | /* Motion: subtle ease-out only. */ |
| 79 | --ease: cubic-bezier(0.25, 0.1, 0.25, 1); |
| 80 | --dur-micro: 150ms; |
| 81 | --dur: 300ms; |
| 82 | } |
| 83 | |
| 84 | @media (min-width: 768px) { |
| 85 | :root { |
| 86 | --gutter: var(--space-xl); |
| 87 | } |
| 88 | } |
| 89 | |
| 90 | @media (min-width: 1200px) { |
| 91 | :root { |
| 92 | --gutter: var(--space-2xl); |
| 93 | } |
| 94 | } |