/* ============================================================ GENERATED FILE - do not edit by hand. Source of truth: tokens/tokens.json Regenerate with: bun run tools/build.ts ============================================================ */ /* ============================================================ 0x - design tokens Cyan primary, fuchsia secondary, on a cool near-black. Dark is the DEFAULT theme. Light follows the OS via prefers-color-scheme, and either can be forced with data-theme="light|dark" on (assets/theme.js writes it). Every color token is defined in both modes, so anything built on these tokens themes for free. ============================================================ */ :root { color-scheme: dark; --bg: #0E1516; /* cool near-black - page ground */ --surface: #141E1F; /* cards, raised panels */ --surface-strong: #1F2C2D; /* inputs, wells, lifted surfaces */ --text: #EBEFEF; /* 15.9:1 on --bg (AAA) */ --text-muted: #B9C5C6; /* 10.4:1 on --bg (AAA) */ --text-faint: #91A0A1; /* 6.8:1 on --bg (AA) */ --shine: #3FD3E0; /* 10.2:1 on --bg (AAA) */ --shine-strong: #1EADBA; /* 6.8:1 on --bg (AA) */ --shine-bright: #7CE1EA; /* 12.1:1 on --bg (AAA) */ --on-shine: #0E1516; /* 10.2:1 on --shine (AAA) */ --shine-2: #E85CC7; /* 6.0:1 on --bg (AA) */ --shine-2-strong: #DD1FB1; /* 4.3:1 on --bg (AA large text only) */ --shine-2-bright: #F19BDC; /* 9.2:1 on --bg (AAA) */ --on-shine-2: #0E1516; /* 6.0:1 on --shine-2 (AA) */ --hairline: rgba(235, 239, 239, 0.12); /* borders, rules - hairline only */ --header-bg: rgba(14, 21, 22, 0.92); /* sticky header with backdrop blur */ --danger: #E08A7A; /* 7.1:1 on --bg (AAA) */ --warning: #C99A3C; /* 7.2:1 on --bg (AAA) */ --success: #87A572; /* 6.7:1 on --bg (AA) */ --info: var(--shine); /* informational - reuses the primary accent by design */ --code-keyword: var(--shine); /* syntax: keywords */ --code-string: var(--shine-2); /* 6.0:1 on --bg (AA) */ --code-number: #A2B7B9; /* 8.8:1 on --bg (AAA) */ --code-function: var(--text-muted); /* 10.4:1 on --bg (AAA) */ --code-comment: var(--text-faint); /* syntax: comments */ --chart-1: #3FD3E0; /* categorical charts - cyan (primary) */ --chart-2: #E85CC7; /* categorical charts - fuchsia (secondary) */ --chart-3: #A769D3; /* categorical charts - violet */ --chart-4: #D39569; /* categorical charts - amber */ --chart-5: #72CA97; /* categorical charts - green */ /* Type */ --font-display: "Righteous", "IBM Plex Mono", monospace; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --measure: 68ch; /* Spacing scale - 4px base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; /* Type scale */ --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2.25rem; --text-3xl: clamp(2.75rem, 6vw, 4.5rem); /* Layout - full width is the default; text keeps its measure */ --pad: clamp(24px, 6vw, 96px); --page-max: 1600px; /* Radius - a single subtle step */ --radius: 2px; } :root[data-theme="light"] { color-scheme: light; --bg: #F2F7F8; /* cool off-white - page ground */ --surface: #FCFDFD; /* cards, raised panels */ --surface-strong: #E3ECEE; /* inputs, wells, lifted surfaces */ --text: #182425; /* 14.7:1 on --bg (AAA) */ --text-muted: #3A4E50; /* 8.1:1 on --bg (AAA) */ --text-faint: #587174; /* 4.8:1 on --bg (AA) */ --shine: #0A7480; /* 5.1:1 on --bg (AA) */ --shine-strong: #05383E; /* 11.8:1 on --bg (AAA) */ --shine-bright: #0FB0C2; /* 2.4:1 on --bg (below AA - decorative use only) */ --on-shine: #F2F7F8; /* 5.1:1 on --shine (AA) */ --shine-2: #96218A; /* 6.7:1 on --bg (AA) */ --shine-2-strong: #5B1454; /* 11.6:1 on --bg (AAA) */ --shine-2-bright: #D12EC0; /* 4.0:1 on --bg (AA large text only) */ --on-shine-2: #F2F7F8; /* 6.7:1 on --shine-2 (AA) */ --hairline: rgba(24, 36, 37, 0.12); /* borders, rules - hairline only */ --header-bg: rgba(242, 247, 248, 0.92); /* sticky header with backdrop blur */ --danger: #84241E; /* 8.6:1 on --bg (AAA) */ --warning: #8A5A00; /* 5.5:1 on --bg (AA) */ --success: #3F6B33; /* 5.8:1 on --bg (AA) */ --info: var(--shine); /* informational - reuses the primary accent by design */ --code-keyword: var(--shine); /* syntax: keywords */ --code-string: var(--shine-2); /* 6.7:1 on --bg (AA) */ --code-number: #496669; /* 5.7:1 on --bg (AA) */ --code-function: var(--text-muted); /* 8.1:1 on --bg (AAA) */ --code-comment: var(--text-faint); /* syntax: comments */ --chart-1: #0A7480; /* categorical charts - cyan (primary) */ --chart-2: #96218A; /* categorical charts - fuchsia (secondary) */ --chart-3: #6C2C96; /* categorical charts - violet */ --chart-4: #965A2C; /* categorical charts - amber */ --chart-5: #358D5B; /* categorical charts - green */ } @media (prefers-color-scheme: light) { /* :not([data-theme="dark"]) lets a forced-dark override win. */ :root:not([data-theme="dark"]) { color-scheme: light; --bg: #F2F7F8; /* cool off-white - page ground */ --surface: #FCFDFD; /* cards, raised panels */ --surface-strong: #E3ECEE; /* inputs, wells, lifted surfaces */ --text: #182425; /* 14.7:1 on --bg (AAA) */ --text-muted: #3A4E50; /* 8.1:1 on --bg (AAA) */ --text-faint: #587174; /* 4.8:1 on --bg (AA) */ --shine: #0A7480; /* 5.1:1 on --bg (AA) */ --shine-strong: #05383E; /* 11.8:1 on --bg (AAA) */ --shine-bright: #0FB0C2; /* 2.4:1 on --bg (below AA - decorative use only) */ --on-shine: #F2F7F8; /* 5.1:1 on --shine (AA) */ --shine-2: #96218A; /* 6.7:1 on --bg (AA) */ --shine-2-strong: #5B1454; /* 11.6:1 on --bg (AAA) */ --shine-2-bright: #D12EC0; /* 4.0:1 on --bg (AA large text only) */ --on-shine-2: #F2F7F8; /* 6.7:1 on --shine-2 (AA) */ --hairline: rgba(24, 36, 37, 0.12); /* borders, rules - hairline only */ --header-bg: rgba(242, 247, 248, 0.92); /* sticky header with backdrop blur */ --danger: #84241E; /* 8.6:1 on --bg (AAA) */ --warning: #8A5A00; /* 5.5:1 on --bg (AA) */ --success: #3F6B33; /* 5.8:1 on --bg (AA) */ --info: var(--shine); /* informational - reuses the primary accent by design */ --code-keyword: var(--shine); /* syntax: keywords */ --code-string: var(--shine-2); /* 6.7:1 on --bg (AA) */ --code-number: #496669; /* 5.7:1 on --bg (AA) */ --code-function: var(--text-muted); /* 8.1:1 on --bg (AAA) */ --code-comment: var(--text-faint); /* syntax: comments */ --chart-1: #0A7480; /* categorical charts - cyan (primary) */ --chart-2: #96218A; /* categorical charts - fuchsia (secondary) */ --chart-3: #6C2C96; /* categorical charts - violet */ --chart-4: #965A2C; /* categorical charts - amber */ --chart-5: #358D5B; /* categorical charts - green */ } }