html[data-theme="grayscale"] {
    color-scheme: light;
    --p-yellow-100: #F5F5F5;
    --p-yellow-200: #EBEBEB;
    --p-yellow-300: #DEDEDE;
    --p-yellow-400: #CCCCCC;
    --p-yellow-500: #BBBBBB;
    --p-blue-100: #F0F0F0;
    --p-blue-200: #D8D8D8;
    --p-blue-300: #888888;
    --p-blue-400: #555555;
    --p-green-100: #EFEFEF;
    --p-green-200: #CCCCCC;
    --p-green-300: #888888;
    --p-green-400: #333333;
    --p-red-100: #EFEFEF;
    --p-red-200: #888888;
    --p-red-300: #555555;
    --p-amber-100: #F0F0F0;
    --p-amber-200: #CCCCCC;
    --p-amber-300: #999999;
    --p-warm-100: #EBEBEB;
    --p-warm-200: #CCCCCC;
    --p-warm-500: #777777;
    --p-neutral-0: #FFFFFF;
    --p-neutral-50: #FAFAFA;
    --p-neutral-100: #F5F5F5;
    --p-neutral-150: #EBEBEB;
    --p-neutral-200: #E0E0E0;
    --p-neutral-300: #B8B8B8;
    --p-neutral-400: #999999;
    --p-neutral-500: #666666;
    --p-neutral-600: #555555;
    --p-neutral-700: #333333;
    --p-neutral-800: #1A1A1A;
    --p-neutral-900: #000000;
    --p-card-1-bg: #E8E8E8;
    --p-card-1-text: #333333;
    --p-card-1-accent: #CCCCCC;
    --p-card-2-bg: #D8D8D8;
    --p-card-2-text: #333333;
    --p-card-2-accent: #BBBBBB;
    --p-card-3-bg: #CCCCCC;
    --p-card-3-text: #333333;
    --p-card-3-accent: #AAAAAA;
    --p-card-4-bg: #BBBBBB;
    --p-card-4-text: #333333;
    --p-card-4-accent: #999999;
    --p-card-5-bg: #AAAAAA;
    --p-card-5-text: #333333;
    --p-card-5-accent: #888888;
    --p-card-6-bg: #999999;
    --p-card-6-text: #1A1A1A;
    --p-card-6-accent: #777777;
    --p-card-7-bg: #555555;
    --p-card-7-text: #FAFAFA;
    --p-card-7-accent: #999999;
    --p-card-8-bg: #333333;
    --p-card-8-text: #FAFAFA;
    --p-card-8-accent: #555555;
    --nav-tab-active-surface: #F0F0F0;
    --nav-tab-inactive-surface: #CCCCCC;
    --nav-bottom-inactive-fg: #555555;
    --form-segmented-bg: #EBEBEB;
    --form-segmented-selected-bg: #333333;
    --form-segmented-selected-text: #FFFFFF;
    --weight-decrease-on-light: #333333;
    --weight-increase-on-light: #333333;
    --color-text-faint: #666666;
    --chart-axis-text: #777777;
    --chart-grid-line: #CCCCCC;
    --chart-main-line: #555555;
    --chart-trend-line: #777777;
}

html[data-theme="light"] {
    color-scheme: light;
    --p-yellow-100: #FFFCE8;
    --p-yellow-200: #FFF7D1;
    --p-yellow-300: #FFF3B7;
    --p-yellow-400: #FFE14E;
    --p-yellow-500: #FFE990;
    --p-blue-100: #E6F2F6;
    --p-blue-200: #9FC7D4;
    --p-blue-300: #1E6091;
    --p-blue-400: #184E77;
    --p-green-100: #DEF0C2;
    --p-green-200: #C8E99A;
    --p-green-300: #99D98C;
    --p-green-400: #4B7D44;
    --p-red-100: #FBE3DC;
    --p-red-200: #F08A7C;
    --p-red-300: #9B3F35;
    --p-amber-100: #FFF3B7;
    --p-amber-200: #FFE14E;
    --p-amber-300: #B88F00;
    --p-warm-100: #F5EDD7;
    --p-warm-200: #E9DCA8;
    --p-warm-500: #7B6B45;
    --p-neutral-0: #FFFFFF;
    --p-neutral-50: #FFFCE8;
    --p-neutral-100: #FFF7D1;
    --p-neutral-150: #F7EFCB;
    --p-neutral-200: #EFE3B6;
    --p-neutral-300: #BFAF78;
    --p-neutral-400: #8F8B7D;
    --p-neutral-500: #5F6B73;
    --p-neutral-600: #2E5F82;
    --p-neutral-700: #184E77;
    --p-neutral-800: #0E344F;
    --p-neutral-900: #062134;
    --p-card-1-bg: #1E6091;
    --p-card-1-text: #FFFCE8;
    --p-card-1-accent: #9FC7D4;
    --p-card-2-bg: #F08A7C;
    --p-card-2-text: #062134;
    --p-card-2-accent: #FBE3DC;
    --p-card-3-bg: #99D98C;
    --p-card-3-text: #184E77;
    --p-card-3-accent: #DEF0C2;
    --p-card-4-bg: #FFE14E;
    --p-card-4-text: #184E77;
    --p-card-4-accent: #FFE990;
    --p-card-5-bg: #5FBAA9;
    --p-card-5-text: #062134;
    --p-card-5-accent: #C9ECE5;
    --p-card-6-bg: #DEF0C2;
    --p-card-6-text: #184E77;
    --p-card-6-accent: #99D98C;
    --p-card-7-bg: #184E77;
    --p-card-7-text: #FFFCE8;
    --p-card-7-accent: #1E6091;
    --p-card-8-bg: #FFE990;
    --p-card-8-text: #184E77;
    --p-card-8-accent: #FFE14E;
    --nav-tab-active-surface: var(--p-yellow-200);
    --nav-tab-inactive-surface: var(--p-yellow-400);
    --nav-bottom-inactive-fg: var(--p-neutral-600);
    --btn-primary-bg: #184E77;
    --btn-primary-text: #FFFCEB;
    --btn-primary-pressed-bg: #0E344F;
    --hero-pill-primary-bg: #184E77;
    --hero-pill-text: #FFFCEB;
    --form-segmented-selected-text: var(--p-neutral-700);
    --weight-decrease-on-light: var(--p-green-400);
    --weight-increase-on-light: var(--p-red-300);
    --color-text-faint: var(--p-neutral-500);
    --chart-axis-text: var(--p-neutral-500);
    --chart-grid-line: var(--p-neutral-200);
    --chart-main-line: var(--p-blue-400);
    --chart-trend-line: var(--p-blue-300);
    --map-country-fill: var(--p-warm-100);
    --map-country-highlight-fill: var(--p-yellow-300);
    --map-route-stroke: var(--p-blue-400);
    --map-route-checkpoint: #34A0A4;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --p-yellow-100: #2A2410;
    --p-yellow-200: #1E1A0A;
    --p-yellow-300: #3A3218;
    --p-yellow-400: #FFC107;
    --p-yellow-500: #E6AD00;
    --p-blue-100: #0A1520;
    --p-blue-200: #1A3A52;
    --p-blue-300: #4A6FA5;
    --p-blue-400: #87CEEB;
    --p-green-100: #141E08;
    --p-green-200: #8FA840;
    --p-green-300: #C5D86D;
    --p-green-400: #F0F5DC;
    --p-red-100: #2A0E0E;
    --p-red-200: #DA5552;
    --p-red-300: #F08080;
    --p-amber-100: #2A2010;
    --p-amber-200: #F5C842;
    --p-amber-300: #FFD54F;
    --p-warm-100: #221E1A;
    --p-warm-200: #5A5040;
    --p-warm-500: #9A9080;
    --p-neutral-0: #3A3530;
    --p-neutral-50: #2A2520;
    --p-neutral-100: #221E1A;
    --p-neutral-150: #1A1612;
    --p-neutral-200: #141210;
    --p-neutral-300: #5A5040;
    --p-neutral-400: #7A7060;
    --p-neutral-500: #9A9080;
    --p-neutral-600: #BAB0A0;
    --p-neutral-700: #E8E0D0;
    --p-neutral-800: #F5F0E8;
    --p-neutral-900: #FFFFFF;
    --p-card-1-bg: #1A3A52;
    --p-card-1-text: #87CEEB;
    --p-card-1-accent: #0A1520;
    --p-card-2-bg: #3A1A1A;
    --p-card-2-text: #F08080;
    --p-card-2-accent: #2A0E0E;
    --p-card-3-bg: #1E2A10;
    --p-card-3-text: #C5D86D;
    --p-card-3-accent: #141E08;
    --p-card-4-bg: #3A3218;
    --p-card-4-text: #FFC107;
    --p-card-4-accent: #2A2410;
    --p-card-5-bg: #0A1520;
    --p-card-5-text: #87CEEB;
    --p-card-5-accent: #1A3A52;
    --p-card-6-bg: #141E08;
    --p-card-6-text: #C5D86D;
    --p-card-6-accent: #1E2A10;
    --p-card-7-bg: #E8E0D0;
    --p-card-7-text: #1A1612;
    --p-card-7-accent: #9A9080;
    --p-card-8-bg: #2A2010;
    --p-card-8-text: #F5C842;
    --p-card-8-accent: #3A3218;
    --nav-tab-active-surface: #2A2520;
    --nav-tab-inactive-surface: #1A1612;
    --nav-bottom-inactive-fg: var(--p-neutral-500);
    --form-segmented-selected-text: var(--p-neutral-700);
    --weight-decrease-on-light: var(--p-green-300);
    --weight-increase-on-light: var(--p-red-300);
    --color-text-faint: var(--p-neutral-500);
    --btn-primary-text: var(--p-yellow-100);
    --hero-pill-text: var(--p-yellow-100);
    --chart-axis-text: var(--p-neutral-500);
    --chart-grid-line: var(--p-neutral-0);
    --chart-main-line: var(--p-yellow-400);
    --chart-trend-line: var(--p-blue-400);
    --detail-highlight-row-bg: color-mix(in srgb, var(--p-neutral-0) 55%, transparent);
}