special-pages/pages/new-tab/app/styles/ntp-theme.css
:root {
    --ntp-gap: 2rem;
    --ntp-drawer-width: calc(224 * var(--px-in-rem));
    --ntp-drawer-scroll-width: 12px;
    --ntp-combined-width: calc(var(--ntp-drawer-width) + var(--ntp-drawer-scroll-width));

    /* Mac/System/Callout */
    --callout-font-size: 12px;
    --callout-font-weight: 400;
    --callout-line-height: 15px;

    /* Mac/System/Body */
    --body-font-size: 13px;
    --body-font-weight: 400;
    --body-line-height: 16px;

    /* title 2 */
    --title-2-font-size: 17px;
    --title-2-font-weight: 700;
    --title-2-line-height: 22px;

    /* title 3 em */
    --title-3-em-font-size: 15px;
    --title-3-em-font-weight: 590;
    --title-3-em-line-height: 20px;

    /* label small */
    --small-label-font-size: 11px;
    --small-label-font-weight: 400;
    --small-label-line-height: 14px;

    --border-radius-lg: 12px;
    --border-radius-md: 8px;
    --border-radius-sm: 6px;
    --border-radius-xs: 4px;
    --focus-ring: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-focus-outline-color);
    --focus-ring-thin: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 1px  var(--color-white);
}

body {
    --default-light-background-color: var(--color-gray-0);
    --default-dark-background-color: var(--color-gray-85);
}


[data-theme=light] {
    --ntp-surface-background-color: var(--color-white-at-30);
    --ntp-surfaces-panel-background-color: white;
    --ntp-surface-border-color: var(--color-black-at-9);
    --ntp-text-normal: var(--color-black-at-84);
    --ntp-text-muted: var(--color-black-at-60);
    --ntp-text-on-primary: var(--color-white-at-84);
    --ntp-color-primary: var(--ddg-color-primary);
    --ntp-focus-outline-color: black;
    --focus-ring: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-focus-outline-color);
    --focus-ring-thin: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 1px  var(--color-white);
    --focus-ring-primary: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-color-primary);
    --ntp-selection-color: var(--color-white);
    --ntp-selection-background-color: #3A69EF;

    /* Global Colors & Styles - https://www.figma.com/design/3W4vi0zX8hrpQc7zInQQB6/%F0%9F%8E%A8-Global-Colors---Styles?node-id=11-1&p=f&vars=1&m=dev */
    /* @todo: This palette is what the native apps use, we should gradually move over to it */
    --ntp-surface-tertiary: #FFFFFF;
    --ntp-text-primary: rgba(0, 0, 0, 0.96);
    --ntp-text-tertiary: rgba(0, 0, 0, 0.42);
    --ntp-icons-primary: rgba(0, 0, 0, 0.84);
    --ntp-icons-tertiary: rgba(0, 0, 0, 0.36);
    --ntp-tone-tint: rgba(255, 255, 255, 0.48);
    --ntp-accent-primary: var(--color-blue-50);
    --ntp-accent-secondary: var(--color-blue-60);
    --ntp-accent-tertiary: var(--color-blue-70);
    --ntp-accent-glow: rgba(57, 105, 239, 0.2);
    --ntp-accent-content-primary: #FFFFFF;
    --ntp-controls-fill-primary: rgba(31, 31, 31, 0.09);
    --ntp-controls-fill-secondary: rgba(31, 31, 31, 0.12);
    --ntp-controls-raised-fill-primary: #FFFFFF;
    --ntp-controls-raised-backdrop: rgba(0, 0, 0, 0.09);
    --ntp-decoration-tertiary: rgba(0, 0, 0, 0.09);
    --ntp-shadow-primary: rgba(0, 0, 0, 0.05);
    --ntp-shadow-secondary: rgba(0, 0, 0, 0.08);
}

[data-theme=dark] {
    --ntp-surface-background-color: var(--color-black-at-18);
    --ntp-surfaces-panel-background-color: #222222;
    --ntp-surface-border-color: var(--color-white-at-12);
    --ntp-text-normal: var(--color-white-at-84);
    --ntp-text-muted: var(--color-white-at-60);
    --ntp-color-primary: var(--color-blue-30);
    --ntp-text-on-primary: var(--color-black-at-84);
    --ntp-focus-outline-color: white;
    --focus-ring: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 3px var(--color-white);
    --focus-ring-thin: 0px 0px 0px 1px  var(--color-white), 0px 0px 0px 1px var(--ntp-focus-outline-color);
    --focus-ring-primary: 0px 0px 0px 1px var(--default-dark-background-color), 0px 0px 0px 3px var(--ntp-color-primary);
    --ntp-selection-color: var(--color-white);
    --ntp-selection-background-color: var(--color-blue-30);

    /* Global Colors & Styles - https://www.figma.com/design/3W4vi0zX8hrpQc7zInQQB6/%F0%9F%8E%A8-Global-Colors---Styles?node-id=11-1&p=f&vars=1&m=dev */
    /* @todo: This palette is what the native apps use, we should gradually move over to it */
    --ntp-surface-tertiary: #474747;
    --ntp-text-primary: rgba(255, 255, 255, 0.96);
    --ntp-text-tertiary: rgba(255, 255, 255, 0.36);
    --ntp-icons-primary: rgba(255, 255, 255, 0.78);
    --ntp-icons-tertiary: rgba(255, 255, 255, 0.24);
    --ntp-tone-tint: rgba(249, 249, 249, 0.12);
    --ntp-accent-primary: var(--color-blue-30);
    --ntp-accent-secondary: var(--color-blue-40);
    --ntp-accent-tertiary: var(--color-blue-50);
    --ntp-accent-glow: rgba(114, 149, 246, 0.2);
    --ntp-accent-content-primary: var(--color-blue-80);
    --ntp-controls-fill-primary: rgba(249, 249, 249, 0.12);
    --ntp-controls-fill-secondary: rgba(249, 249, 249, 0.18);
    --ntp-controls-raised-fill-primary: rgba(255, 255, 255, 0.18);
    --ntp-controls-raised-backdrop: rgba(255, 255, 255, 0.12);
    --ntp-decoration-tertiary: rgba(255, 255, 255, 0.12);
    --ntp-shadow-primary: rgba(0, 0, 0, 0.16);
    --ntp-shadow-secondary: rgba(0, 0, 0, 0.24);
}

/* This comes from the application settings */
:root:has(body[data-platform-name="windows"]) {
    /* Windows/System/Body */
    --body-font-size: 14px;
    --body-font-weight: 400;
    --body-line-height: 20px;

    /* Windows/Title 2 (Emphasis) */
    --title-2-font-size: 18px;
    --title-2-font-weight: 600;
    --title-2-line-height: 22px;

    /* Windows/Title 3 (Emphasis); */
    --title-3-em-font-size: 16px;
    --title-3-em-font-weight: 600;
    --title-3-em-line-height: 20px;
}
