:root{
/* --- Brand core (from "Brand Walls" guide) --- */
--walls-blue:#0147ff;          /* Blue      1,71,255 */
--walls-raisin:#231f20;        /* Raisin Black 35,31,32 */
--walls-alice:#e9f7fd;         /* Alice Blue 233,247,253 */
--walls-white:#ffffff;

/* --- Blue ramp (derived in oklch from --walls-blue) --- */
--blue-50:oklch(97% 0.02 264);
--blue-100:oklch(93% 0.05 264);
--blue-200:oklch(86% 0.10 264);
--blue-300:oklch(76% 0.16 264);
--blue-400:oklch(64% 0.22 264);
--blue-500:#0147ff;
--blue-600:oklch(48% 0.25 264);
--blue-700:oklch(40% 0.21 264);
--blue-800:oklch(32% 0.16 264);
--blue-900:oklch(24% 0.11 264);

/* --- Neutral ramp (warm, pulled toward Raisin Black) --- */
--neutral-0:#ffffff;
--neutral-50:#f7f7f8;
--neutral-100:#eeedee;
--neutral-200:#dedcdd;
--neutral-300:#c2bfc0;
--neutral-400:#94908f;
--neutral-500:#6e6a6a;
--neutral-600:#514d4e;
--neutral-700:#3a3637;
--neutral-800:#2c2829;
--neutral-900:#231f20;
--neutral-950:#171415;

/* --- Semantic status --- */
--success-500:oklch(62% 0.15 155);
--success-100:oklch(94% 0.05 155);
--warning-500:oklch(76% 0.15 75);
--warning-100:oklch(95% 0.06 85);
--danger-500:oklch(58% 0.20 25);
--danger-100:oklch(94% 0.05 25);
--info-500:var(--blue-500);
--info-100:var(--blue-100);

/* --- Semantic aliases: surfaces --- */
--surface-page:var(--walls-white);
--surface-subtle:var(--walls-alice);
--surface-card:var(--walls-white);
--surface-inverse:var(--walls-raisin);
--surface-brand:var(--walls-blue);
--surface-muted:var(--neutral-100);
--surface-overlay:color-mix(in srgb, var(--walls-raisin) 72%, transparent);

/* --- Semantic aliases: text --- */
--text-heading:var(--walls-raisin);
--text-body:var(--neutral-700);
--text-muted:var(--neutral-500);
--text-brand:var(--walls-blue);
--text-on-brand:var(--walls-white);
--text-on-inverse:var(--walls-alice);
--text-inverse-muted:var(--neutral-400);
--text-link:var(--walls-blue);
--text-link-hover:var(--blue-600);

/* --- Semantic aliases: borders --- */
--border-subtle:var(--neutral-200);
--border-strong:var(--neutral-300);
--border-brand:var(--walls-blue);
--border-inverse:color-mix(in srgb, var(--walls-alice) 18%, transparent);
--focus-ring:color-mix(in srgb, var(--walls-blue) 32%, transparent);
}

/* Inverse scope: drop this class on any dark section and semantics flip. */
.walls-inverse{
--surface-page:var(--walls-raisin);
--surface-subtle:var(--neutral-800);
--surface-card:var(--neutral-800);
--surface-muted:var(--neutral-700);
--text-heading:var(--walls-white);
--text-body:var(--walls-alice);
--text-muted:var(--neutral-400);
--text-brand:var(--blue-300);
--border-subtle:color-mix(in srgb, var(--walls-alice) 14%, transparent);
--border-strong:color-mix(in srgb, var(--walls-alice) 28%, transparent);
--text-link:var(--blue-300);
--text-link-hover:var(--walls-white);
}