:root{

/* ===== Primary Dark ===== */

--color-primary-90:color-mix(in srgb,var(--color-primary) 90%,black);
--color-primary-70:color-mix(in srgb,var(--color-primary) 70%,black);
--color-primary-50:color-mix(in srgb,var(--color-primary) 50%,black);
--color-primary-30:color-mix(in srgb,var(--color-primary) 30%,black);
--color-primary-10:color-mix(in srgb,var(--color-primary) 10%,black);

/* ===== Secondary Dark ===== */

--color-secondary-90:color-mix(in srgb,var(--color-secondary) 90%,black);
--color-secondary-70:color-mix(in srgb,var(--color-secondary) 70%,black);
--color-secondary-50:color-mix(in srgb,var(--color-secondary) 50%,black);
--color-secondary-30:color-mix(in srgb,var(--color-secondary) 30%,black);
--color-secondary-10:color-mix(in srgb,var(--color-secondary) 10%,black);

/* ===== Accent Dark ===== */

--color-accent-90:color-mix(in srgb,var(--color-accent) 90%,black);
--color-accent-70:color-mix(in srgb,var(--color-accent) 70%,black);
--color-accent-50:color-mix(in srgb,var(--color-accent) 50%,black);
--color-accent-30:color-mix(in srgb,var(--color-accent) 30%,black);
--color-accent-10:color-mix(in srgb,var(--color-accent) 10%,black);

/* ===== Primary Light ===== */

--color-primary-light-90:color-mix(in srgb,var(--color-primary) 90%,white);
--color-primary-light-70:color-mix(in srgb,var(--color-primary) 70%,white);
--color-primary-light-50:color-mix(in srgb,var(--color-primary) 50%,white);
--color-primary-light-30:color-mix(in srgb,var(--color-primary) 30%,white);
--color-primary-light-10:color-mix(in srgb,var(--color-primary) 10%,white);

/* ===== Secondary Light ===== */

--color-secondary-light-90:color-mix(in srgb,var(--color-secondary) 90%,white);
--color-secondary-light-70:color-mix(in srgb,var(--color-secondary) 70%,white);
--color-secondary-light-50:color-mix(in srgb,var(--color-secondary) 50%,white);
--color-secondary-light-30:color-mix(in srgb,var(--color-secondary) 30%,white);
--color-secondary-light-10:color-mix(in srgb,var(--color-secondary) 10%,white);

/* ===== Accent Light ===== */

--color-accent-light-90:color-mix(in srgb,var(--color-accent) 90%,white);
--color-accent-light-70:color-mix(in srgb,var(--color-accent) 70%,white);
--color-accent-light-50:color-mix(in srgb,var(--color-accent) 50%,white);
--color-accent-light-30:color-mix(in srgb,var(--color-accent) 30%,white);
--color-accent-light-10:color-mix(in srgb,var(--color-accent) 10%,white);

/* ===== Primary Alpha ===== */

--color-primary-a90:color-mix(in srgb,var(--color-primary) 90%,transparent);
--color-primary-a70:color-mix(in srgb,var(--color-primary) 70%,transparent);
--color-primary-a50:color-mix(in srgb,var(--color-primary) 50%,transparent);
--color-primary-a30:color-mix(in srgb,var(--color-primary) 30%,transparent);
--color-primary-a10:color-mix(in srgb,var(--color-primary) 10%,transparent);

/* ===== Secondary Alpha ===== */

--color-secondary-a90:color-mix(in srgb,var(--color-secondary) 90%,transparent);
--color-secondary-a70:color-mix(in srgb,var(--color-secondary) 70%,transparent);
--color-secondary-a50:color-mix(in srgb,var(--color-secondary) 50%,transparent);
--color-secondary-a30:color-mix(in srgb,var(--color-secondary) 30%,transparent);
--color-secondary-a10:color-mix(in srgb,var(--color-secondary) 10%,transparent);

/* ===== Accent Alpha ===== */

--color-accent-a90:color-mix(in srgb,var(--color-accent) 90%,transparent);
--color-accent-a70:color-mix(in srgb,var(--color-accent) 70%,transparent);
--color-accent-a50:color-mix(in srgb,var(--color-accent) 50%,transparent);
--color-accent-a30:color-mix(in srgb,var(--color-accent) 30%,transparent);
--color-accent-a10:color-mix(in srgb,var(--color-accent) 10%,transparent);

/* ===== Utility Colors ===== */

--color-neutral:#1d1d1d;
--color-neutral-light:#333;
--color-neutral-surface:#444;
--color-text:var(--color-neutral);
--color-text-almost-white:color-mix(in srgb,var(--color-neutral) 10%,white);
--color-text-gray:color-mix(in srgb,var(--color-neutral) 30%,white);
--color-text-muted:color-mix(in srgb,var(--color-neutral) 50%,white);
--color-text-sub:color-mix(in srgb,var(--color-neutral) 70%,white);
--color-text-white:#fff;
}


