@media (prefers-color-scheme: light) {
  :root {
    --accent-1: #eeeff0;
    --accent-2: #e7eaf1;
    --accent-3: #dbe2f0;
    --accent-4: #cbd9f3;
    --accent-5: #b9cef5;
    --accent-6: #a3c0f6;
    --accent-7: #8aaded;
    --accent-8: #6893e5;
    --accent-9: #0c55e3;
    --accent-10: #0c4ac4;
    --accent-11: #0847c1;
    --accent-12: #132e62;
  
    --accent-a1: #275a8d05;
    --accent-a2: #0949dd0c;
    --accent-a3: #084fde19;
    --accent-a4: #0000ff14;
    --accent-a5: #0057ff3b;
    --accent-a6: #0051ff4f;
    --accent-a7: #0152e66e;
    --accent-a8: #014ddc92;
    --accent-a9: #014ee3f3;
    --accent-a10: #0142c2f3;
    --accent-a11: #0041bff7;
    --accent-a12: #001d56eb;
  
    --accent-contrast: #fff;
    --accent-surface: #e5e9f1cc;
    --accent-indicator: #0c55e3;
    --accent-track: #0c55e3;

    --gray-1: #eceef2;
    --gray-2: #e6ebf1;
    --gray-3: #dae1eb;
    --gray-4: #cfd8e6;
    --gray-5: #c5d0e2;
    --gray-6: #bbc8dd;
    --gray-7: #acbdd7;
    --gray-8: #93a9cd;
    --gray-9: #667c9e;
    --gray-10: #5d7192;
    --gray-11: #44546e;
    --gray-12: #162030;
  
    --gray-a1: #1861f307;
    --gray-a2: #0769df0d;
    --gray-a3: #074cae1a;
    --gray-a4: #013fa025;
    --gray-a5: #033e9e30;
    --gray-a6: #013a963a;
    --gray-a7: #013c954a;
    --gray-a8: #033a9565;
    --gray-a9: #00266194;
    --gray-a10: #0222579e;
    --gray-a11: #01183cb8;
    --gray-a12: #000b1de8;
  
    --gray-contrast: #FFFFFF;
    --gray-surface: #ffffffcc;
    --gray-indicator: #667c9e;
    --gray-track: #667c9e;
    
    --background: #FFFFFF;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-1: #0c111c;
    --accent-2: #111725;
    --accent-3: #172448;
    --accent-4: #1d2e61;
    --accent-5: #243974;
    --accent-6: #2d4484;
    --accent-7: #375098;
    --accent-8: #405eb2;
    --accent-9: #3d63dd;
    --accent-10: #3f5cb0;
    --accent-11: #93b4ff;
    --accent-12: #d5e2ff;
  
    --accent-a1: #0012fb0c;
    --accent-a2: #1156f916;
    --accent-a3: #2b64ff3b;
    --accent-a4: #3567ff56;
    --accent-a5: #3f71fd6b;
    --accent-a6: #4b7afd7c;
    --accent-a7: #5480ff91;
    --accent-a8: #5783ffad;
    --accent-a9: #4571ffdb;
    --accent-a10: #5580feab;
    --accent-a11: #93b4ff;
    --accent-a12: #d5e2ff;
  
    --accent-contrast: #fff;
    --accent-surface: #111d3980;
    --accent-indicator: #3d63dd;
    --accent-track: #3d63dd;

    --gray-1: #111113;
    --gray-2: #19191b;
    --gray-3: #222325;
    --gray-4: #292a2e;
    --gray-5: #303136;
    --gray-6: #393a40;
    --gray-7: #46484f;
    --gray-8: #5f606a;
    --gray-9: #6c6e79;
    --gray-10: #797b86;
    --gray-11: #b2b3bd;
    --gray-12: #eeeef0;
  
    --gray-a1: #1111bb03;
    --gray-a2: #cbcbf90b;
    --gray-a3: #d6e2f916;
    --gray-a4: #d1d9f920;
    --gray-a5: #d7ddfd28;
    --gray-a6: #d9defc33;
    --gray-a7: #dae2fd43;
    --gray-a8: #e0e3fd60;
    --gray-a9: #e0e4fd70;
    --gray-a10: #e3e7fd7e;
    --gray-a11: #eff0feb9;
    --gray-a12: #fdfdffef;
  
    --gray-contrast: #FFFFFF;
    --gray-surface: rgba(0, 0, 0, 0.05);
    --gray-indicator: #6c6e79;
    --gray-track: #6c6e79;

    --background: var(--accent-1);
  }
}