/* Colour — primitives (tokens/primitives.design.js) then semantic aliases (tokens.design.js).
   Only ever use the semantic names in product UI; primitives exist to define them. */
:root{
/* primitives — neutrals */
--color-white:#FFFFFF;
--color-black:#000;
--color-dark-100:#918F91;
--color-dark-200:#6C696D;
--color-dark-300:#59575A;
--color-dark:#474448;
/* primitives — earth */
--color-earth-200:#FFFBF1;
--color-earth-300:#FAF2E0;
--color-earth:#EFE3CF;
--color-earth-700:#E8D7BB;
--color-earth-900:#A29783;
/* primitives — brand peach */
--color-brand-100:#FFFCFA;
--color-brand-200:#FFF5EC;
--color-brand-300:#FFF2E5;
--color-brand:#FFE6D1;
--color-brand-500:#FFCCA2;
--color-brand-900:#F9A581;
/* primitives — brand green */
--color-brand-green-100:#EFF2E8;
--color-brand-green-300:#DBE2C9;
--color-brand-green:#CBD5B2;
--color-brand-green-700:#B7C0A0;
--color-brand-green-900:#8E957D;
/* primitives — brand yellow */
--color-brand-yellow-100:#FFF7E7;
--color-brand-yellow-300:#FFF1D6;
--color-brand-yellow:#FFEBC4;
--color-brand-yellow-700:#FFD074;
--color-brand-yellow-900:#FFB14C;
/* primitives — brand purple */
--color-brand-purple-100:#FEF6FF;
--color-brand-purple-300:#FDF2FF;
--color-brand-purple:#FCEDFF;
--color-brand-purple-700:#E3D5E6;
--color-brand-purple-900:#C2AACC;
/* primitives — brand red */
--color-brand-red-50:#FEEDEA;
--color-brand-red-100:#FEC5C3;
--color-brand-red-300:#FE9995;
--color-brand-red:#FD6D68;
--color-brand-red-700:#E4625E;
--color-brand-red-900:#B14C49;

/* semantic — logo */
--color-logo:#474448;
--color-logo-secondary:#F9A581;
--color-logo-tertiary:#FFFFFF;
/* semantic — surfaces */
--color-page-primary:#FFFCFA;
--color-page-secondary:#FFE6D1;
--color-page-tertiary:#FFF5EC;
--color-page-quaternary:#EFF2E8;
--color-box-primary:#FFF2E5;
--color-box-secondary:#FFFBF1;
--color-box-tertiary:#E8D7BB;
--color-popup-primary:#FFFFFF;
--color-popup-secondary:#FFE6D1;
--color-navbar:#FFFCFA;
--color-navbar-stroke:#FAF2E0;
--color-footer:#FFF2E5;
--color-footer-secondary:#FFFCFA;
/* semantic — system */
--color-system-brand:#FFE6D1;
--color-system-success:#B7C0A0;
--color-system-info:#FFD074;
--color-system-warning-10:#FEC5C3;
--color-system-warning:#FD6D68;
/* semantic — strokes */
--color-stroke-primary:#EFE3CF;
--color-stroke-secondary:#A29783;
--color-stroke-navbar:#FAF2E0;
--color-stroke-box:#EFE3CF;
--color-stroke-field:#E8D7BB;
/* semantic — fields */
--color-field:#FFFBF1;
--color-field-active:#E8D7BB;
--color-field-label-active:#918F91;
--color-field-label-inactive:#918F91;
/* semantic — text */
--color-body-primary:#474448;
--color-body-secondary:#A29783;
--color-body-tertiary:#FFFFFF;
--color-body-promo:#F9A581;
--color-body-white:#FFFFFF;
--color-heading-primary:#474448;
--color-heading-secondary:#F9A581;
--color-heading-tertiary:#FFFFFF;
--color-heading-white:#FFFFFF;
--color-link:#474448;
--color-link-hover:#F9A581;
/* semantic — subscription status */
--color-subStatus-active:#B7C0A0;
--color-subStatus-on-hold:#FFD074;
--color-subStatus-stalled:#FE9995;
--color-subStatus-pending-cancel:#FD6D68;
--color-subStatus-cancelled:#B14C49;
--color-subStatus-fallback:#918F91;
/* semantic — icons */
--color-icon-primary:#474448;
--color-icon-secondary:#FFFFFF;
--color-icon-active:#F9A581;
/* the one gradient in the system */
--gradient-soft-peach:linear-gradient(135deg,#FCEDFF 2.88%,#FFE6D1 100%); /* @kind other */
}