/* Auto-generated by scripts/build_tokens.py. Do not edit by hand. Source: design-tokens/*.json Default: Dark. Override via `[data-theme="light"]` on . */ :root { color-scheme: dark; /* ── Primitives ── */ --blur-12: 12px; --blur-16: 16px; --blur-24: 24px; --blur-32: 32px; --blur-40: 40px; --blur-56: 56px; --blur-64: 64px; --blur-8: 8px; --border-w-0: 0px; --border-w-1: 1px; --border-w-2: 2px; --border-w-4: 4px; --border-w-8: 8px; --color-alpha-black-100: #000000f5; --color-alpha-black-10: #0000000a; --color-alpha-black-20: #00000014; --color-alpha-black-30: #0000001f; --color-alpha-black-40: #00000029; --color-alpha-black-50: #0000003d; --color-alpha-black-60: #00000052; --color-alpha-black-70: #0000007a; --color-alpha-black-80: #000000a3; --color-alpha-black-90: #000000cc; --color-alpha-gray-100: #f6f6f6f5; --color-alpha-gray-10: #f6f6f60a; --color-alpha-gray-20: #f6f6f614; --color-alpha-gray-30: #f6f6f61f; --color-alpha-gray-40: #f6f6f629; --color-alpha-gray-50: #f6f6f63d; --color-alpha-gray-60: #f6f6f652; --color-alpha-gray-70: #f6f6f67a; --color-alpha-gray-80: #f6f6f6a3; --color-alpha-gray-90: #f6f6f6cc; --color-alpha-white-100: #fffffff5; --color-alpha-white-10: #ffffff0a; --color-alpha-white-20: #ffffff14; --color-alpha-white-30: #ffffff1f; --color-alpha-white-40: #ffffff29; --color-alpha-white-50: #ffffff3d; --color-alpha-white-60: #ffffff52; --color-alpha-white-70: #ffffff7a; --color-alpha-white-80: #ffffffa3; --color-alpha-white-90: #ffffffcc; --color-amber-100: #fef3c7; --color-amber-200: #fde68a; --color-amber-300: #fcd34d; --color-amber-400: #fbbf24; --color-amber-500: #f59e0b; --color-amber-50: #fffbeb; --color-amber-600: #d97706; --color-amber-700: #b45309; --color-amber-800: #92400e; --color-amber-900: #78350f; --color-amber-950: #451a03; --color-base-black: #000000; --color-base-overlay: #00000066; --color-base-white: #ffffff; --color-black-100: #e7e7e7; --color-black-200: #d1d1d1; --color-black-300: #b0b0b0; --color-black-400: #888888; --color-black-500: #6d6d6d; --color-black-50: #f6f6f6; --color-black-600: #5d5d5d; --color-black-700: #4f4f4f; --color-black-800: #454545; --color-black-900: #3d3d3d; --color-black-950: #212121; --color-blue-100: #dbeafe; --color-blue-200: #bfdbfe; --color-blue-300: #93c5fd; --color-blue-400: #60a5fa; --color-blue-500: #3b82f6; --color-blue-50: #eff6ff; --color-blue-600: #2563eb; --color-blue-700: #1d4ed8; --color-blue-800: #1e40af; --color-blue-900: #1e3a8a; --color-blue-950: #172554; --color-cyan-100: #cffafe; --color-cyan-200: #a5f3fc; --color-cyan-300: #67e8f9; --color-cyan-400: #22d3ee; --color-cyan-500: #06b6d4; --color-cyan-50: #ecfeff; --color-cyan-600: #0891b2; --color-cyan-700: #0e7490; --color-cyan-800: #155e75; --color-cyan-900: #164e63; --color-cyan-950: #083344; --color-emerald-100: #d1fae5; --color-emerald-200: #a7f3d0; --color-emerald-300: #6ee7b7; --color-emerald-400: #34d399; --color-emerald-500: #10b981; --color-emerald-50: #ecfdf5; --color-emerald-600: #059669; --color-emerald-700: #047857; --color-emerald-800: #065f46; --color-emerald-900: #064e3b; --color-emerald-950: #022c22; --color-fuchsia-100: #fae8ff; --color-fuchsia-200: #f5d0fe; --color-fuchsia-300: #f0abfc; --color-fuchsia-400: #e879f9; --color-fuchsia-500: #d946ef; --color-fuchsia-50: #fdf4ff; --color-fuchsia-600: #c026d3; --color-fuchsia-700: #a21caf; --color-fuchsia-800: #86198f; --color-fuchsia-900: #701a75; --color-fuchsia-950: #4a044e; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-50: #f9fafb; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; --color-gray-950: #030712; --color-green-100: #dcfce7; --color-green-200: #bbf7d0; --color-green-300: #86efac; --color-green-400: #4ade80; --color-green-500: #22c55e; --color-green-50: #f0fdf4; --color-green-600: #16a34a; --color-green-700: #15803d; --color-green-800: #166534; --color-green-900: #14532d; --color-green-950: #052e16; --color-indigo-100: #e0e7ff; --color-indigo-200: #c7d2fe; --color-indigo-300: #a5b4fc; --color-indigo-400: #818cf8; --color-indigo-500: #6366f1; --color-indigo-50: #eef2ff; --color-indigo-600: #4f46e5; --color-indigo-700: #4338ca; --color-indigo-800: #3730a3; --color-indigo-900: #312e81; --color-indigo-950: #1e1b4b; --color-lime-100: #ecfccb; --color-lime-200: #d9f99d; --color-lime-300: #bef264; --color-lime-400: #a3e635; --color-lime-500: #84cc16; --color-lime-50: #f7fee7; --color-lime-600: #65a30d; --color-lime-700: #4d7c0f; --color-lime-800: #3f6212; --color-lime-900: #365314; --color-lime-950: #1a2e05; --color-neutral-100: #f5f5f5; --color-neutral-200: #e5e5e5; --color-neutral-300: #d4d4d4; --color-neutral-400: #a3a3a3; --color-neutral-500: #737373; --color-neutral-50: #fafafa; --color-neutral-600: #525252; --color-neutral-700: #404040; --color-neutral-800: #262626; --color-neutral-900: #171717; --color-neutral-950: #0a0a0a; --color-orange-100: #ffedd5; --color-orange-200: #fed7aa; --color-orange-300: #fdba74; --color-orange-400: #fb923c; --color-orange-500: #f97316; --color-orange-50: #fff7ed; --color-orange-600: #ea580c; --color-orange-700: #c2410c; --color-orange-800: #9a3412; --color-orange-900: #7c2d12; --color-orange-950: #431407; --color-pink-100: #fce7f3; --color-pink-200: #fbcfe8; --color-pink-300: #f9a8d4; --color-pink-400: #f472b6; --color-pink-500: #ec4899; --color-pink-50: #fdf2f8; --color-pink-600: #db2777; --color-pink-700: #be185d; --color-pink-800: #9d174d; --color-pink-900: #831843; --color-pink-950: #500724; --color-purple-100: #f3e8ff; --color-purple-200: #e9d5ff; --color-purple-300: #d8b4fe; --color-purple-400: #c084fc; --color-purple-500: #a855f7; --color-purple-50: #faf5ff; --color-purple-600: #9333ea; --color-purple-700: #7e22ce; --color-purple-800: #6b21a8; --color-purple-900: #581c87; --color-purple-950: #3b0764; --color-red-100: #fee2e2; --color-red-200: #fecaca; --color-red-300: #fca5a5; --color-red-400: #f87171; --color-red-500: #ef4444; --color-red-50: #fef2f2; --color-red-600: #dc2626; --color-red-700: #b91c1c; --color-red-800: #991b1b; --color-red-900: #7f1d1d; --color-red-950: #450a0a; --color-rose-100: #ffe4e6; --color-rose-200: #fecdd3; --color-rose-300: #fda4af; --color-rose-400: #fb7185; --color-rose-500: #f43f5e; --color-rose-50: #fff1f2; --color-rose-600: #e11d48; --color-rose-700: #be123c; --color-rose-800: #9f1239; --color-rose-900: #881337; --color-rose-950: #4c0519; --color-sky-100: #e0f2fe; --color-sky-200: #bae6fd; --color-sky-300: #7dd3fc; --color-sky-400: #38bdf8; --color-sky-500: #0ea5e9; --color-sky-50: #f0f9ff; --color-sky-600: #0284c7; --color-sky-700: #0369a1; --color-sky-800: #075985; --color-sky-900: #0c4a6e; --color-sky-950: #082f49; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-50: #f8fafc; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; --color-slate-950: #020617; --color-spaceblue-100: #d9e7ff; --color-spaceblue-200: #cfe1ff; --color-spaceblue-300: #8dbbff; --color-spaceblue-400: #5895ff; --color-spaceblue-500: #316eff; --color-spaceblue-50: #eef4ff; --color-spaceblue-600: #2050f6; --color-spaceblue-700: #1337e2; --color-spaceblue-800: #162eb7; --color-spaceblue-900: #182c90; --color-spaceblue-950: #141d57; --color-stone-100: #f5f5f4; --color-stone-200: #e7e5e4; --color-stone-300: #d6d3d1; --color-stone-400: #a8a29e; --color-stone-500: #78716c; --color-stone-50: #fafaf9; --color-stone-600: #57534e; --color-stone-700: #44403c; --color-stone-800: #292524; --color-stone-900: #1c1917; --color-stone-950: #0c0a09; --color-teal-100: #ccfbf1; --color-teal-200: #99f6e4; --color-teal-300: #5eead4; --color-teal-400: #2dd4bf; --color-teal-500: #14b8a6; --color-teal-50: #f0fdfa; --color-teal-600: #0d9488; --color-teal-700: #0f766e; --color-teal-800: #115e59; --color-teal-900: #134e4a; --color-teal-950: #042f2e; --color-violet-100: #ede9fe; --color-violet-200: #ddd6fe; --color-violet-300: #c4b5fd; --color-violet-400: #a78bfa; --color-violet-500: #8b5cf6; --color-violet-50: #f5f3ff; --color-violet-600: #7c3aed; --color-violet-700: #6d28d9; --color-violet-800: #5b21b6; --color-violet-900: #4c1d95; --color-violet-950: #2e1065; --color-yellow-100: #fef9c3; --color-yellow-200: #fef08a; --color-yellow-300: #fde047; --color-yellow-400: #facc15; --color-yellow-500: #eab308; --color-yellow-50: #fefce8; --color-yellow-600: #ca8a04; --color-yellow-700: #a16207; --color-yellow-800: #854d0e; --color-yellow-900: #713f12; --color-yellow-950: #422006; --color-zinc-100: #f4f4f5; --color-zinc-200: #e4e4e7; --color-zinc-300: #d4d4d8; --color-zinc-400: #a1a1aa; --color-zinc-500: #71717a; --color-zinc-50: #fafafa; --color-zinc-600: #52525b; --color-zinc-700: #3f3f46; --color-zinc-800: #27272a; --color-zinc-900: #18181b; --color-zinc-950: #09090b; --font-family-sans: Inter; --font-size-header-2xl: 36px; --font-size-header-3xl: 48px; --font-size-header-4xl: 60px; --font-size-header-5xl: 72px; --font-size-header-6xl: 96px; --font-size-header-7xl: 128px; --font-size-header-lg: 24px; --font-size-header-md: 20px; --font-size-header-sm: 18px; --font-size-header-xl: 32px; --font-size-text-lg: 16px; --font-size-text-md: 14px; --font-size-text-sm: 12px; --font-size-text-xs: 10px; --font-style-italic: italic; --font-style-not-italic: normal; --font-weight-medium: 500; --font-weight-regular: 400; --font-weight-semibold: 600; --layout-padding-lg: 80px; --layout-padding-md: 40px; --layout-padding-sm: 32px; --layout-padding-xl: 100px; --layout-padding-xs: 16px; --layout-padding-xxl: 112px; --radius-0-5: 2px; --radius-0: 0px; --radius-1-5: 6px; --radius-10: 40px; --radius-12: 48px; --radius-1: 4px; --radius-2-5: 10px; --radius-2: 8px; --radius-3: 12px; --radius-4: 16px; --radius-5: 20px; --radius-6: 24px; --radius-8: 32px; --radius-full: 9999px; --size-0-5: 2px; --size-0: 0px; --size-1-5: 6px; --size-10: 40px; --size-11: 44px; --size-12: 48px; --size-14: 56px; --size-16: 64px; --size-1: 4px; --size-2-5: 10px; --size-20: 80px; --size-24: 96px; --size-28: 112px; --size-2: 8px; --size-3-5: 14px; --size-32: 128px; --size-3: 12px; --size-40: 160px; --size-4: 16px; --size-5: 20px; --size-6: 24px; --size-7: 28px; --size-8: 32px; --size-9: 36px; --space-0-5: 2px; --space-0: 0px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-1: 4px; --space-20: 80px; --space-24: 96px; --space-25: 100px; --space-28: 112px; --space-2: 8px; --space-32: 128px; --space-3: 12px; --space-40: 160px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; /* ── Semantic (dark) ── */ --color-action-destructive-bg-active: var(--color-red-900); --color-action-destructive-bg-hover: var(--color-red-800); --color-action-destructive-bg: var(--color-red-700); --color-action-destructive-fg: var(--color-base-white); --color-action-destructive-ghost-bg-active: var(--color-red-900); --color-action-destructive-ghost-bg-hover: var(--color-red-900); --color-action-destructive-ghost-fg: var(--color-red-400); --color-action-disabled-bg-active: var(--color-neutral-400); --color-action-disabled-bg: var(--color-neutral-500); --color-action-disabled-fg: var(--color-neutral-400); --color-action-disabled-text: var(--color-neutral-500); --color-action-primary-bg-active: var(--color-spaceblue-50); --color-action-primary-bg-hover: var(--color-spaceblue-100); --color-action-primary-bg: var(--color-spaceblue-200); --color-action-primary-fg: var(--color-spaceblue-900); --color-action-secondary-bg-active: var(--color-slate-800); --color-action-secondary-bg-hover: var(--color-slate-700); --color-action-secondary-bg: var(--color-slate-600); --color-action-secondary-fg-active: var(--color-fg-primary); --color-action-secondary-fg: var(--color-fg-primary); --color-bg-card: var(--color-slate-800); --color-bg-disabled: var(--color-slate-950); --color-bg-elevated-alt: var(--color-slate-700); --color-bg-elevated: var(--color-slate-600); --color-bg-error-alt: var(--color-red-950); --color-bg-error: var(--color-red-300); --color-bg-page-scroll: var(--color-alpha-black-80); --color-bg-page: var(--color-slate-900); --color-bg-primary-alt: var(--color-spaceblue-950); --color-bg-primary: var(--color-spaceblue-200); --color-bg-secondary-alt: var(--color-black-200); --color-bg-secondary: var(--color-black-50); --color-bg-success-alt: var(--color-green-950); --color-bg-success: var(--color-green-300); --color-bg-warning-alt: var(--color-orange-950); --color-bg-warning: var(--color-orange-300); --color-border-brand: var(--color-spaceblue-300); --color-border-contrast: var(--color-slate-600); --color-border-default: var(--color-slate-700); --color-border-disabled: var(--color-slate-950); --color-border-elevated-alt: var(--color-slate-900); --color-border-elevated: var(--color-slate-800); --color-border-error: var(--color-red-800); --color-border-focus: var(--color-zinc-300); --color-border-secondary: var(--color-zinc-50); --color-border-success: var(--color-green-800); --color-border-warning: var(--color-orange-800); --color-fg-brand-disabled: var(--color-spaceblue-600); --color-fg-brand-hover: var(--color-spaceblue-300); --color-fg-brand: var(--color-spaceblue-200); --color-fg-contrast: var(--color-base-black); --color-fg-disabled: var(--color-neutral-500); --color-fg-divider: var(--color-zinc-500); --color-fg-error: var(--color-red-400); --color-fg-info: var(--color-spaceblue-400); --color-fg-primary: var(--color-base-white); --color-fg-secondary: var(--color-zinc-300); --color-fg-success: var(--color-green-400); --color-fg-tertiary: var(--color-zinc-400); --color-fg-warning: var(--color-orange-400); --elevation-blur-bg-1: var(--blur-8); --elevation-blur-bg-2: var(--blur-12); --elevation-blur-bg-3: var(--blur-16); --elevation-blur-bg-4: var(--blur-24); --elevation-blur-bg-5: var(--blur-32); --elevation-blur-bg-6: var(--blur-40); --elevation-blur-bg-7: var(--blur-56); --elevation-blur-bg-8: var(--blur-64); --radius-button: var(--radius-full); --radius-card: var(--radius-6); --radius-input: var(--radius-2); --text-base-size-10: var(--font-size-header-3xl); --text-base-size-1: var(--font-size-text-xs); --text-base-size-2: var(--font-size-text-sm); --text-base-size-3: var(--font-size-text-md); --text-base-size-4: var(--font-size-text-lg); --text-base-size-5: var(--font-size-header-sm); --text-base-size-6: var(--font-size-header-md); --text-base-size-7: var(--font-size-header-lg); --text-base-size-8: var(--font-size-header-xl); --text-base-size-9: var(--font-size-header-2xl); /* ── Components (dark) ── */ --alert-error-bg: var(--color-bg-error-alt); --alert-error-fg: var(--color-fg-error); --alert-info-bg: var(--color-bg-primary-alt); --alert-info-fg: var(--color-fg-info); --alert-success-bg: var(--color-bg-success-alt); --alert-success-fg: var(--color-fg-success); --alert-warning-bg: var(--color-bg-warning-alt); --alert-warning-fg: var(--color-fg-warning); --button-destructive-bg-active: var(--color-action-destructive-bg-active); --button-destructive-bg-default: var(--color-action-destructive-bg); --button-destructive-bg-hover: var(--color-action-destructive-bg-hover); --button-destructive-fg: var(--color-action-destructive-fg); --button-destructive-ghost-bg-active: var(--color-action-destructive-ghost-bg-active); --button-destructive-ghost-bg-hover: var(--color-action-destructive-ghost-bg-hover); --button-destructive-ghost-fg: var(--color-action-destructive-ghost-fg); --button-disabled-bg-default: var(--color-action-disabled-bg); --button-disabled-fg: var(--color-action-disabled-fg); --button-ghost-bg-active: var(--button-secondary-bg-active); --button-ghost-bg-hover: var(--button-secondary-bg-hover); --button-ghost-fg-active: var(--color-action-secondary-fg-active); --button-ghost-fg: var(--button-secondary-fg); --button-primary-bg-active: var(--color-action-primary-bg-active); --button-primary-bg-default: var(--color-action-primary-bg); --button-primary-bg-hover: var(--color-action-primary-bg-hover); --button-primary-fg: var(--color-action-primary-fg); --button-secondary-bg-active: var(--color-action-secondary-bg-active); --button-secondary-bg-default: var(--color-action-secondary-bg); --button-secondary-bg-hover: var(--color-action-secondary-bg-hover); --button-secondary-fg-active: var(--color-action-secondary-fg-active); --button-secondary-fg: var(--color-action-secondary-fg); --card-bg: var(--color-bg-card); --card-border: var(--color-border-elevated); --card-radius: var(--radius-card); --input-bg-active: var(--color-bg-elevated-alt); --input-bg-disabled: var(--color-bg-elevated-alt); --input-bg-hover: var(--color-bg-disabled); --input-bg: var(--color-bg-elevated); --input-border-error: var(--color-border-error); --input-border-focus: var(--color-border-focus); --input-border-primary: var(--color-border-brand); --input-border: var(--color-border-default); --input-fg-disabled: var(--color-fg-disabled); --input-fg-placeholder: var(--color-fg-tertiary); --input-fg: var(--color-fg-primary); --input-radius: var(--radius-input); /* ── Shadows & blur effects ── */ --blur-bg-level-1: var(--elevation-blur-bg-1); --blur-bg-level-2: var(--elevation-blur-bg-2); --blur-bg-level-3: var(--elevation-blur-bg-3); --blur-bg-level-4: var(--elevation-blur-bg-4); --blur-bg-level-5: var(--elevation-blur-bg-5); --blur-bg-level-6: var(--elevation-blur-bg-6); --blur-bg-level-7: var(--elevation-blur-bg-7); --blur-bg-level-8: var(--elevation-blur-bg-8); --shadow-focus-button: 0px 0px 0px var(--border-w-2) var(--color-alpha-black-60); --shadow-level-1: 0px 0px var(--elevation-blur-bg-3) 0px var(--color-alpha-black-10); --shadow-level-2: 0px 0px var(--elevation-blur-bg-3) 0px #0000001a; --shadow-level-3: 0px 0px var(--elevation-blur-bg-4) 0px #00000029; --shadow-level-4: 0px 0px var(--elevation-blur-bg-5) 0px #00000033; } [data-theme="light"] { color-scheme: light; /* ── Semantic (light) ── */ --color-action-destructive-bg-active: var(--color-red-800); --color-action-destructive-bg-hover: var(--color-red-700); --color-action-destructive-bg: var(--color-red-600); --color-action-destructive-fg: var(--color-base-white); --color-action-destructive-ghost-bg-active: var(--color-red-100); --color-action-destructive-ghost-bg-hover: var(--color-red-50); --color-action-destructive-ghost-fg: var(--color-red-700); --color-action-disabled-bg-active: var(--color-neutral-300); --color-action-disabled-bg: var(--color-neutral-200); --color-action-disabled-fg: var(--color-neutral-500); --color-action-disabled-text: var(--color-neutral-500); --color-action-primary-bg-active: var(--color-spaceblue-800); --color-action-primary-bg-hover: var(--color-spaceblue-700); --color-action-primary-bg: var(--color-spaceblue-600); --color-action-primary-fg: var(--color-base-white); --color-action-secondary-bg-active: var(--color-spaceblue-200); --color-action-secondary-bg-hover: var(--color-spaceblue-50); --color-action-secondary-bg: var(--color-spaceblue-100); --color-action-secondary-fg-active: var(--color-spaceblue-900); --color-action-secondary-fg: var(--color-spaceblue-800); --color-bg-card: var(--color-base-white); --color-bg-disabled: var(--color-neutral-100); --color-bg-elevated-alt: var(--color-zinc-50); --color-bg-elevated: var(--color-zinc-300); --color-bg-error-alt: var(--color-red-100); --color-bg-error: var(--color-red-500); --color-bg-page-scroll: var(--color-alpha-gray-80); --color-bg-page: var(--color-black-50); --color-bg-primary-alt: var(--color-spaceblue-50); --color-bg-primary: var(--color-spaceblue-600); --color-bg-secondary-alt: var(--color-zinc-200); --color-bg-secondary: var(--color-black-950); --color-bg-success-alt: var(--color-green-100); --color-bg-success: var(--color-green-500); --color-bg-warning-alt: var(--color-orange-100); --color-bg-warning: var(--color-orange-500); --color-border-brand: var(--color-spaceblue-600); --color-border-contrast: var(--color-base-white); --color-border-default: var(--color-zinc-300); --color-border-disabled: var(--color-neutral-300); --color-border-elevated-alt: var(--color-zinc-50); --color-border-elevated: var(--color-zinc-200); --color-border-error: var(--color-red-600); --color-border-focus: var(--color-zinc-500); --color-border-secondary: var(--color-zinc-900); --color-border-success: var(--color-green-600); --color-border-warning: var(--color-orange-600); --color-fg-brand-disabled: var(--color-spaceblue-200); --color-fg-brand-hover: var(--color-spaceblue-700); --color-fg-brand: var(--color-spaceblue-600); --color-fg-contrast: var(--color-base-white); --color-fg-disabled: var(--color-neutral-400); --color-fg-divider: var(--color-zinc-200); --color-fg-error: var(--color-red-700); --color-fg-info: var(--color-spaceblue-800); --color-fg-primary: var(--color-black-950); --color-fg-secondary: var(--color-zinc-500); --color-fg-success: var(--color-green-700); --color-fg-tertiary: var(--color-zinc-400); --color-fg-warning: var(--color-orange-700); --elevation-blur-bg-1: var(--blur-8); --elevation-blur-bg-2: var(--blur-12); --elevation-blur-bg-3: var(--blur-16); --elevation-blur-bg-4: var(--blur-24); --elevation-blur-bg-5: var(--blur-32); --elevation-blur-bg-6: var(--blur-40); --elevation-blur-bg-7: var(--blur-56); --elevation-blur-bg-8: var(--blur-64); --radius-button: var(--radius-full); --radius-card: var(--radius-6); --radius-input: var(--radius-2); --text-base-size-10: var(--font-size-header-3xl); --text-base-size-1: var(--font-size-text-xs); --text-base-size-2: var(--font-size-text-sm); --text-base-size-3: var(--font-size-text-md); --text-base-size-4: var(--font-size-text-lg); --text-base-size-5: var(--font-size-header-sm); --text-base-size-6: var(--font-size-header-md); --text-base-size-7: var(--font-size-header-lg); --text-base-size-8: var(--font-size-header-xl); --text-base-size-9: var(--font-size-header-2xl); /* ── Components (light) ── */ --alert-error-bg: var(--color-bg-error-alt); --alert-error-fg: var(--color-fg-error); --alert-info-bg: var(--color-bg-primary-alt); --alert-info-fg: var(--color-fg-info); --alert-success-bg: var(--color-bg-success-alt); --alert-success-fg: var(--color-fg-success); --alert-warning-bg: var(--color-bg-warning-alt); --alert-warning-fg: var(--color-fg-warning); --button-destructive-bg-active: var(--color-action-destructive-bg-active); --button-destructive-bg-default: var(--color-action-destructive-bg); --button-destructive-bg-hover: var(--color-action-destructive-bg-hover); --button-destructive-fg: var(--color-action-destructive-fg); --button-destructive-ghost-bg-active: var(--color-action-destructive-ghost-bg-active); --button-destructive-ghost-bg-hover: var(--color-action-destructive-ghost-bg-hover); --button-destructive-ghost-fg: var(--color-action-destructive-ghost-fg); --button-disabled-bg-default: var(--color-action-disabled-bg); --button-disabled-fg: var(--color-action-disabled-fg); --button-ghost-bg-active: var(--button-secondary-bg-active); --button-ghost-bg-hover: var(--button-secondary-bg-hover); --button-ghost-fg-active: var(--color-action-secondary-fg-active); --button-ghost-fg: var(--button-secondary-fg); --button-primary-bg-active: var(--color-action-primary-bg-active); --button-primary-bg-default: var(--color-action-primary-bg); --button-primary-bg-hover: var(--color-action-primary-bg-hover); --button-primary-fg: var(--color-action-primary-fg); --button-secondary-bg-active: var(--color-action-secondary-bg-active); --button-secondary-bg-default: var(--color-action-secondary-bg); --button-secondary-bg-hover: var(--color-action-secondary-bg-hover); --button-secondary-fg-active: var(--color-action-secondary-fg-active); --button-secondary-fg: var(--color-action-secondary-fg); --card-bg: var(--color-bg-card); --card-border: var(--color-border-elevated-alt); --card-radius: var(--radius-card); --input-bg-active: var(--color-bg-elevated); --input-bg-disabled: var(--color-bg-elevated-alt); --input-bg-hover: var(--color-bg-disabled); --input-bg: var(--color-bg-page); --input-border-error: var(--color-border-error); --input-border-focus: var(--color-border-focus); --input-border-primary: var(--color-border-brand); --input-border: var(--color-border-default); --input-fg-disabled: var(--color-fg-disabled); --input-fg-placeholder: var(--color-fg-tertiary); --input-fg: var(--color-fg-primary); --input-radius: var(--radius-input); }