/* AUTO-GENERATED by tests/nav-test/scripts/build-ds-tokens.mjs
 * Do NOT edit by hand. Source files:
 *   - app/styles/theme.css        (colors + theme aliases)
 *   - app/styles/typography.css   (--font-sans + @utility font-* classes)
 *   - app/styles/spacing.css      (--space-global-* responsive tokens)
 * Re-run `npm run build` to regenerate.
 */

.gn-root {
    /* from app/styles/theme.css */
    /* Slate */
    --color-ds-slate-50: #f3f5f6;
    --color-ds-slate-100: #e5e9ed;
    --color-ds-slate-200: #d5dbe1;
    --color-ds-slate-300: #a1afbd;
    --color-ds-slate-400: #8f9fb0;
    --color-ds-slate-500: #70849a;
    --color-ds-slate-600: #587089;
    --color-ds-slate-700: #385473;
    --color-ds-slate-800: #203f62;
    --color-ds-slate-900: #1d3a5a;
    --color-ds-slate-1000: #1b3553;
    --color-ds-slate-1100: #19304a;
    --color-ds-slate-1200: #162b43;
    --color-ds-slate-1300: #14263b;
    --color-ds-slate-1400: #102032;
    --color-ds-slate-1500: #0e1b29;
    --color-ds-slate-1600: #0b1521;
    --color-ds-slate-1700: #080f17;

    /* Blue */
    --color-ds-blue-50: #f3f4f9;
    --color-ds-blue-100: #d0e1f7;
    --color-ds-blue-200: #b0cff5;
    --color-ds-blue-300: #95c0f4;
    --color-ds-blue-400: #74aef2;
    --color-ds-blue-500: #59a0f1;
    --color-ds-blue-600: #3c8fee;
    --color-ds-blue-700: #1e80ed;
    --color-ds-blue-800: #006feb;
    --color-ds-blue-900: #0166d7;
    --color-ds-blue-1000: #035dc3;
    --color-ds-blue-1100: #0453af;
    --color-ds-blue-1200: #054999;
    --color-ds-blue-1300: #064187;
    --color-ds-blue-1400: #083772;
    --color-ds-blue-1500: #0a2954;
    --color-ds-blue-1600: #0b1d3b;
    --color-ds-blue-1700: #0d1327;

    /* Base */
    --color-ds-base-white: #ffffff;
    --color-ds-base-black: #000000;

    /* Purple */
    --color-ds-purple-50: #fdfbff;
    --color-ds-purple-100: #faf5ff;
    --color-ds-purple-200: #f3e8ff;
    --color-ds-purple-300: #e9d5ff;
    --color-ds-purple-400: #c891fe;
    --color-ds-purple-500: #ae5dfa;
    --color-ds-purple-600: #9333ea;
    --color-ds-purple-700: #7e22ce;
    --color-ds-purple-800: #6b21a8;
    --color-ds-purple-900: #581c87;
    --color-ds-purple-1000: #3b0764;

    /* Green */
    --color-ds-green-50: #f7fff5;
    --color-ds-green-100: #f0feee;
    --color-ds-green-200: #c4fdbf;
    --color-ds-green-300: #b0f1aa;
    --color-ds-green-400: #81fc78;
    --color-ds-green-500: #4fd63e;
    --color-ds-green-600: #1ab602;
    --color-ds-green-700: #0c8600;
    --color-ds-green-800: #105b0b;
    --color-ds-green-900: #094a04;
    --color-ds-green-1000: #023303;

    /* Red */
    --color-ds-red-50: #fff9fa;
    --color-ds-red-100: #fff1f2;
    --color-ds-red-200: #fecdd3;
    --color-ds-red-300: #fda4af;
    --color-ds-red-400: #f46c7d;
    --color-ds-red-500: #f43f5e;
    --color-ds-red-600: #e11d48;
    --color-ds-red-700: #be143d;
    --color-ds-red-800: #9f1339;
    --color-ds-red-900: #7e0425;
    --color-ds-red-1000: #4c0819;

    /* Pink */
    --color-ds-pink-50: #fffbfd;
    --color-ds-pink-100: #fdf2f8;
    --color-ds-pink-200: #fce7f3;
    --color-ds-pink-300: #febbdf;
    --color-ds-pink-400: #fc84c3;
    --color-ds-pink-500: #ec4899;
    --color-ds-pink-600: #db2777;
    --color-ds-pink-700: #be185d;
    --color-ds-pink-800: #9d174d;
    --color-ds-pink-900: #831843;
    --color-ds-pink-1000: #500724;

    /* Cyan */
    --color-ds-cyan-50: #f7ffff;
    --color-ds-cyan-100: #ecfeff;
    --color-ds-cyan-200: #cffafe;
    --color-ds-cyan-300: #67e8f9;
    --color-ds-cyan-400: #22d3ee;
    --color-ds-cyan-500: #06b6d4;
    --color-ds-cyan-600: #0891b2;
    --color-ds-cyan-700: #0e7490;
    --color-ds-cyan-800: #155e75;
    --color-ds-cyan-900: #164e63;
    --color-ds-cyan-1000: #083344;

    /* Yellow */
    --color-ds-yellow-50: #fffef4;
    --color-ds-yellow-100: #fefce8;
    --color-ds-yellow-200: #fef9c3;
    --color-ds-yellow-300: #fef08a;
    --color-ds-yellow-400: #fde047;
    --color-ds-yellow-500: #facc15;
    --color-ds-yellow-600: #dca701;
    --color-ds-yellow-700: #9e6b00;
    --color-ds-yellow-800: #854d0e;
    --color-ds-yellow-900: #713f12;
    --color-ds-yellow-1000: #422006;

    /* Black (with alpha) */
    --color-ds-black-0: #0e0e0e00;
    --color-ds-black-100: #0e0e0e0d;
    --color-ds-black-200: #0e0e0e1a;
    --color-ds-black-300: #0e0e0e33;
    --color-ds-black-400: #0e0e0e66;
    --color-ds-black-500: #0e0e0eb2;
    --color-ds-black-600: #0e0e0ecc;
    --color-ds-black-700: #0e0e0ed9;
    --color-ds-black-800: #0e0e0ee5;
    --color-ds-black-900: #0e0e0ef2;
    --color-ds-black-1000: #000000;

    /* White (with alpha) */
    --color-ds-white-0: #fafafa00;
    --color-ds-white-100: #fafafa0d;
    --color-ds-white-200: #fafafa1a;
    --color-ds-white-300: #fafafa33;
    --color-ds-white-400: #fafafa66;
    --color-ds-white-500: #fafafab2;
    --color-ds-white-600: #fafafacc;
    --color-ds-white-700: #fafafad9;
    --color-ds-white-800: #fafafae5;
    --color-ds-white-900: #fafafaf2;
    --color-ds-white-1000: #ffffff;

    /* Slate Opacity (with alpha) */
    --color-ds-slate-opacity-50: #f3f5f600;
    --color-ds-slate-opacity-100: #e5e9ed0d;
    --color-ds-slate-opacity-200: #d5dbe11a;
    --color-ds-slate-opacity-300: #a1afbd26;
    --color-ds-slate-opacity-400: #8f9fb033;
    --color-ds-slate-opacity-500: #70849a40;
    --color-ds-slate-opacity-600: #5870894d;
    --color-ds-slate-opacity-700: #38547359;
    --color-ds-slate-opacity-800: #203f6266;
    --color-ds-slate-opacity-900: #1d3a5a73;
    --color-ds-slate-opacity-1000: #1b355380;
    --color-ds-slate-opacity-1100: #19304a8c;
    --color-ds-slate-opacity-1200: #162b4399;
    --color-ds-slate-opacity-1300: #14263bb2;
    --color-ds-slate-opacity-1400: #102032cc;
    --color-ds-slate-opacity-1500: #0e1b29e5;
    --color-ds-slate-opacity-1600: #0b1521f2;
    --color-ds-slate-opacity-1700: #080f17;

    /* Blue Opacity (with alpha) */
    --color-ds-blue-opacity-50: #f3f4f900;
    --color-ds-blue-opacity-100: #d4dff50d;
    --color-ds-blue-opacity-200: #b6cdf91a;
    --color-ds-blue-opacity-300: #8fb5f926;
    --color-ds-blue-opacity-400: #74a3fa33;
    --color-ds-blue-opacity-500: #5691fa40;
    --color-ds-blue-opacity-600: #3a7ffa4d;
    --color-ds-blue-opacity-700: #1d6dfa59;
    --color-ds-blue-opacity-800: #005bfa99;
    --color-ds-blue-opacity-900: #0152e173;
    --color-ds-blue-opacity-1000: #024aca80;
    --color-ds-blue-opacity-1100: #0342b28c;
    --color-ds-blue-opacity-1200: #043a9b99;
    --color-ds-blue-opacity-1300: #053182b2;
    --color-ds-blue-opacity-1400: #06296acc;
    --color-ds-blue-opacity-1500: #072050e5;
    --color-ds-blue-opacity-1600: #081633f2;
    --color-ds-blue-opacity-1700: #090e1c;

    /* DEFAULT THEME
    Light - default — Primary light surface (pages, cards, modals) */

    /* Background */
    --color-theme-bg-default: var(--color-ds-base-white);
    --color-theme-bg-default-hover: var(--color-ds-slate-50);
    --color-theme-bg-secondary: var(--color-ds-blue-50);
    --color-theme-bg-secondary-hover: var(--color-ds-slate-100);
    --color-theme-bg-tertiary: var(--color-ds-slate-50);
    --color-theme-bg-tertiary-hover: var(--color-ds-slate-200);
    --color-theme-bg-brand: var(--color-ds-blue-800);
    --color-theme-bg-brand-hover: var(--color-ds-blue-900);
    --color-theme-bg-neutral: var(--color-ds-slate-700);
    --color-theme-bg-neutral-hover: var(--color-ds-slate-800);
    --color-theme-bg-neutral-secondary: var(--color-ds-slate-300);
    --color-theme-bg-neutral-secondary-hover: var(--color-ds-slate-400);
    --color-theme-bg-neutral-tertiary: var(--color-ds-slate-200);
    --color-theme-bg-neutral-tertiary-hover: var(--color-ds-slate-300);

    /* Text */
    --color-theme-text-default: var(--color-ds-slate-1700);
    --color-theme-text-default-hover: var(--color-ds-slate-1400);
    --color-theme-text-secondary: var(--color-ds-slate-600);
    --color-theme-text-secondary-hover: var(--color-ds-slate-400);
    --color-theme-text-tertiary: var(--color-ds-slate-400);
    --color-theme-text-tertiary-hover: var(--color-ds-slate-300);
    --color-theme-text-on-brand: var(--color-ds-blue-50);
    --color-theme-text-on-brand-secondary: var(--color-ds-blue-1400);
    --color-theme-text-on-brand-tertiary: var(--color-ds-blue-1700);
    --color-theme-text-on-neutral: var(--color-ds-slate-100);
    --color-theme-text-on-neutral-secondary: var(--color-ds-slate-1500);
    --color-theme-text-on-neutral-tertiary: var(--color-ds-slate-1400);

    /* Brand/neutral foreground */
    --color-theme-text-brand: var(--color-ds-blue-800);
    --color-theme-text-brand-secondary: var(--color-ds-blue-800);
    --color-theme-text-brand-tertiary: var(--color-ds-blue-500);
    --color-theme-text-neutral: var(--color-ds-slate-1100);
    --color-theme-text-neutral-secondary: var(--color-ds-slate-800);
    --color-theme-text-neutral-tertiary: var(--color-ds-slate-500);

    /* Border */
    --color-theme-border-default: var(--color-ds-slate-100);
    --color-theme-border-secondary: var(--color-ds-slate-300);
    --color-theme-border-tertiary: var(--color-ds-slate-600);
    --color-theme-border-on-brand: var(--color-ds-blue-50);
    --color-theme-border-on-brand-secondary: var(--color-ds-blue-1400);
    --color-theme-border-on-brand-tertiary: var(--color-ds-blue-1700);
    --color-theme-border-on-neutral: var(--color-ds-slate-100);
    --color-theme-border-on-neutral-secondary: var(--color-ds-slate-1500);
    --color-theme-border-on-neutral-tertiary: var(--color-ds-slate-1400);

    /* Brand/neutral foreground */
    --color-theme-border-brand: var(--color-ds-blue-1600);
    --color-theme-border-brand-secondary: var(--color-ds-blue-800);
    --color-theme-border-brand-tertiary: var(--color-ds-blue-500);
    --color-theme-border-neutral: var(--color-ds-slate-1100);
    --color-theme-border-neutral-secondary: var(--color-ds-slate-800);
    --color-theme-border-neutral-tertiary: var(--color-ds-slate-500);

    /* Icon */
    --color-theme-icon-default: var(--color-ds-slate-1700);
    --color-theme-icon-default-hover: var(--color-ds-slate-1400);
    --color-theme-icon-secondary: var(--color-ds-slate-600);
    --color-theme-icon-secondary-hover: var(--color-ds-slate-400);
    --color-theme-icon-tertiary: var(--color-ds-slate-400);
    --color-theme-icon-tertiary-hover: var(--color-ds-slate-300);
    --color-theme-icon-on-brand: var(--color-ds-blue-50);
    --color-theme-icon-on-brand-secondary: var(--color-ds-blue-1400);
    --color-theme-icon-on-brand-tertiary: var(--color-ds-blue-1700);
    --color-theme-icon-on-neutral: var(--color-ds-slate-100);
    --color-theme-icon-on-neutral-secondary: var(--color-ds-slate-1500);
    --color-theme-icon-on-neutral-tertiary: var(--color-ds-slate-1400);

    /* Brand/neutral foreground */
    --color-theme-icon-brand: var(--color-ds-blue-800);
    --color-theme-icon-brand-secondary: var(--color-ds-blue-800);
    --color-theme-icon-brand-tertiary: var(--color-ds-blue-500);
    --color-theme-icon-neutral: var(--color-ds-slate-1100);
    --color-theme-icon-neutral-secondary: var(--color-ds-slate-800);
    --color-theme-icon-neutral-tertiary: var(--color-ds-slate-500);

    /* Accent foreground (mirrors brand; Figma Icon > Accent subcategory) */
    --color-theme-icon-accent: var(--color-ds-blue-800);
    --color-theme-icon-accent-secondary: var(--color-ds-blue-800);
    --color-theme-icon-accent-tertiary: var(--color-ds-blue-500);
    --color-theme-icon-accent-on-brand: var(--color-ds-blue-50);
    --color-theme-icon-accent-on-brand-secondary: var(--color-ds-blue-1400);
    --color-theme-icon-accent-on-brand-tertiary: var(--color-ds-blue-1700);

    /* State variants — positive */
    --color-theme-bg-positive: var(--color-ds-green-400);
    --color-theme-bg-positive-hover: var(--color-ds-green-500);
    --color-theme-bg-positive-secondary: var(--color-ds-green-600);
    --color-theme-bg-positive-secondary-hover: var(--color-ds-green-700);
    --color-theme-bg-positive-tertiary: var(--color-ds-green-1000);
    --color-theme-bg-positive-tertiary-hover: var(--color-ds-green-900);
    --color-theme-text-positive: var(--color-ds-green-800);
    --color-theme-text-positive-secondary: var(--color-ds-green-700);
    --color-theme-text-positive-tertiary: var(--color-ds-green-500);
    --color-theme-text-on-positive: var(--color-ds-green-100);
    --color-theme-text-on-positive-secondary: var(--color-ds-green-800);
    --color-theme-text-on-positive-tertiary: var(--color-ds-green-800);
    --color-theme-border-positive: var(--color-ds-green-1000);
    --color-theme-border-positive-secondary: var(--color-ds-green-700);
    --color-theme-border-positive-tertiary: var(--color-ds-green-500);
    --color-theme-border-on-positive: var(--color-ds-green-100);
    --color-theme-border-on-positive-secondary: var(--color-ds-green-800);
    --color-theme-border-on-positive-tertiary: var(--color-ds-green-800);
    --color-theme-icon-positive: var(--color-ds-green-1000);
    --color-theme-icon-positive-secondary: var(--color-ds-green-700);
    --color-theme-icon-positive-tertiary: var(--color-ds-green-500);
    --color-theme-icon-on-positive: var(--color-ds-green-100);
    --color-theme-icon-on-positive-secondary: var(--color-ds-green-800);
    --color-theme-icon-on-positive-tertiary: var(--color-ds-green-800);

    /* State variants — warning */
    --color-theme-bg-warning: var(--color-ds-yellow-300);
    --color-theme-bg-warning-hover: var(--color-ds-yellow-400);
    --color-theme-bg-warning-secondary: var(--color-ds-yellow-500);
    --color-theme-bg-warning-secondary-hover: var(--color-ds-yellow-600);
    --color-theme-bg-warning-tertiary: var(--color-ds-yellow-800);
    --color-theme-bg-warning-tertiary-hover: var(--color-ds-yellow-700);
    --color-theme-text-warning: var(--color-ds-yellow-1000);
    --color-theme-text-warning-secondary: var(--color-ds-yellow-700);
    --color-theme-text-warning-tertiary: var(--color-ds-yellow-500);
    --color-theme-text-on-warning: var(--color-ds-yellow-100);
    --color-theme-text-on-warning-secondary: var(--color-ds-yellow-800);
    --color-theme-text-on-warning-tertiary: var(--color-ds-yellow-900);
    --color-theme-border-warning: var(--color-ds-yellow-1000);
    --color-theme-border-warning-secondary: var(--color-ds-yellow-700);
    --color-theme-border-warning-tertiary: var(--color-ds-yellow-500);
    --color-theme-border-on-warning: var(--color-ds-yellow-100);
    --color-theme-border-on-warning-secondary: var(--color-ds-yellow-800);
    --color-theme-border-on-warning-tertiary: var(--color-ds-yellow-900);
    --color-theme-icon-warning: var(--color-ds-yellow-1000);
    --color-theme-icon-warning-secondary: var(--color-ds-yellow-700);
    --color-theme-icon-warning-tertiary: var(--color-ds-yellow-500);
    --color-theme-icon-on-warning: var(--color-ds-yellow-100);
    --color-theme-icon-on-warning-secondary: var(--color-ds-yellow-800);
    --color-theme-icon-on-warning-tertiary: var(--color-ds-yellow-900);

    /* State variants — danger */
    --color-theme-bg-danger: var(--color-ds-red-500);
    --color-theme-bg-danger-hover: var(--color-ds-red-600);
    --color-theme-bg-danger-secondary: var(--color-ds-red-700);
    --color-theme-bg-danger-secondary-hover: var(--color-ds-red-800);
    --color-theme-bg-danger-tertiary: var(--color-ds-red-900);
    --color-theme-bg-danger-tertiary-hover: var(--color-ds-red-800);
    --color-theme-text-danger: var(--color-ds-red-700);
    --color-theme-text-danger-secondary: var(--color-ds-red-600);
    --color-theme-text-danger-tertiary: var(--color-ds-red-400);
    --color-theme-text-on-danger: var(--color-ds-red-100);
    --color-theme-text-on-danger-secondary: var(--color-ds-red-700);
    --color-theme-text-on-danger-tertiary: var(--color-ds-red-900);
    --color-theme-border-danger: var(--color-ds-red-700);
    --color-theme-border-danger-secondary: var(--color-ds-red-600);
    --color-theme-border-danger-tertiary: var(--color-ds-red-400);
    --color-theme-border-on-danger: var(--color-ds-red-100);
    --color-theme-border-on-danger-secondary: var(--color-ds-red-700);
    --color-theme-border-on-danger-tertiary: var(--color-ds-red-900);
    --color-theme-icon-danger: var(--color-ds-red-700);
    --color-theme-icon-danger-secondary: var(--color-ds-red-600);
    --color-theme-icon-danger-tertiary: var(--color-ds-red-400);
    --color-theme-icon-on-danger: var(--color-ds-red-100);
    --color-theme-icon-on-danger-secondary: var(--color-ds-red-700);
    --color-theme-icon-on-danger-tertiary: var(--color-ds-red-900);

    /* State variants — disabled */
    --color-theme-bg-disabled: var(--color-ds-slate-50);
    --color-theme-text-disabled: var(--color-ds-slate-400);
    --color-theme-text-disabled-secondary: var(--color-ds-slate-500);
    --color-theme-text-on-disabled: var(--color-ds-slate-300);
    --color-theme-text-on-disabled-secondary: var(--color-ds-slate-500);
    --color-theme-border-disabled: var(--color-ds-slate-200);
    --color-theme-border-disabled-secondary: var(--color-ds-slate-700);
    --color-theme-border-on-disabled: var(--color-ds-slate-700);
    --color-theme-border-on-disabled-secondary: var(--color-ds-slate-900);
    --color-theme-icon-disabled: var(--color-ds-slate-300);
    --color-theme-icon-on-disabled: var(--color-ds-slate-500);
    --color-theme-bg-disabled-light: var(--color-ds-slate-100);
    --color-theme-text-disabled-light: var(--color-ds-slate-500);

    /* Constant tokens — never change across themes */
    --color-theme-text-constant-white: var(--color-ds-base-white);
    --color-theme-text-constant-black: var(--color-ds-base-black);
    --color-theme-border-constant-white: var(--color-ds-base-white);
    --color-theme-border-constant-black: var(--color-ds-base-black);
    --color-theme-icon-constant-white: var(--color-ds-base-white);
    --color-theme-icon-constant-black: var(--color-ds-base-black);
    --color-theme-bg-constant-white: var(--color-ds-base-white);
    --color-theme-bg-constant-black: var(--color-ds-base-black);

    /* ── Button tokens ── */

    /* Primary / Default */
    --color-theme-btn-primary-default-content: var(--color-ds-base-white);
    --color-theme-btn-primary-default-surface: var(--color-ds-slate-1600);
    --color-theme-btn-primary-default-border: var(--color-ds-slate-1600);
    --color-theme-btn-primary-default-content-hover: var(--color-ds-blue-50);
    --color-theme-btn-primary-default-surface-hover: var(--color-ds-slate-1200);
    --color-theme-btn-primary-default-border-hover: var(--color-ds-slate-1200);
    --color-theme-btn-primary-default-content-disabled: var(--color-ds-slate-300);
    --color-theme-btn-primary-default-surface-disabled: var(--color-ds-slate-100);
    --color-theme-btn-primary-default-border-disabled: var(--color-ds-slate-200);

    /* Primary / Brand */
    --color-theme-btn-primary-brand-content: var(--color-ds-base-white);
    --color-theme-btn-primary-brand-surface: var(--color-ds-blue-800);
    --color-theme-btn-primary-brand-border: var(--color-ds-blue-800);
    --color-theme-btn-primary-brand-content-hover: var(--color-ds-base-white);
    --color-theme-btn-primary-brand-surface-hover: var(--color-ds-blue-700);
    --color-theme-btn-primary-brand-border-hover: var(--color-ds-blue-700);
    --color-theme-btn-primary-brand-content-disabled: var(--color-ds-slate-300);
    --color-theme-btn-primary-brand-surface-disabled: var(--color-ds-slate-100);
    --color-theme-btn-primary-brand-border-disabled: var(--color-ds-slate-100);

    /* Primary / Accent */
    --color-theme-btn-primary-accent-content: var(--color-ds-slate-1700);
    --color-theme-btn-primary-accent-surface: var(--color-ds-slate-50);
    --color-theme-btn-primary-accent-border: var(--color-ds-slate-1700);
    --color-theme-btn-primary-accent-content-hover: var(--color-ds-slate-1500);
    --color-theme-btn-primary-accent-surface-hover: var(--color-ds-slate-100);
    --color-theme-btn-primary-accent-border-hover: var(--color-ds-slate-100);
    --color-theme-btn-primary-accent-content-disabled: var(--color-ds-slate-300);
    --color-theme-btn-primary-accent-surface-disabled: var(--color-ds-slate-100);
    --color-theme-btn-primary-accent-border-disabled: var(--color-ds-slate-100);

    /* Primary / Neutral */
    --color-theme-btn-primary-neutral-content: var(--color-ds-slate-1700);
    --color-theme-btn-primary-neutral-surface: var(--color-ds-base-white);
    --color-theme-btn-primary-neutral-border: var(--color-ds-slate-200);
    --color-theme-btn-primary-neutral-content-hover: var(--color-ds-slate-1500);
    --color-theme-btn-primary-neutral-surface-hover: var(--color-ds-slate-50);
    --color-theme-btn-primary-neutral-border-hover: var(--color-ds-slate-200);
    --color-theme-btn-primary-neutral-content-disabled: var(--color-ds-slate-300);
    --color-theme-btn-primary-neutral-surface-disabled: var(--color-ds-slate-100);
    --color-theme-btn-primary-neutral-border-disabled: #4d4d4d;

    /* Secondary / Default */
    --color-theme-btn-secondary-default-content: var(--color-ds-slate-1700);
    --color-theme-btn-secondary-default-surface: var(--color-ds-slate-50);
    --color-theme-btn-secondary-default-border: var(--color-ds-slate-1700);
    --color-theme-btn-secondary-default-content-hover: var(--color-ds-slate-1500);
    --color-theme-btn-secondary-default-surface-hover: var(--color-ds-slate-50);
    --color-theme-btn-secondary-default-border-hover: var(--color-ds-slate-1600);
    --color-theme-btn-secondary-default-content-disabled: var(--color-ds-slate-300);
    --color-theme-btn-secondary-default-surface-disabled: var(--color-ds-slate-100);
    --color-theme-btn-secondary-default-border-disabled: var(--color-ds-slate-200);

    /* Secondary / Brand */
    --color-theme-btn-secondary-brand-content: var(--color-ds-blue-800);
    --color-theme-btn-secondary-brand-border: var(--color-ds-blue-opacity-800);
    --color-theme-btn-secondary-brand-content-hover: var(--color-ds-slate-50);
    --color-theme-btn-secondary-brand-surface-hover: var(--color-ds-blue-800);
    --color-theme-btn-secondary-brand-border-hover: var(--color-ds-blue-800);
    --color-theme-btn-secondary-brand-content-disabled: var(--color-ds-slate-300);
    --color-theme-btn-secondary-brand-surface-disabled: var(--color-ds-slate-100);
    --color-theme-btn-secondary-brand-border-disabled: var(--color-ds-slate-200);

    /* Secondary / Accent */
    --color-theme-btn-secondary-accent-content: var(--color-ds-slate-1700);
    --color-theme-btn-secondary-accent-surface: var(--color-ds-base-white);
    --color-theme-btn-secondary-accent-border: var(--color-ds-slate-200);
    --color-theme-btn-secondary-accent-content-hover: var(--color-ds-slate-1500);
    --color-theme-btn-secondary-accent-surface-hover: var(--color-ds-slate-50);
    --color-theme-btn-secondary-accent-border-hover: var(--color-ds-slate-200);
    --color-theme-btn-secondary-accent-content-disabled: var(--color-ds-slate-300);
    --color-theme-btn-secondary-accent-surface-disabled: var(--color-ds-slate-100);
    --color-theme-btn-secondary-accent-border-disabled: var(--color-ds-slate-200);

    /* Secondary / Neutral */
    --color-theme-btn-secondary-neutral-content: var(--color-ds-blue-1600);
    --color-theme-btn-secondary-neutral-surface: var(--color-ds-blue-100);
    --color-theme-btn-secondary-neutral-border: var(--color-ds-blue-800);
    --color-theme-btn-secondary-neutral-content-hover: var(--color-ds-blue-1600);
    --color-theme-btn-secondary-neutral-surface-hover: var(--color-ds-blue-200);
    --color-theme-btn-secondary-neutral-border-hover: var(--color-ds-blue-400);
    --color-theme-btn-secondary-neutral-content-disabled: var(--color-ds-slate-200);
    --color-theme-btn-secondary-neutral-surface-disabled: var(--color-ds-slate-100);
    --color-theme-btn-secondary-neutral-border-disabled: var(--color-ds-slate-200);

    /* Tertiary / Default */
    --color-theme-btn-tertiary-default-content: var(--color-ds-slate-1700);
    --color-theme-btn-tertiary-default-content-hover: var(--color-ds-slate-1600);
    --color-theme-btn-tertiary-default-surface-hover: var(--color-ds-slate-50);
    --color-theme-btn-tertiary-default-content-disabled: var(--color-ds-slate-200);

    /* Tertiary / No-padding */
    --color-theme-btn-tertiary-no-padding-content: var(--color-ds-slate-1700);
    --color-theme-btn-tertiary-no-padding-content-hover: var(--color-ds-slate-700);
    --color-theme-btn-tertiary-no-padding-content-disabled: var(--color-ds-slate-200);

    /* Tertiary / Link */
    --color-theme-btn-tertiary-link-content: var(--color-ds-blue-800);
    --color-theme-btn-tertiary-link-content-hover: var(--color-ds-blue-600);
    --color-theme-btn-tertiary-link-content-disabled: var(--color-ds-slate-200);

    /* from app/styles/typography.css (@theme) */
    --font-sans: "DM Sans", Helvetica, Arial, sans-serif;
    --font-condensed: "DM Sans", Helvetica, Arial, sans-serif;

    /* from app/styles/spacing.css (:root) */


    /* from app/styles/spacing.css (:root) */
    --space-global-page-width: 1952px;
    --space-global-content-width: 1216px;
    --space-global-0: 0rem;
    --space-global-tiny: 0.125rem; /* 2px */
    --space-global-3xs: 0.25rem; /* 4px */
    --space-global-2xs: 0.5rem; /* 8px */
    --space-global-xs: 0.75rem; /* 12px */
    --space-global-sm: 1rem; /* 16px */

    /* from app/styles/spacing.css (:root) */
    --space-global-md: 1.125rem; /* 18px */
    --space-global-lg: 1.25rem; /* 20px */
    --space-global-xl: 1.5rem; /* 24px */
    --space-global-2xl: 2rem; /* 32px */
    --space-global-huge: 2.5rem; /* 40px */
    --space-global-xhuge: 3.5rem; /* 56px */
    --space-global-2xhuge: 4rem; /* 64px */
    --space-global-3xhuge: 4.5rem; /* 72px */

    /* from app/styles/spacing.css (:root) */
    --space-section-gap: 2.5rem; /* 40px */
    --space-section-left-right-lg: 1.25rem; /* 20px */
    --space-section-top-bottom-xs: 1rem; /* 16px */
    --space-section-top-bottom-sm: 1.25rem; /* 20px */
    --space-section-top-bottom-md: 2rem; /* 32px */
    --space-section-top-bottom-lg: 4rem; /* 64px */
    --space-section-top-bottom-xl: 4.5rem; /* 72px */

    /* from app/styles/spacing.css (:root) */
    --space-btn-gap-lg: 0.5rem; /* 8px */
    --space-btn-gap-sm: 0.25rem; /* 4px */
    --space-btn-gap-xs: 0.125rem; /* 2px */
}

@media (min-width: 768px) {
.gn-root {
    --space-global-md: 1.5rem; /* 24px */
    --space-global-lg: 2rem; /* 32px */
    --space-global-xl: 2.5rem; /* 40px */
    --space-global-2xl: 3rem; /* 48px */
    --space-global-huge: 4rem; /* 64px */
    --space-global-xhuge: 5.5rem; /* 88px */
    --space-global-2xhuge: 6rem; /* 96px */
    --space-global-3xhuge: 8rem; /* 128px */
}
}

@media (min-width: 1024px) {
.gn-root {
    --space-global-md: 1.5rem; /* 24px */
    --space-global-lg: 2rem; /* 32px */
    --space-global-xl: 3rem; /* 48px */
    --space-global-2xl: 4rem; /* 64px */
    --space-global-huge: 5.5rem; /* 88px */
    --space-global-xhuge: 6rem; /* 96px */
    --space-global-2xhuge: 8rem; /* 128px */
    --space-global-3xhuge: 10rem; /* 160px */
}
}

@media (min-width: 1280px) {
.gn-root {
    --space-global-md: 1.5rem; /* 24px */
    --space-global-lg: 2rem; /* 32px */
    --space-global-xl: 3rem; /* 48px */
    --space-global-2xl: 4rem; /* 64px */
    --space-global-huge: 5.5rem; /* 88px */
    --space-global-xhuge: 6rem; /* 96px */
    --space-global-2xhuge: 8rem; /* 128px */
    --space-global-3xhuge: 12rem; /* 192px */
}
}

@media (min-width: 768px) {
.gn-root {
    --space-section-gap: 2.5rem; /* 40px */
    --space-section-left-right-lg: 4rem; /* 64px */
    --space-section-top-bottom-xs: 2rem; /* 32px */
    --space-section-top-bottom-sm: 2.5rem; /* 40px */
    --space-section-top-bottom-md: 4rem; /* 64px */
    --space-section-top-bottom-lg: 5.5rem; /* 88px */
    --space-section-top-bottom-xl: 6rem; /* 96px */
}
}

@media (min-width: 1024px) {
.gn-root {
    --space-section-gap: 5.5rem; /* 88px */
    --space-section-left-right-lg: 6rem; /* 96px */
    --space-section-top-bottom-xs: 2.5rem; /* 40px */
    --space-section-top-bottom-sm: 4rem; /* 64px */
    --space-section-top-bottom-md: 4rem; /* 64px */
    --space-section-top-bottom-lg: 6rem; /* 96px */
    --space-section-top-bottom-xl: 8rem; /* 128px */
}
}

@media (min-width: 1280px) {
.gn-root {
    --space-section-gap: 5.5rem; /* 88px */
    --space-section-left-right-lg: 12rem; /* 192px */
    --space-section-top-bottom-xs: 2.5rem; /* 40px */
    --space-section-top-bottom-sm: 4rem; /* 64px */
    --space-section-top-bottom-md: 5.5rem; /* 88px */
    --space-section-top-bottom-lg: 6rem; /* 96px */
    --space-section-top-bottom-xl: 8rem; /* 128px */
}
}

.gn-root .font-body-md { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.54; }
.gn-root .font-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.54; }
.gn-root .font-body-xs { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 1.37; }
.gn-root .font-label-md { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.15; }
.gn-root .font-btn-sm { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.15; }
.gn-root .font-headline-3xs { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.16; }
.gn-root .font-headline-2xs { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.18; }
@media (min-width: 1024px) { .gn-root .font-headline-2xs { font-size: 24px; } }