:root {
 /* Brand — Kodlane Blue */
 --kl-blue: #2563EB;
 --kl-blue-dark: #1D4ED8;
 --kl-blue-light: #DBEAFE;
 --kl-blue-soft: var(--kl-blue-light);
 --kl-blue-glow: rgba(37, 99, 235, 0.14);

 /* Neutrals — cool stone (not cream, not flat gray) */
 --kl-navy: #0B1220;
 --kl-navy-deep: #070B14;
 --kl-ink: var(--kl-navy);
 --kl-slate: #2A3447;
 --kl-gray: #5B6578;
 --kl-muted: var(--kl-gray);
 --kl-gray-light: #8B95A8;
 --kl-border: #D5DBE6;
 --kl-line: #D5DBE6;
 --kl-bg: #E8ECF2;
 --kl-bg-alt: #F2F4F8;
 --kl-surface: #FFFFFF;
 --kl-white: var(--kl-surface);

 /* Layout */
 --kl-radius: 20px;
 --kl-radius-sm: 12px;
 --kl-radius-btn: 10px;
 --kl-shadow: 0 20px 48px rgba(11, 18, 32, 0.08);
 --page-pad: 28px;
 --panel-pad: 28px;
 --content-max: 1180px;

 /* Motion */
 --kl-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
 --kl-duration-fast: 0.18s;
 --kl-duration-medium: 0.35s;
 --kl-duration-entrance: 0.7s;

 /* Semantic */
 --kl-success: #059669;
 --kl-warning: #D97706;
 --kl-error: #DC2626;

 /* Legacy aliases */
 --b: var(--kl-blue);
 --bd: var(--kl-blue-dark);
 --n: var(--kl-navy);
 --g: var(--kl-gray);
 --border: var(--kl-border);
 --bg: var(--kl-bg-alt);
}