special-pages/pages/onboarding/app/styles/variables.css
:root {
    --base: 16px;
    font-size: calc(16px / var(--base));
    --px-in-rem: calc(1rem / 16);

    /* Spacing */
    --sp-256: 64rem;   /* 1024px */
    --sp-192: 48rem;   /* 768px */
    --sp-96:  24rem;   /* 384px */
    --sp-80:  20rem;   /* 320px */
    --sp-72:  18rem;   /* 288px */
    --sp-64:  16rem;   /* 256px */
    --sp-56:  14rem;   /* 224px */
    --sp-48:  12rem;   /* 192px */
    --sp-40:  10rem;   /* 160px */
    --sp-35:  8.75rem; /* 140px */
    --sp-32:  8rem;    /* 128px */
    --sp-30:  7.5rem;  /* 120px */
    --sp-25:  6.25rem; /* 100px */
    --sp-24:  6rem;    /* 96px */
    --sp-20:  5rem;    /* 80px */
    --sp-16:  4rem;    /* 64px */
    --sp-15:  3.75rem; /* 60px */
    --sp-14:  3.5rem;  /* 56px */
    --sp-13:  3.25rem; /* 52px */
    --sp-12:  3rem;    /* 48px */
    --sp-11:  2.75rem; /* 44px */
    --sp-10:  2.5rem;  /* 40px */
    --sp-9:   2.25rem; /* 36px */
    --sp-8:   2rem;    /* 32px */
    --sp-7:   1.75rem; /* 28px */
    --sp-6:   1.5rem;  /* 24px */
    --sp-5:   1.25rem; /* 20px */
    --sp-4:   1rem;    /* 16px */
    --sp-3:   0.75rem; /* 12px */
    --sp-2:   0.5rem;  /* 8px */
    --sp-1:   0.25rem; /* 4px */

    --ddg-color-primary: #3969ef;

    --ddg-color-primary-dark: #7295F6;

    --color-black-at-1: rgba(0, 0, 0, 0.01);
    --color-black-at-3: rgba(0, 0, 0, 0.03);
    --color-black-at-6: rgba(0, 0, 0, 0.06);
    --color-black-at-9: rgba(0, 0, 0, 0.09);
    --color-black-at-12: rgba(0, 0, 0, 0.12);
    --color-black-at-15: rgba(0, 0, 0, 0.15);
    --color-black-at-18: rgba(0, 0, 0, 0.18);
    --color-black-at-36: rgba(0, 0, 0, 0.36);
    --color-black-at-40: rgba(0, 0, 0, 0.4);
    --color-black-at-42: rgba(0, 0, 0, 0.42);
    --color-black-at-48: rgba(0, 0, 0, 0.48);
    --color-black-at-50: rgba(0, 0, 0, 0.5);
    --color-black-at-60: rgba(0, 0, 0, 0.6);
    --color-black-at-72: rgba(0, 0, 0, 0.72);
    --color-black-at-80: rgba(0, 0, 0, 0.8);
    --color-black-at-84: rgba(0, 0, 0, 0.84);
    --color-black-at-90: rgba(0, 0, 0, 0.9);
    --color-black-at-96: rgba(0, 0, 0, 0.96);

    --color-gray85-at-80: rgba(51, 51, 51, 0.8);

    --color-white-at-3: rgba(255, 255, 255, 0.03);
    --color-white-at-6: rgba(255, 255, 255, 0.06);
    --color-white-at-9: rgba(255, 255, 255, 0.09);
    --color-white-at-12: rgba(255, 255, 255, 0.12);
    --color-white-at-15: rgba(255, 255, 255, 0.15);
    --color-white-at-18: rgba(255, 255, 255, 0.18);
    --color-white-at-24: rgba(255, 255, 255, 0.24);
    --color-white-at-30: rgba(255, 255, 255, 0.3);
    --color-white-at-36: rgba(255, 255, 255, 0.36);
    --color-white-at-42: rgba(255, 255, 255, 0.42);
    --color-white-at-50: rgba(255, 255, 255, 0.5);
    --color-white-at-60: rgba(255, 255, 255, 0.6);
    --color-white-at-70: rgba(255, 255, 255, 0.7);
    --color-white-at-80: rgba(255, 255, 255, 0.8);
    --color-white-at-84: rgba(255, 255, 255, 0.84);
    --color-white-at-96: rgba(255, 255, 255, 0.96);

    --anim-delay: 300ms;
    --anim-delay-double: 600ms;

    --theme-ddg-color-primary: var(--ddg-color-primary);
    --theme-txt-link-color: var(--ddg-color-primary);
    --theme-txt-color: var(--color-black-at-84);
    --theme-txt-color-title: var(--color-black-at-84);
    --theme-txt-color-progress: var(--color-black-at-60);

    @media (prefers-color-scheme: dark) {
        --theme-ddg-color-primary: var(--ddg-color-primary-dark);
        --theme-txt-link-color: var(--ddg-color-primary-dark);
        --theme-txt-color: var(--color-white-at-84);
        --theme-txt-color-title: var(--color-white-at-84);
        --theme-txt-color-progress: var(--color-white-at-50);
    }
}
