:root{
--gray-0:oklch(99% 0.002 250);
--gray-50:oklch(97% 0.004 250);
--gray-100:oklch(93.5% 0.007 250);
--gray-200:oklch(87% 0.010 250);
--gray-300:oklch(77% 0.013 250);
--gray-400:oklch(64% 0.016 250);
--gray-500:oklch(52% 0.018 250);
--gray-600:oklch(42% 0.020 250);
--gray-700:oklch(32% 0.022 250);
--gray-800:oklch(24% 0.020 250);
--gray-900:oklch(18% 0.018 250);
--gray-950:oklch(13% 0.016 250);
--gray-1000:oklch(9% 0.012 250);

--blue-50:oklch(97% 0.010 243);
--blue-100:oklch(94% 0.017 243);
--blue-200:oklch(89% 0.026 243);
--blue-300:oklch(84% 0.035 243);
--blue-400:oklch(78% 0.055 243);
--blue-500:oklch(70% 0.080 245);
--blue-600:oklch(62% 0.100 248);
--blue-700:oklch(52% 0.100 250);
--blue-800:oklch(40% 0.080 250);
--blue-900:oklch(30% 0.060 250);

--green-100:oklch(93% 0.05 145);
--green-400:oklch(76% 0.17 145);
--green-500:oklch(68% 0.19 145);
--green-600:oklch(56% 0.16 145);
--red-100:oklch(93% 0.035 25);
--red-500:oklch(60% 0.19 25);
--red-600:oklch(52% 0.18 24);

--surface-page:var(--gray-50);
--surface-canvas:var(--gray-0);
--surface-sunken:var(--gray-100);
--surface-raised:var(--gray-0);
--surface-overlay:oklch(15% 0.02 250 / 0.55);
--surface-inverse:var(--gray-950);

--border-subtle:var(--gray-200);
--border-default:var(--gray-300);
--border-strong:var(--gray-400);

--text-primary:var(--gray-900);
--text-secondary:var(--gray-600);
--text-tertiary:var(--gray-400);
--text-inverse:var(--gray-0);
--text-on-brand:var(--gray-950);

--brand:var(--blue-300);
--brand-solid:var(--blue-600);
--on-brand-solid:var(--gray-0);
--brand-strong:var(--blue-500);
--brand-subtle:var(--blue-100);
--brand-text:var(--blue-700);

--accent:var(--green-500);
--accent-strong:var(--green-600);
--accent-subtle:var(--green-100);

--success:var(--green-600);
--success-subtle:var(--green-100);
--danger:var(--red-600);
--danger-subtle:var(--red-100);
--warning:var(--blue-700);
--warning-subtle:var(--blue-100);
--info:var(--blue-700);
--info-subtle:var(--blue-100);

--focus-ring:var(--blue-600);
}

[data-theme="dark"]{
--surface-page:var(--gray-1000);
--surface-canvas:var(--gray-950);
--surface-sunken:oklch(7% 0.010 250);
--surface-raised:var(--gray-900);
--surface-overlay:oklch(4% 0.012 250 / 0.72);
--surface-inverse:var(--gray-50);

--border-subtle:var(--gray-800);
--border-default:var(--gray-700);
--border-strong:var(--gray-600);

--text-primary:var(--gray-50);
--text-secondary:var(--gray-300);
--text-tertiary:var(--gray-500);
--text-inverse:var(--gray-950);
--text-on-brand:var(--gray-950);

--brand:var(--blue-300);
--brand-solid:var(--blue-300);
--on-brand-solid:var(--gray-950);
--brand-strong:var(--blue-400);
--brand-subtle:oklch(30% 0.05 245);
--brand-text:var(--blue-300);

--accent:var(--green-400);
--accent-strong:var(--green-500);
--accent-subtle:oklch(28% 0.06 145);

--success:var(--green-400);
--success-subtle:oklch(26% 0.06 145);
--danger:var(--red-500);
--danger-subtle:oklch(28% 0.06 25);
--warning:var(--blue-300);
--warning-subtle:oklch(30% 0.05 245);
--info:var(--blue-300);
--info-subtle:oklch(30% 0.05 245);

--focus-ring:var(--blue-300);
}