:root {
  --basics-white: #ffffff;

  --gray-50: #f9f9f9;
  --gray-100: #f3f3f3;
  --gray-200: #ebebeb;
  --gray-300: #d4d4d4;
  --gray-400: #bebebe;
  --gray-500: #989898;
  --gray-600: #727272;
  --gray-700: #595959;
  --gray-800: #424242;
  --gray-900: #333333;
  --gray-1000: #272727;
  --gray-1100: #1c1c1c;
  --gray-1200: #131313;
  --gray-150: #dfe5e8;
  --gray-250: #eaeff1;

  --grayscale-50: #f9f9f9;
  --grayscale-100: #f3f3f3;
  --grayscale-200: #ebebeb;
  --grayscale-300: #d4d4d4;
  --grayscale-400: #bebebe;
  --grayscale-500: #989898;
  --grayscale-600: #727272;
  --grayscale-700: #595959;
  --grayscale-800: #424242;
  --grayscale-900: #333333;
  --grayscale-1000: #272727;
  --grayscale-1100: #1c1c1c;
  --grayscale-1200: #131313;

  --crimson-50: #fef6f8;
  --crimson-100: #fdeff3;
  --crimson-200: #fce6eb;
  --crimson-300: #f9c7d4;
  --crimson-400: #f3aabd;
  --crimson-500: #e37692;
  --crimson-600: #d0355d;
  --crimson-700: #b0133a;
  --crimson-800: #840e2c;
  --crimson-900: #690b23;
  --crimson-1000: #52091b;
  --crimson-1100: #3d0614;
  --crimson-1200: #2b040e;

  --jll-red-50: #fff8f8;
  --jll-red-100: #ffeeef;
  --jll-red-200: #ffe5e6;
  --jll-red-300: #ffc5c9;
  --jll-red-400: #ffa6ac;
  --jll-red-500: #ff636d;
  --jll-red-600: #e40917;
  --jll-red-700: #b50510;
  --jll-red-800: #89040c;
  --jll-red-900: #6e030a;
  --jll-red-1000: #570208;
  --jll-red-1100: #400206;
  --jll-red-1200: #2f0104;
  --jll-red-1300: #ff4136;

  --orange-50: #fff8f4;
  --orange-100: #ffefe6;
  --orange-200: #ffe6d8;
  --orange-300: #ffc8a9;
  --orange-400: #fcab7c;
  --orange-500: #f1742d;
  --orange-600: #c64901;
  --orange-700: #9c3901;
  --orange-800: #742b00;
  --orange-900: #5c2200;
  --orange-1000: #471a00;
  --orange-1100: #331300;
  --orange-1200: #230d00;
  --orange-1300: #c14701;


  --sand-50: #fcf7f4;
  --sand-100: #f9f2ec;
  --sand-200: #f5e8de;
  --sand-300: #e9d0bb;
  --sand-400: #d1b9a7;
  --sand-500: #a79586;
  --sand-600: #7d6f64;
  --sand-700: #62574f;
  --sand-800: #48403a;
  --sand-900: #39322d;
  --sand-1000: #2b2723;
  --sand-1100: #1f1b19;
  --sand-1200: #151211;

  --amber-50: #fff9da;
  --amber-100: #fff4bc;
  --amber-200: #ffec85;
  --amber-300: #ffce1b;
  --amber-400: #f3b300;
  --amber-500: #c58f00;
  --amber-600: #946b00;
  --amber-700: #745300;
  --amber-800: #563e00;
  --amber-900: #443000;
  --amber-1000: #342500;
  --amber-1100: #251b00;
  --amber-1200: #191200;

  --lima-green-50: #f0fce5;
  --lima-green-100: #e5f9d1;
  --lima-green-200: #d2f5b0;
  --lima-green-300: #9ce950;
  --lima-green-400: #75d516;
  --lima-green-500: #61aa18;
  --lima-green-600: #4c7f1a;
  --lima-green-700: #3d6318;
  --lima-green-800: #2e4912;
  --lima-green-900: #24390e;
  --lima-green-1000: #1c2c0b;
  --lima-green-1100: #141f08;
  --lima-green-1200: #0d1505;
  --lima-green-1300: #2ecc40;

  --forest-50: #f6faf6;
  --forest-100: #edf4ec;
  --forest-200: #e2ede2;
  --forest-300: #c4dac4;
  --forest-400: #a5c7a6;
  --forest-500: #70a470;
  --forest-600: #4d7d4f;
  --forest-700: #3b623b;
  --forest-800: #2c482c;
  --forest-900: #223922;
  --forest-1000: #1a2c1a;
  --forest-1100: #131f13;
  --forest-1200: #0d150d;

  --salem-50: #ebfdf4;
  --salem-100: #d7fbe9;
  --salem-200: #bdf8db;
  --salem-300: #52eea1;
  --salem-400: #10d976;
  --salem-500: #0eae5f;
  --salem-600: #0c8348;
  --salem-700: #0a6638;
  --salem-800: #074c2a;
  --salem-900: #063c21;
  --salem-1000: #042e19;
  --salem-1100: #032112;
  --salem-1200: #02170c;

  --watercourse-50: #ebfdf8;
  --watercourse-100: #d6faf1;
  --watercourse-200: #bbf7e8;
  --watercourse-300: #55ecc6;
  --watercourse-400: #0bd7a4;
  --watercourse-500: #08ac83;
  --watercourse-600: #058262;
  --watercourse-700: #03654d;
  --watercourse-800: #034b39;
  --watercourse-900: #023b2d;
  --watercourse-1000: #022e23;
  --watercourse-1100: #012119;
  --watercourse-1200: #011611;

  --atoll-50: #eafcfc;
  --atoll-100: #d6fafa;
  --atoll-200: #bbf6f6;
  --atoll-300: #54e9e9;
  --atoll-400: #0bd3d3;
  --atoll-500: #0aa9a9;
  --atoll-600: #097f7f;
  --atoll-700: #086464;
  --atoll-800: #064a4a;
  --atoll-900: #053a3a;
  --atoll-1000: #042d2d;
  --atoll-1100: #032020;
  --atoll-1200: #021616;

  --glacier-50: #f6f9fa;
  --glacier-100: #eef3f5;
  --glacier-200: #e5ebed;
  --glacier-300: #ced5d8;
  --glacier-400: #b6bfc2;
  --glacier-500: #8f9a9f;
  --glacier-600: #66747a;
  --glacier-700: #4c5b62;
  --glacier-800: #33454b;
  --glacier-900: #24373e;
  --glacier-1000: #172a32;
  --glacier-1100: #0a1e26;
  --glacier-1200: #01151d;
  --glacier-1300: #ced6d8;

  --ocean-50: #f1fafd;
  --ocean-100: #e4f6fb;
  --ocean-200: #d3f0f8;
  --ocean-300: #aedcea;
  --ocean-400: #95c6d5;
  --ocean-500: #6ba0b1;
  --ocean-600: #40798d;
  --ocean-700: #236075;
  --ocean-800: #08475e;
  --ocean-900: #00384d;
  --ocean-1000: #002b3b;
  --ocean-1100: #001f2b;
  --ocean-1200: #00151d;

  --bahama-50: #edfbff;
  --bahama-100: #e0f7ff;
  --bahama-200: #c9f2ff;
  --bahama-300: #86e1ff;
  --bahama-400: #57cbf2;
  --bahama-500: #32a4ca;
  --bahama-600: #0c7ba1;
  --bahama-700: #006082;
  --bahama-800: #004760;
  --bahama-900: #00384c;
  --bahama-1000: #002b3a;
  --bahama-1100: #001f2a;
  --bahama-1200: #00151d;

  --science-50: #f3f9ff;
  --science-100: #e8f3ff;
  --science-200: #dceeff;
  --science-300: #b1d8ff;
  --science-400: #8cc3f9;
  --science-500: #549ce5;
  --science-600: #1572d0;
  --science-700: #0057af;
  --science-800: #004183;
  --science-900: #003367;
  --science-1000: #002850;
  --science-1100: #001d39;
  --science-1200: #001427;

  --royal-50: #f7f8fe;
  --royal-100: #eef2fd;
  --royal-200: #e6ebfc;
  --royal-300: #c8d3f8;
  --royal-400: #aabcf4;
  --royal-500: #7894ed;
  --royal-600: #4069e5;
  --royal-700: #274ec7;
  --royal-800: #1d3a94;
  --royal-900: #172e74;
  --royal-1000: #12235a;
  --royal-1100: #0d1941;
  --royal-1200: #09112c;

  --lilac-50: #faf7fe;
  --lilac-100: #f6effd;
  --lilac-200: #f1e6fc;
  --lilac-300: #e2cbf8;
  --lilac-400: #d1b0f3;
  --lilac-500: #b482e6;
  --lilac-600: #9350d7;
  --lilac-700: #7a27cc;
  --lilac-800: #5c15a3;
  --lilac-900: #491181;
  --lilac-1000: #390d64;
  --lilac-1100: #290a49;
  --lilac-1200: #1d0733;

  --violet-50: #fcf6fe;
  --violet-100: #faeffe;
  --violet-200: #f6e4fd;
  --violet-300: #edc7fb;
  --violet-400: #e2a9f7;
  --violet-500: #cc74eb;
  --violet-600: #b230dd;
  --violet-700: #910ebd;
  --violet-800: #6d0b8e;
  --violet-900: #570871;
  --violet-1000: #440758;
  --violet-1100: #320541;
  --violet-1200: #24032f;

  --lavender-50: #faf8fa;
  --lavender-100: #f6f0f5;
  --lavender-200: #f1e9f0;
  --lavender-300: #e0cfe0;
  --lavender-400: #d1b6d0;
  --lavender-500: #b48bb4;
  --lavender-600: #955f95;
  --lavender-700: #774977;
  --lavender-800: #573757;
  --lavender-900: #452a45;
  --lavender-1000: #352035;
  --lavender-1100: #261726;
  --lavender-1200: #191018;

  --magenta-50: #fff6fd;
  --magenta-100: #ffedfb;
  --magenta-200: #ffe4f8;
  --magenta-300: #fcc3ed;
  --magenta-400: #f4a4e0;
  --magenta-500: #e869c8;
  --magenta-600: #cd23a3;
  --magenta-700: #a70780;
  --magenta-800: #800061;
  --magenta-900: #66004d;
  --magenta-1000: #51003d;
  --magenta-1100: #3c002d;
  --magenta-1200: #2c0021;

  --pale-sky-blue-100: #edf3f4;
  --light-periwinkle-100: #eaeaf0;
  --slate-blue: #637177;
  --soft-gray-blue-200: #b6c0c2;
  --dark-navy-900: #01151c;
  --deep-sky-blue-700: #09779e;
  --blue-1300: #0074d9;

  --neutral-1300: #6c757d;

  --surface-base-default: var(--basics-white);
  --surface-base-secondary: var(--glacier-100);
  --surface-base-secondary-subdued: var(--glacier-50);
  --surface-base-secondary-alpha: rgba(30, 105, 118, 0.08);
  --surface-base-secondary-alpha-darker: rgba(30, 105, 118, 0.2);
  --surface-base-alternative: var(--sand-100);
  --surface-base-persistent: var(--glacier-1200);
  --surface-base-reversed-alpha: var(--glacier-1300);
  --surface-base-reversed: var(--glacier-1100);
  --surface-accent-default: var(--glacier-1200);
  --surface-accent-secondary: var(--glacier-200);
  --surface-interaction-default: var(--bahama-600);
  --surface-interaction-subdued: var(--bahama-100);
  --surface-interaction-active: rgba(9, 119, 158, 0.06);
  --tat-sidebar-link: rgba(9, 119, 158, 0.2);
  --surface-interaction-active-secondary: rgba(255, 255, 255, 0.85);
  --surface-interaction-subdued-alpha: #0fbfff21;
  --surface-interaction-idle: var(--glacier-700);
  --surface-rag-success: var(--salem-600);
  --surface-rag-success--subdued: var(--salem-100);
  --surface-rag-success-subdued-alpha: rgba(0, 255, 119, 0.17);
  --surface-rag-warning: var(--orange-600);
  --surface-rag-warning-subdued-alpha: rgba(255, 97, 5, 0.1);
  --surface-rag-warning--subdued: var(--orange-100);
  --surface-rag-danger: var(--crimson-600);
  --surface-rag-danger--subdued: var(--crimson-100);
  --surface-rag-danger-subdued-alpha: rgba(255, 26, 83, 0.07);
  --surface-utilities-skeleton: var(--glacier-300);
  --surface-utilities-disabled: var(--grayscale-100);
  --surface-utilities-overlays-reversed-pressed: rgba(255, 255, 255, 0.1);
  --surface-utilities-overlays-reversed-hover: rgba(255, 255, 255, 0.05);
  --surface-utilities-overlays-pressed: rgba(0, 21, 29, 0.1);
  --surface-utilities-overlays-hover: rgba(0, 21, 29, 0.05);
  --surface-utilities-overlays-off: rgba(255, 255, 255, 0);
  --surface-utilities-overlays-backdrop: rgba(51, 68, 74, 0.3);
  --surface-utilities-overlays-neutral-pressed: rgba(0, 0, 0, 0.11);
  --surface-utilities-overlays-neutral-hover: rgba(0, 0, 0, 0.07);
  --text-base-default: var(--glacier-1200);
  --text-base-subdued: var(--glacier-600);
  --text-base-reversed: var(--basics-white);
  --text-base-reversed-subdued: var(--glacier-400);
  --text-base-reversed-persistent: var(--basics-white);
  --text-interaction-default: var(--bahama-600);
  --text-interaction-reversed: var(--bahama-500);
  --text-rag-success: var(--salem-600);
  --text-rag-success-accessible: var(--salem-700);
  --text-rag-success-accessible-alpha: rgba(0, 255, 119, 0.17);
  --text-rag-warning: var(--orange-600);
  --text-rag-warning-accessible-alpha: var(--orange-1300);
  --text-rag-warning-accessible: var(--orange-700);
  --text-rag-danger: var(--crimson-600);
  --text-rag-danger-accessible: var(--crimson-700);
  --text-utilities-placeholder: var(--glacier-600);
  --text-utilities-disabled: var(--glacier-500);
  --icon-base-default: var(--text-base-default);
  --icon-base-subdued: var(--text-base-subdued);
  --icon-base-reversed: var(--basics-white);
  --icon-base-reversed-subdued: var(--glacier-400);
  --icon-base-reversed-persistent: var(--basics-white);
  --icon-interaction-default: var(--text-interaction-default);
  --icon-interaction-reversed: var(--text-interaction-reversed);
  --icon-rag-success: var(--text-rag-success);
  --icon-rag-success-accessible: var(--text-rag-success-accessible);
  --icon-rag-warning: var(--text-rag-warning);
  --icon-rag-warning-accessible: var(--text-rag-warning-accessible);
  --icon-rag-danger: var(--text-rag-danger);
  --icon-rag-danger-accessible: var(--text-rag-danger-accessible);
  --stroke-default: var(--glacier-300);
  --stroke-subdued: var(--glacier-200);
  --stroke-active: var(--glacier-1200);
  --stroke-interaction: var(--bahama-600);
  --stroke-interaction-subdued: var(--ocean-400);
  --stroke-success: var(--salem-600);
  --stroke-warning: var(--orange-600);
  --stroke-danger: var(--crimson-700);
  --stroke-on-picture: var(--basics-white);
  --stroke-disabled: var(--grayscale-400);
  --brand-jll-red: var(--jll-red-600);
  --brand-jll-letters: var(--basics-black);
  --tonal-sand-default: var(--sand-700);
  --tonal-sand-subdued: var(--sand-100);
  --tonal-lima-default: var(--lima-green-700);
  --tonal-lima-subdued: var(--lima-green-100);
  --tonal-amber-default: var(--amber-700);
  --tonal-amber-subdued: var(--amber-100);
  --tonal-watercourse-default: var(--watercourse-700);
  --tonal-watercourse-subdued: var(--watercourse-200);
  --tonal-atoll-default: var(--atoll-700);
  --tonal-atoll-subdued: var(--atoll-200);
  --tonal-science-default: var(--science-700);
  --tonal-science-subdued: var(--science-200);
  --tonal-royal-default: var(--royal-700);
  --tonal-royal-subdued: var(--royal-200);
  --tonal-lilac-default: var(--lilac-700);
  --tonal-lilac-subdued: var(--lilac-200);
  --tonal-violet-default: var(--violet-700);
  --tonal-violet-subdued: var(--violet-200);
  --tonal-magenta-default: var(--magenta-700);
  --tonal-magenta-subdued: var(--magenta-200);

  --file-folder: var(--blue-1300);
  --file-pdf: var(--jll-red-1300);
  --file-audio: var(--blue-1300);
  --file-video: var(--lima-green-1300);
  --file-image: var(--orange-1300);
  --file-default: var(--neutral-1300);
}

:host(.dark),
.dark * {
  --surface-base-default: var(--glacier-1100);
  --surface-base-secondary: var(--glacier-1000);
  --surface-base-secondary-subdued: rgba(23, 42, 50, 0.41);
  --surface-base-secondary-alpha: rgba(227, 229, 238, 0.06);
  --surface-base-alternative: var(--bahama-1100);
  --surface-base-persistent: var(--glacier-1200);
  --surface-base-reversed: var(--basics-white);
  --surface-accent-default: var(--ocean-800);
  --surface-accent-secondary: var(--glacier-900);
  --surface-interaction-default: var(--bahama-500);
  --surface-interaction-subdued: var(--bahama-1100);
  --surface-interaction-subdued-alpha: #002b3a;
  --surface-interaction-idle: var(--glacier-700);
  --surface-rag-success: var(--salem-1200);
  --surface-rag-success--subdued: var(--salem-1200);
  --surface-rag-warning: var(--orange-1200);
  --surface-rag-warning--subdued: var(--orange-1200);
  --surface-rag-warning-subdued-alpha: #230d00;
  --surface-rag-danger: var(--crimson-1200);
  --surface-rag-danger-subdued: var(--crimson-1200);
  --surface-rag-danger-subdued-alpha: #2b040e;
  --surface-utilities-skeleton: var(--glacier-800);
  --surface-utilities-disabled: var(--grayscale-1100);
  --surface-utilities-overlays-reversed-pressed: rgba(0, 21, 29, 0.1);
  --surface-utilities-overlays-reversed-hover: rgba(0, 21, 29, 0.04);
  --surface-utilities-overlays-pressed: rgba(255, 255, 255, 0.1);
  --surface-utilities-overlays-hover: rgba(255, 255, 255, 0.05);
  --surface-utilities-overlays-off: rgba(255, 255, 255, 0);
  --surface-utilities-overlays-backdrop: rgba(0, 21, 29, 0.75);
  --text-base-default: var(--basics-white);
  --text-base-subdued: var(--glacier-400);
  --text-base-reversed: var(--glacier-1200);
  --text-base-reversed-subdued: var(--glacier-400);
  --text-base-reversed-persistent: var(--basics-white);
  --text-interaction-default: var(--bahama-500);
  --text-interaction-reversed: var(--bahama-600);
  --text-rag-success: var(--salem-400);
  --text-rag-success-accessible: var(--salem-400);
  --text-rag-success-accessible-alpha: #02170c;
  --text-rag-warning: var(--orange-400);
  --text-rag-warning-accessible: var(--orange-400);
  --text-rag-danger: var(--crimson-400);
  --text-rag-danger-accessible: var(--crimson-400);
  --text-utilities-placeholder: var(--glacier-500);
  --text-utilities-disabled: var(--glacier-500);
  --icon-base-default: var(--text-base-default);
  --icon-base-subdued: var(--text-base-subdued);
  --icon-base-reversed: var(--glacier-1200);
  --icon-base-reversed-subdued: var(--glacier-400);
  --icon-base-reversed-persistent: var(--basics-white);
  --icon-interaction-default: var(--text-interaction-default);
  --icon-interaction-reversed: var(--text-interaction-default);
  --icon-rag-success: var(--text-rag-success);
  --icon-rag-success-accessible: var(--text-rag-success-accessible);
  --icon-rag-warning: var(--text-rag-warning);
  --icon-rag-warning-accessible: var(--text-rag-warning-accessible);
  --icon-rag-danger: var(--text-rag-danger);
  --icon-rag-danger-accessible: var(--text-rag-danger-accessible);
  --stroke-default: var(--glacier-800);
  --stroke-subdued: var(--glacier-900);
  --stroke-active: var(--basics-white);
  --stroke-interaction: var(--bahama-500);
  --stroke-success: var(--salem-400);
  --stroke-warning: var(--orange-400);
  --stroke-danger: var(--crimson-500);
  --stroke-on-picture: var(--basics-white);
  --stroke-disabled: var(--grayscale-800);
  --brand-jll-red: var(--jll-red-600);
  --brand-jll-letters: var(--basics-white);
  --tonal-sand-default: var(--sand-200);
  --tonal-sand-subdued: var(--sand-1200);
  --tonal-lima-default: var(--lima-green-200);
  --tonal-lima-subdued: var(--lima-green-1200);
  --tonal-amber-default: var(--amber-50);
  --tonal-amber-subdued: var(--amber-1200);
  --tonal-watercourse-default: var(--watercourse-100);
  --tonal-watercourse-subdued: var(--watercourse-1200);
  --tonal-atoll-default: var(--atoll-100);
  --tonal-atoll-subdued: var(--atoll-1200);
  --tonal-science-default: var(--science-100);
  --tonal-science-subdued: var(--science-1200);
  --tonal-royal-default: var(--royal-200);
  --tonal-royal-subdued: var(--royal-1200);
  --tonal-lilac-default: var(--lilac-100);
  --tonal-lilac-subdued: var(--lilac-1200);
  --tonal-violet-default: var(--violet-100);
  --tonal-violet-subdued: var(--violet-1200);
  --tonal-magenta-default: var(--magenta-100);
  --tonal-magenta-subdued: var(--magenta-1200);
}

/* Total scrollbar width */
::-webkit-scrollbar {
  width: 4px;
}

/* Scrollbar track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/* Scrollbar handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* Scrollbar handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Optional: Add a corner to scrollbar if both horizontal & vertical bars are present */
::-webkit-scrollbar-corner {
  background: #f1f1f1;
}