/* Fountain design tokens * Light mode: :root defines default values. * Dark mode: [data-theme="dark"] on overrides all tokens. */ :root { --color-brand: #6366f1; --color-brand-hover: #4f46e5; --color-brand-text: #ffffff; --color-bg-0: #f9fafb; --color-bg-1: #ffffff; --color-bg-2: #f3f4f6; --color-bg-3: #e5e7eb; --color-border: #e5e7eb; --color-border-strong: #d1d5db; --color-text-primary: #111827; --color-text-secondary: #6b7280; --color-text-muted: #9ca3af; --color-success: #16a34a; --color-success-bg: #f0fdf4; --color-success-text: #15803d; --color-warning: #d97706; --color-warning-bg: #fffbeb; --color-warning-text: #b45309; --color-error: #dc2626; --color-error-bg: #fef2f2; --color-error-text: #b91c1c; --color-info: #2563eb; --color-info-bg: #eff6ff; --color-info-text: #1d4ed8; --color-code-bg: #09090b; --color-code-text: #e4e4e7; --status-pending-bg: #f3f4f6; --status-pending-text: #6b7280; --status-starting-bg: #eff6ff; --status-starting-text: #2563eb; --status-ready-bg: #f0fdf4; --status-ready-text: #15803d; --status-terminated-bg: #f3f4f6; --status-terminated-text: #6b7280; --status-failed-bg: #fef2f2; --status-failed-text: #b91c1c; --color-focus-ring: #6366f1; } [data-theme="dark"] { --color-brand: #818cf8; --color-brand-hover: #6366f1; --color-bg-0: #09090b; --color-bg-1: #18181b; --color-bg-2: #27272a; --color-bg-3: #3f3f46; --color-border: #27272a; --color-border-strong: #3f3f46; --color-text-primary: #fafafa; --color-text-secondary: #a1a1aa; --color-text-muted: #52525b; --color-success: #4ade80; --color-success-bg: #052e16; --color-success-text: #86efac; --color-warning: #fbbf24; --color-warning-bg: #1c1200; --color-warning-text: #fde68a; --color-error: #f87171; --color-error-bg: #2d0a0a; --color-error-text: #fca5a5; --color-info: #60a5fa; --color-info-bg: #0f1e3d; --color-info-text: #93c5fd; --color-code-bg: #000000; --color-code-text: #e4e4e7; --status-pending-bg: #27272a; --status-pending-text: #a1a1aa; --status-starting-bg: #0f1e3d; --status-starting-text: #93c5fd; --status-ready-bg: #052e16; --status-ready-text: #86efac; --status-terminated-bg: #27272a; --status-terminated-text: #71717a; --status-failed-bg: #2d0a0a; --status-failed-text: #fca5a5; --color-focus-ring: #818cf8; } *:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }