/* Rangka tokens, compiled from the design system's tokens.json */
:root { --app: #ffffff; --surface: #ffffff; --soft: #f7f5f3; --ink: #1c1917; --ink-2: #44403c; --muted: #6b625c; --faint: #a39890; --line: #eeeae7; --line-strong: #dedad6; --border: #8c827b; --hover: rgba(28, 25, 23, .05); --neutral: rgba(28, 25, 23, .06); --neutral-hover: rgba(28, 25, 23, .13); --selected: #f6ede6; --selected-ink: #a33b23; --primary: #1c1917; --primary-ink: #ffffff; --primary-hover: #3a3330; --focus: #e0623f; --link: #a33b23; --ok: #216e4e; --ok-tint: #dcfff1; --ok-line: #baf3db; --ok-solid: #1f845a; --warn: #a54800; --warn-tint: #fff7d6; --warn-line: #f8e6a0; --warn-solid: #e2b203; --on-warn: #1c1917; --bad: #ae2e24; --bad-tint: #ffeceb; --bad-line: #ffd5d2; --bad-solid: #c9372c; --on-bad: #ffffff; --info: #0055cc; --info-tint: #e9f2ff; --info-line: #cce0ff; --discovery: #5e4db2; --discovery-tint: #f3f0ff; --disabled-bg: rgba(28, 25, 23, .03); --chart-1: #b4432a; --chart-2: #2898bd; --chart-3: #5e4db2; --chart-4: #b38600; --chart-5: #6a9a23; --chart-6: #1d7afc; --brand: #b4432a; --brand-deep: #1c1917; --brand-soft: #f6ede6; --raka: #0d9488; --raka-deep: #0f766e; --raka-soft: #99f6e4; --spark: #f59e0b; --helmet: var(--spark); --field-base: #f3efec; --field-indigo: #e0e7ff; --field-sky: #e0f2fe; --field-sage: #ecfccb; --field-amber: #fef3c7; --field-rose: #fce7f3; --scrim: rgba(28, 25, 23, .54); --knob: #ffffff; --viewer: #0c0a09; --mascot-ink: #1c1917; --shadow-inset: 0 1px 0 rgba(28, 25, 23, .08); --shadow-seg: 0 1px 1px rgba(28, 25, 23, .25), 0 0 1px rgba(28, 25, 23, .31); --shadow-float: 0 1px 1px rgba(28, 25, 23, .25), 0 0 1px rgba(28, 25, 23, .31); --focus-ring: 0 0 0 2px #e0623f; --shadow-pop: 0 8px 12px rgba(28, 25, 23, .15), 0 0 1px rgba(28, 25, 23, .31); --shadow-overlay: 0 8px 12px rgba(28, 25, 23, .15), 0 0 1px rgba(28, 25, 23, .31); --shadow-toast: 0 8px 12px rgba(28, 25, 23, .15), 0 0 1px rgba(28, 25, 23, .31); --focus-soft: inset 0 0 0 1px #e0623f; --space-1: 4px; --space-1\.5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-12: 48px; --r-xs: 2px; --r-sm: 3px; --r-btn: 3px; --r: 3px; --r-md: 4px; --r-lg: 6px; --r-dialog: 8px; --r-pill: 999px; --control-sm: 24px; --control: 32px; --field: 36px; --control-lg: 40px; --pos-key: 64px; --topbar: 56px; --sidebar: 240px; --page-max: 1440px; --dialog-w: 440px; --drawer-w: 560px; --command-w: 640px; --menu-w: 240px; --toast-w: 400px; --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif; --font-display: "Bricolage Grotesque", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --app: #1a1715; --surface: #221e1b; --soft: #13110f; --ink: #ede8e4; --ink-2: #cfc7c1; --muted: #a79d96; --faint: #7a706a; --line: #2a2522; --line-strong: #36312d; --border: #7a706a; --hover: rgba(237, 232, 228, .07); --neutral: rgba(237, 232, 228, .08); --neutral-hover: rgba(237, 232, 228, .15); --selected: #3a2219; --selected-ink: #f08a6b; --primary: #ede8e4; --primary-ink: #1a1715; --primary-hover: #ffffff; --focus: #f08a6b; --link: #f08a6b; --ok: #7ee2b8; --ok-tint: #164b35; --ok-line: #216e4e; --ok-solid: #4bce97; --warn: #f5cd47; --warn-tint: #533f04; --warn-line: #7f5f01; --warn-solid: #f5cd47; --on-warn: #1a1715; --bad: #fd9891; --bad-tint: #5d1f1a; --bad-line: #ae2e24; --bad-solid: #f87168; --on-bad: #1a1715; --info: #85b8ff; --info-tint: #09326c; --info-line: #0055cc; --discovery: #b8acf6; --discovery-tint: #352c63; --disabled-bg: rgba(237, 232, 228, .04); --chart-1: #e0623f; --chart-2: #6cc3e0; --chart-3: #9f8fef; --chart-4: #e2b203; --chart-5: #94c748; --chart-6: #579dff; --brand: #e0623f; --brand-deep: #f3efec; --brand-soft: #2a1d18; --raka: #2dd4bf; --raka-deep: #5eead4; --raka-soft: #115e59; --spark: #f59e0b; --field-base: #2a2522; --field-indigo: #312e81; --field-sky: #0c4a6e; --field-sage: #365314; --field-amber: #78350f; --field-rose: #831843; --scrim: rgba(10, 9, 8, .6); --knob: #1a1715; --viewer: #0c0a09; --mascot-ink: #1c1917; --shadow-float: 0 1px 1px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, .5); --focus-ring: 0 0 0 2px #f08a6b; --shadow-pop: 0 0 0 1px #3a3430, 0 8px 12px rgba(0, 0, 0, .36), 0 0 1px rgba(0, 0, 0, .5); --shadow-overlay: 0 0 0 1px #3a3430, 0 8px 12px rgba(0, 0, 0, .36), 0 0 1px rgba(0, 0, 0, .5); --shadow-toast: 0 0 0 1px #3a3430, 0 8px 12px rgba(0, 0, 0, .36), 0 0 1px rgba(0, 0, 0, .5); --focus-soft: inset 0 0 0 1px #f08a6b; color-scheme: dark; } }
:root[data-theme="dark"] { --app: #1a1715; --surface: #221e1b; --soft: #13110f; --ink: #ede8e4; --ink-2: #cfc7c1; --muted: #a79d96; --faint: #7a706a; --line: #2a2522; --line-strong: #36312d; --border: #7a706a; --hover: rgba(237, 232, 228, .07); --neutral: rgba(237, 232, 228, .08); --neutral-hover: rgba(237, 232, 228, .15); --selected: #3a2219; --selected-ink: #f08a6b; --primary: #ede8e4; --primary-ink: #1a1715; --primary-hover: #ffffff; --focus: #f08a6b; --link: #f08a6b; --ok: #7ee2b8; --ok-tint: #164b35; --ok-line: #216e4e; --ok-solid: #4bce97; --warn: #f5cd47; --warn-tint: #533f04; --warn-line: #7f5f01; --warn-solid: #f5cd47; --on-warn: #1a1715; --bad: #fd9891; --bad-tint: #5d1f1a; --bad-line: #ae2e24; --bad-solid: #f87168; --on-bad: #1a1715; --info: #85b8ff; --info-tint: #09326c; --info-line: #0055cc; --discovery: #b8acf6; --discovery-tint: #352c63; --disabled-bg: rgba(237, 232, 228, .04); --chart-1: #e0623f; --chart-2: #6cc3e0; --chart-3: #9f8fef; --chart-4: #e2b203; --chart-5: #94c748; --chart-6: #579dff; --brand: #e0623f; --brand-deep: #f3efec; --brand-soft: #2a1d18; --raka: #2dd4bf; --raka-deep: #5eead4; --raka-soft: #115e59; --spark: #f59e0b; --field-base: #2a2522; --field-indigo: #312e81; --field-sky: #0c4a6e; --field-sage: #365314; --field-amber: #78350f; --field-rose: #831843; --scrim: rgba(10, 9, 8, .6); --knob: #1a1715; --viewer: #0c0a09; --mascot-ink: #1c1917; --shadow-float: 0 1px 1px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, .5); --focus-ring: 0 0 0 2px #f08a6b; --shadow-pop: 0 0 0 1px #3a3430, 0 8px 12px rgba(0, 0, 0, .36), 0 0 1px rgba(0, 0, 0, .5); --shadow-overlay: 0 0 0 1px #3a3430, 0 8px 12px rgba(0, 0, 0, .36), 0 0 1px rgba(0, 0, 0, .5); --shadow-toast: 0 0 0 1px #3a3430, 0 8px 12px rgba(0, 0, 0, .36), 0 0 1px rgba(0, 0, 0, .5); --focus-soft: inset 0 0 0 1px #f08a6b; color-scheme: dark; }