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

    /* Spacing */
    --sp-320: 80rem;   /* 1280px */
    --sp-256: 64rem;   /* 1024px */
    --sp-192: 48rem;   /* 768px */
    --sp-96:  24rem;   /* 384px */
    --sp-90:  22.5rem; /* 360px */
    --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 */
    --sp-0_5: 0.125rem;/* 2px */

    /* Base colors */
    --color-red-50: #de5833;
    --color-purple-50: #5132a9;
    --color-yellow-50: #fcd00a;
    --color-green-50: #4cba3c;

    /* Additional colors */
    --color-yellow-60: #f9be1a;

    /* Shade system */
    --color-blue-100: #051133;
    --color-blue-90: #0b2059;
    --color-blue-80: #14307e;
    --color-blue-70: #1e42a4;
    --color-blue-60: #2b55ca;
    --color-blue-50: #3969ef;
    --color-blue-40: #557ff3;
    --color-blue-30: #7295f6;
    --color-blue-20: #8fabf9;
    --color-blue-10: #adc2fc;
    --color-blue-0: #ccdaff;

    --color-black: #000;
    --color-gray-95: #111;
    --color-gray-90: #222;
    --color-gray-85: #333;
    --color-gray-80: #444;
    --color-gray-70: #666;
    --color-gray-60: #888;
    --color-gray-50: #aaa;
    --color-gray-40: #ccc;
    --color-gray-30: #ddd;
    --color-gray-25: #e5e5e5;
    --color-gray-20: #eee;
    --color-gray-10: #f5f5f5;
    --color-gray-0: #fafafa;
    --color-white: #fff;

    --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-85: rgba(255, 255, 255, 0.85);
    --color-white-at-96: rgba(255, 255, 255, 0.96);

    /* Semantic tokens */

    --ddg-color-primary: var(--color-blue-50);
    --ddg-color-primary-dark: var(--color-blue-30);

    --theme-background-color: var(--color-white);

    --theme-text-primary-color: var(--color-black-at-84);
    --theme-text-secondary-color: var(--color-black-at-60);
    --theme-text-link-color: var(--ddg-color-primary);

    /* Border-radius */
    --border-radius-lg: 12px;
    --border-radius-md: 8px;
    --border-radius-sm: 6px;
    --border-radius-xs: 4px;

    @media (prefers-color-scheme: dark) {
        --theme-background-color: var(--color-gray-95);

        --theme-text-primary-color: var(--color-white-at-85);
        --theme-text-secondary-color: var(--color-white-at-50);
        --theme-text-link-color: var(--ddg-color-primary-dark);
    }

    /* macOS */
    --macos-text-primary: var(--color-black-at-84);

    /* iOS */
    --ios-content-max-width: calc(794 * var(--px-in-rem));
}
