:root{
/* base */
--blue-900:#232b35;
--blue-800:#323E4D;
--blue-700:#48566a;
--blue-500:#768496;
--blue-400:oklch(from #323E4D calc(l + 0.28) calc(c*0.7) h);
--blue-200:oklch(from #323E4D calc(l + 0.45) calc(c*0.5) h);
--blue-100:oklch(from #323E4D calc(l + 0.55) calc(c*0.35) h);
--beige-50:#F7F7F5;
--beige-100:#f0efe9;
--beige-200:#e6e4db;
--white:#ffffff;
--black:#1a1e24;

/* semantic */
--color-bg:var(--beige-50);
--color-surface:var(--white);
--color-surface-sunken:var(--beige-100);
--color-border:var(--beige-200);
--color-text-primary:var(--blue-800);
--color-text-secondary:var(--blue-700);
--color-text-muted:#8b95a3;
--color-text-on-dark:var(--beige-50);
--color-brand:var(--blue-800);
--color-brand-hover:var(--blue-900);
--color-brand-tint:var(--blue-100);
--color-accent:var(--blue-800);
--color-focus-ring:var(--blue-500);
}
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:128px;

--radius-sm:2px;
--radius-md:4px;
--radius-lg:8px;
--radius-pill:999px;

--shadow-sm:0 1px 2px rgba(35,43,53,0.06);
--shadow-md:0 4px 16px rgba(35,43,53,0.08);
--shadow-lg:0 12px 32px rgba(35,43,53,0.12);

--border-width:1px;
--container-max:1100px;
}