/*
 * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
 * SPDX-License-Identifier: Apache-2.0
 */

/* @import "tailwindcss" source("../src"); */

:root,
:host {
  /* Global definitions THAT WE DO NOT WANT TO GENERATE CLASSES FOR go here: */
  --grid-columns: 12;
  --grid-row-margin-x: -0.5rem;
  --grid-column-flex-grow: 0;
  --grid-column-flex-shrink: 1;
  --grid-column-flex-basis: auto;
  --grid-column-default-width: 8.333333%;

  --color-white: rgb(255, 255, 255);
  --color-black: rgb(0, 0, 0);

  --color-sap-grey-1: rgb(255, 255, 255);
  --color-sap-grey-2: rgb(225, 225, 225);
  --color-sap-grey-3: rgb(204, 204, 204);
  --color-sap-grey-4: rgb(153, 153, 153);
  --color-sap-grey-5: rgb(127, 127, 127);
  --color-sap-grey-6: rgb(102, 102, 102);
  --color-sap-grey-7: rgb(75, 75, 75);
  --color-sap-grey-8: rgb(0, 0, 0);

  --color-sap-blue-1: rgb(15, 170, 255);
  --color-sap-blue-2: rgb(0, 143, 211);
  --color-sap-blue-3: rgb(0, 118, 203);
  --color-sap-blue-4: rgb(15, 70, 167);
  --color-sap-blue-5: rgb(0, 50, 131);
  --color-sap-blue-6: rgb(0, 25, 90);

  --color-sap-gold: rgb(240, 171, 0);

  --color-sap-purple-1: rgb(220, 0, 150);
  --color-sap-purple-2: rgb(190, 0, 140);
  --color-sap-purple-3: rgb(151, 10, 130);
  --color-sap-purple-4: rgb(118, 10, 133);
  --color-sap-purple-5: rgb(69, 21, 126);
  --color-sap-purple-6: rgb(60, 20, 100);

  --color-sap-green-1: rgb(188, 220, 80);
  --color-sap-green-2: rgb(147, 201, 57);
  --color-sap-green-3: rgb(79, 184, 28);
  --color-sap-green-4: rgb(52, 139, 38);
  --color-sap-green-5: rgb(36, 114, 48);
  --color-sap-green-6: rgb(15, 75, 60);

  --color-sap-orange-1: rgb(255, 175, 0);
  --color-sap-orange-2: rgb(250, 145, 0);
  --color-sap-orange-3: rgb(235, 115, 0);
  --color-sap-orange-4: rgb(227, 85, 0);
  --color-sap-orange-5: rgb(208, 69, 18);
  --color-sap-orange-6: rgb(188, 54, 24);

  --color-juno-grey-blue-1: rgb(64, 70, 75);
  --color-juno-grey-blue-2: rgb(48, 54, 60);
  --color-juno-grey-blue-3: rgb(41, 47, 54);
  --color-juno-grey-blue-4: rgb(38, 44, 51);
  --color-juno-grey-blue-5: rgb(36, 42, 49);
  --color-juno-grey-blue-6: rgb(31, 38, 45);
  --color-juno-grey-blue-7: rgb(28, 35, 42);
  --color-juno-grey-blue-8: rgb(23, 30, 37);
  --color-juno-grey-blue-9: rgb(18, 25, 32);
  --color-juno-grey-blue-10: rgb(13, 20, 28);
  --color-juno-grey-blue-11: rgb(0, 8, 16);

  --color-juno-grey-light-1: rgb(249, 249, 249);
  --color-juno-grey-light-2: rgb(247, 247, 247);
  --color-juno-grey-light-3: rgb(244, 244, 244);
  --color-juno-grey-light-4: rgb(241, 241, 241);
  --color-juno-grey-light-5: rgb(238, 238, 238);
  --color-juno-grey-light-6: rgb(235, 235, 235);
  --color-juno-grey-light-7: rgb(233, 233, 233);
  --color-juno-grey-light-8: rgb(230, 230, 230);
  --color-juno-grey-light-9: rgb(227, 227, 227);
  --color-juno-grey-light-10: rgb(215, 215, 215);

  --color-juno-blue-1: rgb(203, 232, 247);
  --color-juno-blue-2: rgb(165, 211, 234);
  --color-juno-blue-3: rgb(137, 201, 232);
  --color-juno-blue-4: rgb(67, 162, 208);
  --color-juno-blue-5: rgb(0, 125, 184);
  --color-juno-blue-6: rgb(30, 106, 146);
  --color-juno-blue-7: rgb(10, 103, 153);
  --color-juno-blue-8: rgb(7, 85, 128);
  --color-juno-blue-9: rgb(5, 70, 105);
  --color-juno-blue-10: rgb(3, 55, 84);

  --color-juno-turquoise-1: rgb(197, 247, 255);
  --color-juno-turquoise-2: rgb(132, 241, 255);
  --color-juno-turquoise-3: rgb(25, 232, 250);
  --color-juno-turquoise-4: rgb(22, 217, 234);
  --color-juno-turquoise-5: rgb(21, 208, 224);
  --color-juno-turquoise-6: rgb(15, 167, 180);
  --color-juno-turquoise-7: rgb(9, 133, 144);
  --color-juno-turquoise-8: rgb(5, 100, 109);
  --color-juno-turquoise-9: rgb(2, 69, 75);
  --color-juno-turquoise-10: rgb(1, 41, 4);

  --color-juno-primary-blue-1: rgb(15, 170, 255);
  --color-juno-primary-blue-2: rgb(0, 143, 211);
  --color-juno-primary-blue-3: rgb(0, 118, 203);
  --color-juno-primary-blue-4: rgb(15, 70, 167);
  --color-juno-primary-blue-5: rgb(0, 50, 131);
  --color-juno-primary-blue-6: rgb(0, 25, 90);
}

@theme inline {
  /* Here we define all the classes like bg-, text-, border[--whatever] that we need Tailwind to generate: */

  /* Reset Tailwind default colors */
  --color-*: initial;

  /* Global primitive colors we want to expose as classes. 
  
  Note these are plain duplicates from the global :root, :host scope that we want to have available globally as variables, but also as classes for straight-away use. 
  
  Also note that these, as they are duplicates, need changing in both scopes should we ever want to change them. 
  */
  --color-white: rgb(255, 255, 255);
  --color-black: rgb(0, 0, 0);

  --color-sap-grey-1: rgb(255, 255, 255);
  --color-sap-grey-2: rgb(225, 225, 225);
  --color-sap-grey-3: rgb(204, 204, 204);
  --color-sap-grey-4: rgb(153, 153, 153);
  --color-sap-grey-5: rgb(127, 127, 127);
  --color-sap-grey-6: rgb(102, 102, 102);
  --color-sap-grey-7: rgb(75, 75, 75);
  --color-sap-grey-8: rgb(0, 0, 0);

  --color-sap-blue-1: rgb(15, 170, 255);
  --color-sap-blue-2: rgb(0, 143, 211);
  --color-sap-blue-3: rgb(0, 118, 203);
  --color-sap-blue-4: rgb(15, 70, 167);
  --color-sap-blue-5: rgb(0, 50, 131);
  --color-sap-blue-6: rgb(0, 25, 90);

  --color-sap-gold: rgb(240, 171, 0);

  --color-sap-purple-1: rgb(220, 0, 150);
  --color-sap-purple-2: rgb(190, 0, 140);
  --color-sap-purple-3: rgb(151, 10, 130);
  --color-sap-purple-4: rgb(118, 10, 133);
  --color-sap-purple-5: rgb(69, 21, 126);
  --color-sap-purple-6: rgb(60, 20, 100);

  --color-sap-green-1: rgb(188, 220, 80);
  --color-sap-green-2: rgb(147, 201, 57);
  --color-sap-green-3: rgb(79, 184, 28);
  --color-sap-green-4: rgb(52, 139, 38);
  --color-sap-green-5: rgb(36, 114, 48);
  --color-sap-green-6: rgb(15, 75, 60);

  --color-sap-orange-1: rgb(255, 175, 0);
  --color-sap-orange-2: rgb(250, 145, 0);
  --color-sap-orange-3: rgb(235, 115, 0);
  --color-sap-orange-4: rgb(227, 85, 0);
  --color-sap-orange-5: rgb(208, 69, 18);
  --color-sap-orange-6: rgb(188, 54, 24);

  --color-juno-grey-blue-1: rgb(64, 70, 75);
  --color-juno-grey-blue-2: rgb(48, 54, 60);
  --color-juno-grey-blue-3: rgb(41, 47, 54);
  --color-juno-grey-blue-4: rgb(38, 44, 51);
  --color-juno-grey-blue-5: rgb(36, 42, 49);
  --color-juno-grey-blue-6: rgb(31, 38, 45);
  --color-juno-grey-blue-7: rgb(28, 35, 42);
  --color-juno-grey-blue-8: rgb(23, 30, 37);
  --color-juno-grey-blue-9: rgb(18, 25, 32);
  --color-juno-grey-blue-10: rgb(13, 20, 28);
  --color-juno-grey-blue-11: rgb(0, 8, 16);

  --color-juno-grey-light-1: rgb(249, 249, 249);
  --color-juno-grey-light-2: rgb(247, 247, 247);
  --color-juno-grey-light-3: rgb(244, 244, 244);
  --color-juno-grey-light-4: rgb(241, 241, 241);
  --color-juno-grey-light-5: rgb(238, 238, 238);
  --color-juno-grey-light-6: rgb(235, 235, 235);
  --color-juno-grey-light-7: rgb(233, 233, 233);
  --color-juno-grey-light-8: rgb(230, 230, 230);
  --color-juno-grey-light-9: rgb(227, 227, 227);
  --color-juno-grey-light-10: rgb(215, 215, 215);

  --color-juno-blue-1: rgb(203, 232, 247);
  --color-juno-blue-2: rgb(165, 211, 234);
  --color-juno-blue-3: rgb(137, 201, 232);
  --color-juno-blue-4: rgb(67, 162, 208);
  --color-juno-blue-5: rgb(0, 125, 184);
  --color-juno-blue-6: rgb(30, 106, 146);
  --color-juno-blue-7: rgb(10, 103, 153);
  --color-juno-blue-8: rgb(7, 85, 128);
  --color-juno-blue-9: rgb(5, 70, 105);
  --color-juno-blue-10: rgb(3, 55, 84);

  --color-juno-turquoise-1: rgb(197, 247, 255);
  --color-juno-turquoise-2: rgb(132, 241, 255);
  --color-juno-turquoise-3: rgb(25, 232, 250);
  --color-juno-turquoise-4: rgb(22, 217, 234);
  --color-juno-turquoise-5: rgb(21, 208, 224);
  --color-juno-turquoise-6: rgb(15, 167, 180);
  --color-juno-turquoise-7: rgb(9, 133, 144);
  --color-juno-turquoise-8: rgb(5, 100, 109);
  --color-juno-turquoise-9: rgb(2, 69, 75);
  --color-juno-turquoise-10: rgb(1, 41, 4);

  --color-juno-primary-blue-1: rgb(15, 170, 255);
  --color-juno-primary-blue-2: rgb(0, 143, 211);
  --color-juno-primary-blue-3: rgb(0, 118, 203);
  --color-juno-primary-blue-4: rgb(15, 70, 167);
  --color-juno-primary-blue-5: rgb(0, 50, 131);
  --color-juno-primary-blue-6: rgb(0, 25, 90);

  /* End global primitive colors */

  --font-*: initial;
  --font-sans: "IBM Plex Sans", ui-sans-serif, Arial, system-ui, sans-serif;
  --font-condensed: "IBM Plex Sans Condensed", ui-sans-serif, Arial, system-ui, sans-serif;
  --font-serif: "IBM Plex Serif", ui-serif, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --color-current: currentColor;

  --color-juno-grey-blue: var(--color-juno-grey-blue-11);
  --color-juno-blue: var(--color-juno-blue-5);
  --color-juno-turquoise: var(--color-juno-turquoise-5);
  --color-juno-grey-light: var(--color-juno-grey-light-1);
  --color-sap-grey: var(--color-sap-grey-8);
  --color-sap-blue: var(--color-sap-blue-5);
  --color-sap-purple: var(--color-sap-purple-5);
  --color-sap-green: var(--color-sap-green-5);
  --color-sap-orange: var(--color-sap-orange-5);
  --color-transparent: transparent;

  /* Colors we want to theme on our side: */

  --color-theme-accent: var(--color-accent);
  --color-theme-danger: var(--color-danger);
  --color-theme-error: var(--color-error);
  --color-theme-info: var(--color-info);
  --color-theme-success: var(--color-success);
  --color-theme-warning: var(--color-warning);
  --color-theme-severity-critical: var(--color-severity-critical);
  --color-theme-severity-very-high: var(--color-severity-very-high);
  --color-theme-severity-high: var(--color-severity-high);
  --color-theme-severity-medium: var(--color-severity-medium);
  --color-theme-severity-low: var(--color-severity-low);
  --color-theme-severity-none: var(--color-severity-none);
  --color-theme-severity-unknown: var(--color-severity-unknown);
  --color-theme-focus: var(--color-focus);
  --color-theme-background-lvl-0: var(--color-background-lvl-0);
  --color-theme-background-lvl-1: var(--color-background-lvl-1);
  --color-theme-background-lvl-2: var(--color-background-lvl-2);
  --color-theme-background-lvl-3: var(--color-background-lvl-3);
  --color-theme-background-lvl-4: var(--color-background-lvl-4);
  --color-theme-background-lvl-5: var(--color-background-lvl-5);

  --border-width-*: initial;
  --border-width-0: 0;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-4: 4px;
  --border-width-6: 6px;
  --border-width: 1px;

  /* COMPONENT TOKENS: */
  /* Here we define all the classes that represent a specific component token. */
  /* E.g. `--background-color-theme-badge-default` will become `.bg-theme-badge-default`*/

  --background-color-theme-global-bg: var(--color-global-bg);
  /* Component Background Colors: */
  --background-color-theme-badge-default: var(--color-badge-default-bg);
  --background-color-theme-box-default: var(--color-box-bg);
  --background-color-theme-box-info: var(--color-box-info-bg);
  --background-color-theme-box-success: var(--color-box-success-bg);
  --background-color-theme-box-warning: var(--color-box-warning-bg);
  --background-color-theme-box-error: var(--color-box-error-bg);
  --background-color-theme-box-danger: var(--color-box-danger-bg);

  /* Side Navigation Background Colors */
  --background-color-theme-sidenav: var(--color-sidenav-background);
  --background-color-theme-sidenav-list: var(--color-sidenav-list-background);

  /* Side Navigation */ /* Item Background Colors */
  --background-color-theme-sidenav-item-default: var(--color-sidenav-item-background-default);
  --background-color-theme-sidenav-item-hover: var(--color-sidenav-item-background-hover);
  --background-color-theme-sidenav-item-active: var(--color-sidenav-item-background-active);
  --background-color-theme-sidenav-item-selected: var(--color-sidenav-item-background-selected);

  /* Side Navigation */ /* Item Text Colors */
  --text-color-theme-sidenav-item-default: var(--color-sidenav-item-text-default);
  --text-color-theme-sidenav-item-hover: var(--color-sidenav-item-text-hover);
  --text-color-theme-sidenav-item-active: var(--color-sidenav-item-text-active);
  --text-color-theme-sidenav-item-selected: var(--color-sidenav-item-text-selected);
  --border-color-theme-sidenav-item-selected: var(--color-sidenav-item-border-selected);

  /* Button */
  /* Button Background */
  --background-color-theme-button-default: var(--color-button-default-bg);
  --background-color-theme-button-default-hover: var(--color-button-default-hover-bg);
  --background-color-theme-button-default-active: var(--color-button-default-active-bg);

  --background-color-theme-button-primary: var(--color-button-primary-bg);
  --background-color-theme-button-primary-hover: var(--color-button-primary-hover-bg);
  --background-color-theme-button-primary-active: var(--color-button-primary-active-bg);

  --background-color-theme-button-primary-danger: var(--color-button-primary-danger-bg);
  --background-color-theme-button-primary-danger-hover: var(--color-button-primary-danger-hover-bg);
  --background-color-theme-button-primary-danger-active: var(--color-button-primary-danger-active-bg);

  --background-color-theme-button-subdued: var(--color-button-subdued-bg);
  --background-color-theme-button-subdued-hover: var(--color-button-subdued-hover-bg);
  --background-color-theme-button-subdued-active: var(--color-button-subdued-active-bg);

  /* Button Color */
  --color-theme-button-default: var(--color-button-default-text);
  --color-theme-button-default-hover: var(--color-button-default-hover-text);
  --color-theme-button-default-active: var(--color-button-default-active-text);

  --color-theme-button-primary: var(--color-button-primary-text);
  --color-theme-button-primary-hover: var(--color-button-primary-hover-text);
  --color-theme-button-primary-active: var(--color-button-primary-active-text);

  --color-theme-button-primary-danger: var(--color-button-primary-danger-text);
  --color-theme-button-primary-danger-hover: var(--color-button-primary-danger-hover-text);
  --color-theme-button-primary-danger-active: var(--color-button-primary-danger-active-text);

  --color-theme-button-subdued: var(--color-button-subdued-text);
  --color-theme-button-sundued-hover: var(--color-button-subdued-hover-text);
  --color-theme-button-sundued-active: var(--color-button-subdued-active-text);

  /* PageFooter */
  --text-color-theme-pagefooter: var(--color-pagefooter-text);
  --background-color-theme-pagefooter: var(--color-pagefooter-background);

  /* TODO Border Color */
  --border-theme-button-subdued: 1px solid var(--color-button-subdued-border);
  --border-theme-button-subdued-hover: var(--color-button-subdued-hover-border);
  --border-theme-button-subdued-active: var(--color-button-subdued-active-border);
  --border-color-theme-divider: var(--color-divider-border);

  --background-color-theme-card-default: var(--color-card-background-default);

  --background-color-theme-checkbox: var(--color-checkbox-bg); /* -> .jn:bg-theme-checkbox */

  --background-color-theme-code-block: var(--color-codeblock-bg);
  --background-color-theme-status-details: var(--color-status-details-bg);

  --background-color-theme-content-area-bg: var(--color-content-area-bg);

  --background-color-theme-datagridtoolbar: var(--color-datagridtoolbar-bg);
  --background-color-theme-datagridrow-selected: var(--color-datagridrow-selected);
  --background-color-theme-datalistrow-selected: var(--color-datalistrow-selected);

  --background-color-theme-filters: var(--color-filters-bg);
  --background-color-theme-filter-input: var(--color-filter-input-bg);
  --background-color-theme-filter-input-textinput: var(--color-filter-input-textinput-bg);
  --background-color-theme-filter-pill-key: var(--color-filter-pill-key-bg);
  --background-color-theme-introbox: var(--color-introbox-bg);
  --background-color-theme-message-border-danger: var(--color-message-danger-border);
  --background-color-theme-message-border-default: var(--color-message-default-border);
  --background-color-theme-message-border-error: var(--color-message-error-border);
  --background-color-theme-message-border-warning: var(--color-message-warning-border);
  --background-color-theme-message-border-success: var(--color-message-success-border);
  --background-color-theme-modal-backdrop: var(--color-modal-backdrop-bg);
  --background-color-theme-panel: var(--color-panel-bg);
  --background-color-theme-pageheader: var(--color-pageheader-background);
  --background-color-theme-radio: var(--color-radio-bg);
  --background-color-theme-radio-checked: var(--color-radio-checked-bg);
  --background-color-theme-required: var(--color-required-bg);
  --background-color-theme-select: var(--color-select-bg);
  --background-color-theme-sidenavigation-item-active: var(--color-sidenavigation-item-active-bg);
  --background-color-theme-switch-handle: var(--color-switch-handle-bg);
  --background-color-theme-switch-handle-checked: var(--color-switch-handle-checked-bg);
  --background-color-theme-tab-navigation-top: var(--color-tabnavigation-top-bg);
  --background-color-theme-tab-buttons: var(--color-tab-buttons-bg);
  --background-color-theme-tab-button-active: var(--color-tab-button-bg-active);
  --background-color-theme-textinput: var(--color-textinput-bg);
  --background-color-theme-textinput-autofill: var(--color-textinput-autofill-bg);
  --background-color-theme-topnavigation-item: var(--color-topnavigation-item-bg);
  --background-color-theme-topnavigation-item-active: var(--color-topnavigation-item-active-bg);

  /* Component Background Images: */
  --background-color-theme-message-default: var(--color-message-default-bg);
  --background-color-theme-message-success: var(--color-message-success-bg);
  --background-color-theme-message-warning: var(--color-message-warning-bg);
  --background-color-theme-message-danger: var(--color-message-danger-bg);
  --background-color-theme-message-error: var(--color-message-error-bg);

  /* Component Text Colors: */
  --text-color-theme-highest: var(--color-text-highest);
  --text-color-theme-high: var(--color-text-high);
  --text-color-theme-default: var(--color-text-default);
  --text-color-theme-light: var(--color-text-light);
  --text-color-theme-disabled: var(--color-text-disabled);
  --text-color-theme-link: var(--color-text-link);
  --text-color-theme-on-danger: var(--color-button-danger-text);
  --text-color-theme-on-default: var(--color-button-default-text);
  --text-color-theme-textinput: var(--color-textinput-text);
  --text-color-theme-textinput-autofill: var(--color-textinput-autofill-text);
  --text-color-theme-textinput-autofill-label: var(--color-textinput-autofill-label);
  --text-color-theme-checkbox-checked: var(--color-checkbox-checked-color);
  --text-color-theme-pageheader: var(--color-pageheader-text);
  --text-color-theme-pageheader-appname-active: var(--color-pageheader-appname-text-active);
  --text-color-theme-pageheader-appname-default: var(--color-pageheader-appname-text-default);
  --text-color-theme-pageheader-appname-hover: var(--color-pageheader-appname-text-hover);
  --text-color-theme-sidenavigation-item-active: var(--color-sidenavigation-item-active);
  --text-color-theme-status-details: var(--color-status-details-text);
  --text-color-theme-status-code: var(--color-status-code);
  --text-color-theme-tab-button: var(--color-tab-button-text);
  --text-color-theme-tab-button-active: var(--color-tab-button-text-active);
  --text-color-theme-tab-button-hover: var(--color-tab-button-text-hover);

  /* Component Border Colors: */
  --border-color-theme-default: var(--color-border-default);
  --border-color-theme-high: var(--color-border-high);
  --border-color-theme-higher: var(--color-border-higher);

  --border-color-theme-box-default: var(--color-box-border);
  --border-color-theme-box-info: var(--color-box-info-border);
  --border-color-theme-box-success: var(--color-box-success-border);
  --border-color-theme-box-warning: var(--color-box-warning-border);
  --border-color-theme-box-error: var(--color-box-error-border);
  --border-color-theme-box-danger: var(--color-box-danger-border);

  --border-color-theme-card-default: var(--color-card-border-default);
  --border-color-theme-card-hover: var(--color-card-border-hover);

  --border-color-theme-codeblock-bar: var(--color-codeblock-bar-border);
  --border-color-theme-codeblock-footer: var(--color-codeblock-footer-border);
  --border-color-theme-codeblock-tab-active: var(--color-text-default);

  --border-color-theme-datalist-row: var(--color-datalist-row-border);

  --border-color-theme-filter-input: var(--color-filter-input-border);
  --border-color-theme-filter-pill: var(--color-filter-pill-border);

  --border-color-theme-introbox: var(--color-introbox-border);

  --border-color-theme-message-danger: var(--color-message-danger-border);
  --border-color-theme-message-default: var(--color-message-default-border);
  --border-color-theme-message-error: var(--color-message-error-border);
  --border-color-theme-message-warning: var(--color-message-warning-border);
  --border-color-theme-message-success: var(--color-message-success-border);

  --border-color-theme-panel: var(--color-panel-border);

  --border-color-theme-pageheader: var(--color-pageheader-border);

  --border-color-theme-switch-default: var(--color-switch-default-border);
  --border-color-theme-switch-hover: var(--color-switch-hover-border);

  /* ProgressBar */
  --background-color-theme-progressbar: var(--color-progressbar-fill);
  --border-color-theme-progressbar: var(--color-progressbar-border);

  --border-color-theme-tab-navigation-content-bottom: var(--color-tabnavigation-content-bottom-border);

  --border-color-theme-tab-active-bottom: var(--color-text-default);
  --border-color-theme-tab-button-active: var(--color-tab-button-border-active);
  --border-color-theme-tab-content-inactive-bottom: var(--color-background-lvl-4);

  --border-color-theme-textinput-default: var(--color-textinput-default-border);

  --border-color-theme-sidenav: var(--color-sidenav-border);
  --border-color-theme-status-details: var(--color-status-details-border);

  --padding-xs: 0.25rem;
  --padding-sm: 0.5rem;
  --padding-md: 1rem;
  --padding-lg: 1.5rem;
  --padding-grid-column: 0 0.5rem;

  --height-textinput: 2.375rem;
  --height-floatinglabelinput: 3rem;
  --height-switch-default: 1.4375rem;
  --height-switch-handle-default: 1.1875rem;

  --ring-offset-focus: var(--color-global-bg);

  --width-switch-default: 2.625rem;
  --width-switch-handle-default: 1.1875rem;
  --width-grid-column-default: var(--grid-column-default-width);
  --width-grid-col-1: 8.333333%;
  --width-grid-col-2: 16.666667%;
  --width-grid-col-3: 25%;
  --width-grid-col-4: 33.333333%;
  --width-grid-col-5: 41.666667%;
  --width-grid-col-6: 50%;
  --width-grid-col-7: 58.333333%;
  --width-grid-col-8: 66.666667%;
  --width-grid-col-9: 75%;
  --width-grid-col-10: 83.333333%;
  --width-grid-col-11: 91.666667%;
  --width-grid-col-12: 100%;

  --breakpoint-3xl: 1856px;

  --radius-3px: 3px;

  --margin-grid-row: 0 var(--grid-row-margin-x);

  --flex-grid-column: var(--grid-column-flex-grow) var(--grid-column-flex-shrink) var(--grid-column-flex-basis);

  --shadow-theme-default: var(--box-shadow-default);
  --shadow-theme-default-hover: var(--box-shadow-hover);

  /* Description - DescriptionList, DescriptionTerm, DescriptionDefinition */
  --color-dt-background: var(--color-background-lvl-1);
  --color-dd-background: var(--color-transparent);
  --color-dt-text: var(--color-text-high);
  --color-dd-text: var(--color-text-high);
}

/* JUNO THEME: LIGHT MODE */
.theme-light {
  /* Light mode colors: */
  --color-accent: rgb(0, 118, 203);
  --color-info: rgb(0, 118, 203);
  --color-success: rgb(79, 184, 28);
  --color-warning: rgb(255, 175, 0);
  --color-danger: rgb(199, 0, 0);
  --color-error: rgb(199, 0, 0);

  --color-juno-text-light: rgb(150, 150, 150);
  --color-juno-text-default: rgb(76, 76, 76);
  --color-juno-text-high: rgb(64, 64, 64);
  --color-juno-text-highest: rgb(0, 0, 0);
  --color-juno-text-disabled: rgb(183, 183, 183);
  --color-juno-primary-danger-1: rgb(235, 146, 146);
  --color-juno-primary-danger-2: rgb(218, 93, 93);
  --color-juno-primary-danger-3: rgb(213, 64, 64);
  --color-juno-primary-danger-4: rgb(199, 0, 0);
  --color-juno-primary-danger-5: rgb(165, 11, 11);

  /* Light Mode bg-colors: */
  --color-background-lvl-0: var(--color-white);
  --color-background-lvl-1: var(--color-juno-grey-light-1);
  --color-background-lvl-2: var(--color-juno-grey-light-3);
  --color-background-lvl-3: var(--color-juno-grey-light-7);
  --color-background-lvl-4: var(--color-juno-grey-light-9);
  --color-background-lvl-5: var(--color-juno-grey-light-10);

  /* LT Global */
  --color-global-bg: var(--color-juno-grey-light-1);
  --color-border-default: var(--color-juno-grey-light-7);
  --color-border-high: var(--color-juno-grey-light-9);
  --color-border-higher: rgb(183, 183, 183);
  --color-global-text: var(--color-juno-text-default);
  --color-content-area-bg: var(--color-background-lvl-0);
  /* LT FOCUS */
  --color-focus: var(--color-accent);
  /* LT Text */
  --color-text-highest: var(--color-juno-text-highest);
  --color-text-high: var(--color-juno-text-high);
  --color-text-default: var(--color-juno-text-default);
  --color-text-light: var(--color-juno-text-light);
  --color-text-disabled: var(--color-juno-text-disabled);
  --color-text-link: var(--color-accent);

  /* LT Badge */
  --color-badge-default-bg: var(--color-juno-grey-light-3);

  /* LT Button */
  /* LT Primary Button */
  --color-button-primary-text: var(--color-white);
  --color-button-primary-bg: var(--color-juno-primary-blue-3);
  /* |-- LT Primary Button :hover */
  --color-button-primary-hover-text: var(--color-white);
  --color-button-primary-hover-bg: var(--color-juno-primary-blue-2);
  /* |-- LT Primary Button :active */
  --color-button-primary-active-text: var(--color-white);
  --color-button-primary-active-bg: var(--color-juno-primary-blue-5);

  /* LT Default Button */
  --color-button-default-text: var(--color-text-high);
  --color-button-default-bg: var(--color-background-lvl-4);
  --color-button-default-border: var(--color-background-lvl-4);
  /* |-- LT Default Button :hover */
  --color-button-default-hover-text: var(--color-text-high);
  --color-button-default-hover-bg: var(--color-background-lvl-3);
  --color-button-default-hover-border: var(--color-background-lvl-3);
  /* |-- LT Default Button :active */
  --color-button-default-active-text: var(--color-text-high);
  --color-button-default-active-bg: var(--color-background-lvl-2);
  --color-button-default-active-border: var(--color-background-lvl-4);

  /* LT Subdued Button */
  --color-button-subdued-text: var(--color-text-default);
  --color-button-subdued-icon: var(--color-text-default);
  --color-button-subdued-bg: var(--color-background-lvl-3);
  --color-button-subdued-border: var(--color-background-lvl-4);
  /* |-- LT Subdued Button :hover */
  --color-button-subdued-hover-text: var(--color-text-default);
  --color-button-subdued-hover-bg: var(--color-background-lvl-1);
  --color-button-subdued-hover-border: var(--color-background-lvl-4);
  /* |-- LT Subdued Button :active */
  --color-button-subdued-active-text: var(--color-text-default);
  --color-button-subdued-active-bg: var(--color-background-lvl-0);
  --color-button-subdued-active-border: var(--color-background-lvl-4);

  /* LT Primary Danger Button */
  --color-button-primary-danger-text: var(--color-white);
  --color-button-primary-danger-bg: var(--color-juno-primary-danger-4);
  /* |-- LT Primary Danger Button :hover */
  --color-button-primary-danger-hover-text: var(--color-white);
  --color-button-primary-danger-hover-bg: var(--color-juno-primary-danger-3);
  /* |-- LT Primary Danger Button :active */
  --color-button-primary-danger-active-text: var(--color-white);
  --color-button-primary-danger-active-bg: var(--color-juno-primary-danger-5);

  /* LT Divider */
  --color-divider-border: var(--color-border-default);

  /* LT Icon */
  --color-severity-critical: rgb(165, 11, 11);
  --color-severity-very-high: rgb(223, 0, 0);
  --color-severity-high: rgb(244, 89, 0);
  --color-severity-medium: rgb(243, 138, 0);
  --color-severity-low: rgb(255, 229, 0);
  --color-severity-none: var(--color-text-disabled);
  --color-severity-unknown: var(--color-text-light);

  --color-icon-danger: var(--danger);
  --color-icon-info: var(--color-accent);
  --color-icon-success: var(--color-sap-green);
  --color-icon-warning: var(--color-warning);
  --color-icon-severityCritical: var(--color-severity-critical);
  --color-icon-severityVeryHigh: var(--color-severity-very-high);
  --color-icon-severityHigh: var(--color-severity-high);
  --color-icon-severityMedium: var(--color-severity-medium);
  --color-icon-severityLow: var(--color-severity-low);

  /* LT Semantic Background Colors */
  --color-info-bg: rgb(229, 241, 250);
  --color-warning-bg: rgb(255, 247, 229);
  --color-success-bg: rgb(237, 248, 232);
  --color-danger-bg: rgb(249, 229, 229);
  --color-error-bg: rgb(249, 229, 229);

  /* LT Message */
  --color-message-danger-border: var(--color-danger);
  --color-message-danger-bg: var(--color-danger-bg);
  --color-message-default-border: var(--color-info);
  --color-message-default-bg: var(--color-info-bg);
  --color-message-error-border: var(--color-error);
  --color-message-error-bg: var(--color-error-bg);
  --color-message-warning-border: var(--color-warning);
  --color-message-warning-bg: var(--color-warning-bg);
  --color-message-success-border: var(--color-success);
  --color-message-success-bg: var(--color-success-bg);

  /* LT Introbox */
  --color-introbox-bg: var(--color-background-lvl-2);
  --color-introbox-border: var(--color-accent);
  /* LT (Text-) Input */
  --color-textinput-bg: var(--color-background-lvl-3);
  --color-textinput-default-border: var(--color-background-lvl-4);
  --color-textinput-text: var(--color-juno-text-high);
  --color-textinput-placeholder-text: var(--color-juno-text-high);
  --color-textinput-focus-border: var(--color-accent);
  --color-textinput-autofill-text: var(--color-black);
  --color-textinput-autofill-bg: var(--color-juno-blue-1);
  --color-textinput-autofill-label: var(--color-juno-text-default);
  /* LT Select */
  --color-select-bg: var(--color-background-lvl-3);
  /* LT Card */
  --color-card-background-default: var(--color-white);
  --color-card-border-default: var(--color-border-default);
  --color-card-border-hover: var(--color-border-high);
  /* LT Checkbox */
  --color-checkbox-bg: var(--color-background-lvl-5);
  --color-checkbox-checked-color: var(--color-accent);
  /* LT Radio */
  --color-radio-bg: var(--color-background-lvl-5);
  --color-radio-checked-bg: var(--color-accent);
  /* LT Switch */
  --color-switch-default-border: var(--color-juno-text-default);
  --color-switch-handle-bg: var(--color-juno-text-default);
  --color-switch-handle-checked-bg: var(--color-accent);
  /* LT Required */
  --color-required-bg: var(--color-accent);
  /* LT Spinner */
  --color-spinner-primary: var(--color-accent);
  /* LT ProgressBar */
  --color-progressbar-fill: var(--color-accent);
  --color-progressbar-border: var(--color-border-high);
  /* LT Syntax Highlighting */
  --color-syntax-highlight-base00: var(--color-codeblock-bg); /* bg */
  --color-syntax-highlight-base01: var(--color-juno-grey-light-3); /*  ? */
  --color-syntax-highlight-base02: var(--color-sap-grey-3); /*  lines and boxes */
  --color-syntax-highlight-base03: var(--color-sap-grey-3);
  --color-syntax-highlight-base04: var(--color-sap-grey-3);
  --color-syntax-highlight-base05: var(--color-juno-text-high);
  --color-syntax-highlight-base06: red;
  --color-syntax-highlight-base07: var(--color-juno-text-high);
  --color-syntax-highlight-base08: var(--color-juno-grey-blue-6); /*  NULL */
  --color-syntax-highlight-base09: var(--color-juno-blue-4); /*  String value */
  --color-syntax-highlight-base0A: var(--color-juno-grey-blue-6); /*  NaN */
  --color-syntax-highlight-base0B: var(--color-juno-blue-4); /*  float value */
  --color-syntax-highlight-base0C: var(--color-sap-gold); /*  array index */
  --color-syntax-highlight-base0D: var(--color-sap-gold); /*  expanded icon */
  --color-syntax-highlight-base0E: var(--color-juno-blue-4);
  /* LT bool + collapsed icon */
  --color-syntax-highlight-base0F: var(--color-juno-blue-4); /*  integer value */
  /* LT DataGrid */
  --color-datagridtoolbar-bg: var(--color-background-lvl-1);
  --color-datagridrow-selected: var(--color-accent);
  /* LT DataList */
  --color-datalist-row-border: var(--color-background-lvl-1);
  --color-datalistrow-selected: var(--color-accent);
  /* LT CodeBlock */
  --color-codeblock-bg: var(--color-background-lvl-2);
  --color-codeblock-bar-border: var(--color-background-lvl-4);
  --color-codeblock-footer-border: var(--color-background-lvl-4);
  /* LT Status */
  --color-status-details-bg: var(--color-background-lvl-2);
  --color-status-details-text: var(--color-text-default);
  --color-status-details-border: var(--color-border-default);
  --color-status-code: var(--color-text-disabled);
  /* LT Panel */
  --color-panel-bg: rgb(252 252 252 / 0.8);
  /* LT PageHeader */
  --color-pageheader-background: var(--color-juno-grey-blue-11);
  --color-pageheader-border: var(--color-juno-grey-light-7);
  --color-pageheader-text: rgb(255, 254, 253);
  --color-pageheader-appname-text-default: rgb(255, 254, 253);
  --color-pageheader-appname-text-hover: rgb(255, 254, 253);
  --color-pageheader-appname-text-active: rgb(255, 254, 253);
  /* LT TabNavigation */
  --color-tabnavigation-top-bg: var(--color-juno-grey-light-5);
  --color-tabnavigation-content-bottom-border: var(--color-background-lvl-4);
  /* LT TabBar Buttons */
  --color-tab-buttons-bg: var(--color-juno-grey-light-3);
  --color-tab-button-bg-active: var(--color-white);
  --color-tab-button-border-active: var(--color-juno-grey-light-9);
  --color-tab-button-text: var(--color-text-default);
  --color-tab-button-text-active: var(--color-text-high);
  --color-tab-button-text-hover: var(--color-text-highest);
  /* LT Filters */
  --color-filters-bg: var(--color-background-lvl-1);
  --color-filter-input-bg: var(--color-background-lvl-0);
  --color-filter-input-border: var(--color-background-lvl-4);
  --color-filter-input-textinput-bg: transparent;
  --color-filter-pill-border: var(--color-background-lvl-4);
  --color-filter-pill-key-bg: var(--color-background-lvl-4);
  /* LT Modal */
  --color-modal-backdrop-bg: rgb(0 0 0 / 0.2);
  /* LT Box */
  --color-box-bg: var(--color-background-lvl-1);
  --color-box-border: var(--color-background-lvl-3);
  --color-box-info-bg: var(--color-info-bg);
  --color-box-info-border: var(--color-info);
  --color-box-success-bg: var(--color-success-bg);
  --color-box-success-border: var(--color-success);
  --color-box-warning-bg: var(--color-warning-bg);
  --color-box-warning-border: var(--color-warning);
  --color-box-error-bg: var(--color-error-bg);
  --color-box-error-border: var(--color-error);
  --color-box-danger-bg: var(--color-danger-bg);
  --color-box-danger-border: var(--color-danger);
  /* LT SideNavigation */
  --color-sidenavigation-item-active: var(--color-black);
  --color-sidenavigation-item-active-bg: var(--color-background-lvl-0);
  --color-sidenav-background: var(--color-white);
  --color-sidenav-border: var(--color-juno-grey-light-7);
  --color-sidenav-list-background: var(--color-white);
  --color-sidenav-item-background-default: var(--color-white);
  --color-sidenav-item-background-hover: var(--color-juno-grey-light-1);
  --color-sidenav-item-background-active: var(--color-juno-grey-light-7);
  --color-sidenav-item-background-selected: var(--color-juno-grey-light-7);
  --color-sidenav-item-text-default: var(--color-juno-text-high);
  --color-sidenav-item-text-hover: var(--color-juno-text-high);
  --color-sidenav-item-text-active: var(--color-juno-text-high);
  --color-sidenav-item-text-selected: var(--color-juno-text-high);
  --color-sidenav-item-border-selected: var(--color-theme-accent);
  /* LT TopNavigation */
  --color-topnavigation-item-active: var(--color-black);
  --color-topnavigation-item-bg: var(--color-sap-grey-1);
  --color-topnavigation-item-active-bg: var(--color-juno-grey-light-3);
  /* LT DateTimePicker */
  --color-datetimepicker-calendar-bg: var(--color-background-lvl-2);
  --color-datetimepicker-disabled-date-color: rgb(76 76 76 / 0.4); /* Light theme text default color */
  --color-datetimepicker-disabled-date-hover-bg: rgb(0 118 203 / 0.5); /* Light theme accent color */
  --color-datetimepicker-range-bg: rgb(
    98,
    148,
    209
  ); /* Light Theme DateTimePicker range background. We need to use a synthetisized solid value based on the current theme's accent color, the way that flatpickr is built here forbids using translucent colors. */
  /* LT Box Shadow */
  --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
  --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.2)), 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  /* LT PageFooter */
  --color-pagefooter-text: var(--color-text-light);
  --color-pagefooter-background: var(--color-white);
  --color-pagefooter-border: var(--color-border-default);
  --color-pagefooter-title: var(--color-text-default);
  --color-pagefooter-item-default: var(--color-text-light);
  --color-pagefooter-item-hover: var(--color-text-light);
  --color-pagefooter-item-active: var(--color-accent);
  --color-border-default: var(--color-juno-grey-light-7);
}

/* JUNO THEME: DARK MODE */
.theme-dark {
  --color-accent: rgb(21, 208, 224);
  --color-info: rgb(21, 208, 224);
  --color-success: rgb(59, 255, 91);
  --color-warning: rgb(255, 198, 0);
  --color-danger: rgb(255, 65, 16);
  --color-error: rgb(255, 65, 16);
  --color-juno-text-light: rgb(122, 122, 122);
  --color-juno-text-default: rgb(187, 187, 187);
  --color-juno-text-high: rgb(222, 223, 224);
  --color-juno-text-highest: rgb(255, 254, 253);
  --color-juno-text-disabled: rgb(92, 92, 92);
  --color-juno-primary-danger-1: rgb(231, 163, 137);
  --color-juno-primary-danger-2: rgb(222, 126, 91);
  --color-juno-primary-danger-3: rgb(208, 69, 18);
  --color-juno-primary-danger-4: rgb(187, 62, 16);
  --color-juno-primary-danger-5: rgb(164, 54, 14);

  /* DT Background Colors */
  --color-background-lvl-0: var(--color-juno-grey-blue-9);
  --color-background-lvl-1: var(--color-juno-grey-blue-7);
  --color-background-lvl-2: var(--color-juno-grey-blue-5);
  --color-background-lvl-3: var(--color-juno-grey-blue-3);
  --color-background-lvl-4: var(--color-juno-grey-blue-2);
  --color-background-lvl-5: var(--color-juno-grey-blue-1);

  /* DT Global */
  --color-global-bg: var(--color-juno-grey-blue-10);
  --color-border-default: var(--color-juno-grey-blue-3);
  --color-border-high: var(--color-juno-grey-blue-1);
  --color-border-higher: rgb(92, 92, 92);
  --color-global-text: var(--color-juno-text-default);
  --color-content-area-bg: var(--color-background-lvl-0);

  /* DT FOCUS */
  --color-focus: var(--color-accent);
  --color-focus-border: var(--color-accent);
  /* DT Text */
  --color-text-highest: var(--color-juno-text-highest);
  --color-text-high: var(--color-juno-text-high);
  --color-text-default: var(--color-juno-text-default);
  --color-text-light: var(--color-juno-text-light);
  --color-text-disabled: var(--color-juno-text-disabled);
  --color-text-link: var(--color-accent);

  /* DT Badge */
  --color-badge-default-bg: var(--color-juno-grey-blue-3);

  /* DT Button */
  /* DT Primary Button */
  --color-button-primary-bg: var(--color-juno-turquoise-7);
  --color-button-primary-text: var(--color-white);
  /* |-- DT Primary Button :hover */
  --color-button-primary-hover-bg: var(--color-juno-turquoise-5);
  --color-button-primary-hover-text: var(--color-white);
  /* |-- DT Primary Button :active */
  --color-button-primary-active-bg: var(--color-juno-turquoise-9);
  --color-button-primary-active-text: var(--color-white);

  /* DT Default Button */
  --color-button-default-text: var(--color-text-high);
  --color-button-default-icon: var(--color-text-high);
  --color-button-default-bg: var(--color-background-lvl-5);
  --color-button-default-border: var(--color-background-lvl-5);
  /* |-- DT Default Button :hover */
  --color-button-default-hover-text: var(--color-text-high);
  --color-button-default-hover-bg: var(--color-background-lvl-3);
  --color-button-default-hover-border: var(--color-background-lvl-3);
  /* |-- DT Default Button :active */
  --color-button-default-active-text: var(--color-text-high);
  --color-button-default-active-bg: var(--color-background-lvl-2);
  --color-button-default-active-border: var(--color-background-lvl-4);

  /* DT Subdued Button */
  --color-button-subdued-text: var(--color-text-default);
  --color-button-subdued-icon: var(--color-text-default);
  --color-button-subdued-bg: var(--color-background-lvl-3);
  --color-button-subdued-border: var(--color-background-lvl-4);
  /* |-- DT Subdued Button :hover */
  --color-button-subdued-hover-text: var(--color-text-default);
  --color-button-subdued-hover-bg: var(--color-background-lvl-2);
  --color-button-subdued-hover-border: var(--color-background-lvl-4);
  /* |-- DT Subdued Button :active */
  --color-button-subdued-active-text: var(--color-text-default);
  --color-button-subdued-active-bg: var(--color-background-lvl-0);
  --color-button-subdued-active-border: var(--color-background-lvl-4);

  /* DT Primary-Danger Button */
  --color-button-primary-danger-text: var(--color-white);
  --color-button-primary-danger-bg: var(--color-juno-primary-danger-4);
  /* |-- DT Primary Danger Button :hover */
  --color-button-primary-danger-hover-text: var(--color-white);
  --color-button-primary-danger-hover-bg: var(--color-juno-primary-danger-3);
  /* |-- DT Primary Danger Button :active */
  --color-button-primary-danger-active-text: var(--color-white);
  --color-button-primary-danger-active-bg: var(--color-juno-primary-danger-5);

  /* DT Divider */
  --color-divider-border: var(--color-border-default);

  /* DT Icon */
  --color-severity-critical: rgb(255, 18, 20);
  --color-severity-very-high: rgb(255, 68, 16);
  --color-severity-high: rgb(255, 110, 13);
  --color-severity-medium: rgb(255, 164, 8);
  --color-severity-low: rgb(255, 247, 1);
  --color-severity-none: var(--color-text-disabled);
  --color-severity-unknown: var(--color-text-light);

  --color-icon-danger: var(--color-juno-danger);
  --color-icon-info: var(--color-accent);
  --color-icon-success: var(--color-sap-green-5);
  --color-icon-warning: var(--color-warning);
  --color-icon-severityCritical: var(--color-severity-critical);
  --color-icon-severityVeryHigh: var(--color-severity-very-high);
  --color-icon-severityHigh: var(--color-severity-high);
  --color-icon-severityMedium: var(--color-severity-medium);
  --color-icon-severityLow: var(--color-severity-low);

  /* DT Semantic Background Colors */
  --color-info-bg: rgb(14, 48, 57);
  --color-warning-bg: rgb(49, 47, 24);
  --color-success-bg: rgb(20, 48, 34);
  --color-danger-bg: rgb(49, 27, 26);
  --color-error-bg: rgb(49, 27, 26);

  /* DT Message */
  --color-message-danger-border: var(--color-danger);
  --color-message-danger-bg: var(--color-danger-bg);
  --color-message-default-border: var(--color-info);
  --color-message-default-bg: var(--color-info-bg);
  --color-message-error-border: var(--color-error);
  --color-message-error-bg: var(--color-error-bg);
  --color-message-warning-border: var(--color-warning);
  --color-message-warning-bg: var(--color-warning-bg);
  --color-message-success-border: var(--color-success);
  --color-message-success-bg: var(--color-success-bg);
  /* DT Introbox */
  --color-introbox-bg: var(--color-background-lvl-2);
  --color-introbox-border: var(--color-accent);
  /* DT (Text-)Input */
  --color-textinput-bg: var(--color-background-lvl-3);
  --color-textinput-default-border: var(--color-background-lvl-4);
  --color-textinput-text: var(--color-juno-text-high);
  --color-textinput-placeholder-text: var(--color-juno-text-high);
  --color-textinput-focus-border: var(--color-accent);
  --color-textinput-autofill-text: var(--color-black);
  --color-textinput-autofill-bg: var(--color-juno-blue-1);
  --color-textinput-autofill-label: var(--color-black);
  /* DT Select */
  --color-select-bg: var(--color-background-lvl-4);
  /* DT Card */
  --color-card-background-default: var(--color-juno-grey-blue-10);
  --color-card-border-default: var(--color-border-default);
  --color-card-border-hover: var(--color-border-high);
  /* DT Checkbox */
  --color-checkbox-bg: var(--color-background-lvl-5);
  --color-checkbox-checked-color: var(--color-accent);
  /* DT Radio */
  --color-radio-bg: var(--color-background-lvl-5);
  --color-radio-checked-bg: var(--color-accent);
  /* DT Switch */
  --color-switch-default-border: var(--color-juno-text-high);
  --color-switch-handle-bg: var(--color-juno-text-high);
  --color-switch-handle-checked-bg: var(--color-accent);
  --color-switch-hover-border: var(--color-accent);
  /* DT Required */
  --color-required-bg: var(--color-accent);
  /* DT Spinner */
  --color-spinner-primary: var(--color-accent);
  /* DT ProgressBar */
  --color-progressbar-fill: var(--color-accent);
  --color-progressbar-border: var(--color-border-high);
  /* DT Syntax Highlighting */
  --color-syntax-highlight-base00: var(--color-codeblock-bg); /* bg */
  --color-syntax-highlight-base01: var(--color-juno-grey-blue-3); /*  ? */
  --color-syntax-highlight-base02: #bbb; /* lines and boxes */
  --color-syntax-highlight-base03: var(--color-sap-grey-3);
  --color-syntax-highlight-base04: var(--color-sap-grey-3);
  --color-syntax-highlight-base05: #dedfe0;
  --color-syntax-highlight-base06: red;
  --color-syntax-highlight-base07: #dedfe0;
  --color-syntax-highlight-base08: var(--color-juno-grey-blue-6); /* NULL */
  --color-syntax-highlight-base09: var(--color-juno-blue-4); /* String value */
  --color-syntax-highlight-base0A: var(--color-juno-grey-blue-6); /* NaN */
  --color-syntax-highlight-base0B: var(--color-juno-blue-4); /* float value */
  --color-syntax-highlight-base0C: var(--color-sap-gold); /* array index */
  --color-syntax-highlight-base0D: var(--color-sap-gold); /* DT expanded icon */
  --color-syntax-highlight-base0E: var(--color-juno-blue-4); /* DT bool + collapsed icon */
  --color-syntax-highlight-base0F: var(--color-juno-blue-4); /* integer value */
  /* DT DataGrid */
  --color-datagridtoolbar-bg: var(--color-background-lvl-1);
  --color-datagridrow-selected: var(--color-accent);
  /* DT DataList */
  --color-datalist-row-border: var(--color-background-lvl-1);
  --color-datalistrow-selected: var(--color-accent);
  /* DT CodeBlock */
  --color-codeblock-bg: var(--color-background-lvl-2);
  --color-codeblock-bar-border: var(--color-background-lvl-4);
  --color-codeblock-footer-border: var(--color-background-lvl-4);
  /* DT Status */
  --color-status-details-bg: var(--color-background-lvl-2);
  --color-status-details-text: var(--color-text-default);
  --color-status-details-border: var(--color-border-default);
  --color-status-code: var(--color-text-disabled);
  /* DT Panel */
  --color-panel-bg: rgb(from var(--color-juno-grey-blue-11) r g b / 0.75);
  /* DT PageHeader */
  --color-pageheader-background: var(--color-juno-grey-blue-11);
  --color-pageheader-border: var(--color-juno-grey-blue-3);
  --color-pageheader-text: var(--color-text-highest);
  --color-pageheader-appname-text-default: var(--color-text-highest);
  --color-pageheader-appname-text-hover: var(--color-text-highest);
  --color-pageheader-appname-text-active: var(--color-text-highest);
  /* DT TabNavigation */
  --color-tabnavigation-top-bg: var(--color-juno-grey-blue-8);
  --color-tabnavigation-content-bottom-border: var(--color-background-lvl-4);
  /* DT TabBar Buttons */
  --color-tab-buttons-bg: var(--color-background-lvl-2);
  --color-tab-button-bg-active: var(--color-background-lvl-0);
  --color-tab-button-border-active: var(--color-border-default);
  --color-tab-button-text: var(--color-text-default);
  --color-tab-button-text-active: var(--color-text-high);
  --color-tab-button-text-hover: var(--color-text-highest);
  /* DT Filters */
  --color-filters-bg: var(--color-background-lvl-1);
  --color-filter-input-bg: var(--color-background-lvl-0);
  --color-filter-input-border: var(--color-background-lvl-4);
  --color-filter-input-textinput-bg: transparent;
  --color-filter-pill-border: var(--color-background-lvl-4);
  --color-filter-pill-key-bg: var(--color-background-lvl-4);
  /* DT Modal */
  --color-modal-backdrop-bg: rgb(60 70 75 / 0.6);
  /* DT Box */
  --color-box-bg: var(--color-background-lvl-1);
  --color-box-border: var(--color-background-lvl-3);
  --color-box-info-bg: var(--color-info-bg);
  --color-box-info-border: var(--color-info);
  --color-box-success-bg: var(--color-success-bg);
  --color-box-success-border: var(--color-success);
  --color-box-warning-bg: var(--color-warning-bg);
  --color-box-warning-border: var(--color-warning);
  --color-box-error-bg: var(--color-error-bg);
  --color-box-error-border: var(--color-error);
  --color-box-danger-bg: var(--color-danger-bg);
  --color-box-danger-border: var(--color-danger);
  /* DT SideNavigation */
  --color-sidenavigation-item-active: var(--color-white);
  --color-sidenavigation-item-active-bg: var(--color-background-lvl-0);
  --color-sidenav-background: var(--color-juno-grey-blue-10);
  --color-sidenav-border: var(--color-juno-grey-blue-3);
  --color-sidenav-list-background: var(--color-juno-grey-blue-10);
  --color-sidenav-item-background-default: var(--color-juno-grey-blue-10);
  --color-sidenav-item-background-hover: var(--color-juno-grey-blue-5);
  --color-sidenav-item-background-active: var(--color-juno-grey-blue-7);
  --color-sidenav-item-background-selected: var(--color-juno-grey-blue-7);
  --color-sidenav-item-text-default: var(--color-juno-text-high);
  --color-sidenav-item-text-hover: var(--color-juno-text-high);
  --color-sidenav-item-text-active: var(--color-juno-text-high);
  --color-sidenav-item-text-selected: var(--color-juno-text-high);
  --color-sidenav-item-border-selected: var(--color-theme-accent);
  /* DT TopNavigation */
  --color-topnavigation-item-active: var(--color-white);
  --color-topnavigation-item-bg: var(--color-juno-grey-blue-7);
  --color-topnavigation-item-active-bg: var(--color-juno-grey-blue-5);
  /* DT DateTimePicker */
  --color-datetimepicker-calendar-bg: var(--color-background-lvl-1);
  --color-datetimepicker-disabled-date-color: rgb(187 187 187 / 0.4); /* Dark theme text default color */
  --color-datetimepicker-disabled-date-hover-bg: rgb(21 208 224 / 0.5); /* Dark theme accent color */
  --color-datetimepicker-range-bg: rgb(
    79 163 176
  ); /* Dark Theme DateTimePicker range background. We need to use a synthetisized solid value based on the current theme's accent color, the way that flatpickr is built here forbids using translucent colors. */
  /* DT Box Shadow */
  --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
  --box-shadow-hover: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
  /* DT PageFooter */
  --color-pagefooter-text: var(--color-text-light);
  --color-pagefooter-background: var(--color-juno-grey-blue-10);
  --color-pagefooter-border: var(--color-border-default);
  --color-pagefooter-title: var(--color-text-default);
  --color-pagefooter-item-default: var(--color-text-light);
  --color-pagefooter-item-hover: var(--color-text-light);
  --color-pagefooter-item-active: var(--color-accent);
  --color-border-default: var(--color-juno-grey-blue-3);
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
/* @layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
} */

/* Add flex-basis utilities since tw doesn't support flex-basis: https://github.com/tailwindlabs/tailwindcss/issues/603 */
@utility flex-basis-0 {
  flex-basis: 0%;
}
@utility flex-basis-auto {
  flex-basis: auto;
}

/* default base styles using the tw base directive */
@layer base {
  html,
  body,
  .juno-app-body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    @apply font-sans;
    @apply text-base;
    @apply h-full;
  }

  /* theme-dependant  colors need to be applied in the context of the theme classes. */
  .theme-dark,
  .theme-light {
    @apply bg-theme-global-bg;
    @apply text-theme-default;
  }

  a {
    @apply text-theme-link;
  }

  /* adds pointer cursor to buttons to restore tw3 behavior */
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

/* tw default values for various properties. Hardcode here right now to fix the issue that they are undefined otherwise
 * because of the way Tailwind CSS v4 defines the default values via @property. This is hopefully temporary, for 
 * context see: https://github.com/tailwindlabs/tailwindcss/issues/15005
*/
@layer properties {
  *,
  :before,
  :after,
  ::backdrop {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-translate-z: 0;
    --tw-rotate-x: initial;
    --tw-rotate-y: initial;
    --tw-rotate-z: initial;
    --tw-skew-x: initial;
    --tw-skew-y: initial;
    --tw-space-y-reverse: 0;
    --tw-space-x-reverse: 0;
    --tw-border-style: solid;
    --tw-gradient-position: initial;
    --tw-gradient-from: #0000;
    --tw-gradient-via: #0000;
    --tw-gradient-to: #0000;
    --tw-gradient-stops: initial;
    --tw-gradient-via-stops: initial;
    --tw-gradient-from-position: 0%;
    --tw-gradient-via-position: 50%;
    --tw-gradient-to-position: 100%;
    --tw-leading: initial;
    --tw-font-weight: initial;
    --tw-tracking: initial;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-color: initial;
    --tw-shadow-alpha: 100%;
    --tw-inset-shadow: 0 0 #0000;
    --tw-inset-shadow-color: initial;
    --tw-inset-shadow-alpha: 100%;
    --tw-ring-color: initial;
    --tw-ring-shadow: 0 0 #0000;
    --tw-inset-ring-color: initial;
    --tw-inset-ring-shadow: 0 0 #0000;
    --tw-ring-inset: initial;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-outline-style: solid;
    --tw-blur: initial;
    --tw-brightness: initial;
    --tw-contrast: initial;
    --tw-grayscale: initial;
    --tw-hue-rotate: initial;
    --tw-invert: initial;
    --tw-opacity: initial;
    --tw-saturate: initial;
    --tw-sepia: initial;
    --tw-drop-shadow: initial;
    --tw-drop-shadow-color: initial;
    --tw-drop-shadow-alpha: 100%;
    --tw-drop-shadow-size: initial;
    --tw-backdrop-blur: initial;
    --tw-backdrop-brightness: initial;
    --tw-backdrop-contrast: initial;
    --tw-backdrop-grayscale: initial;
    --tw-backdrop-hue-rotate: initial;
    --tw-backdrop-invert: initial;
    --tw-backdrop-opacity: initial;
    --tw-backdrop-saturate: initial;
    --tw-backdrop-sepia: initial;
    --tw-duration: initial;
    --tw-content: "";
  }
}

@layer base {
  h1, .juno-h1,
  h2, .juno-h2,
  h3, .juno-h3,
  h4, .juno-h4,
  h5, .juno-h5,
  h6, .juno-h6 {
    font-family: var(--font-sans);
    @apply font-bold;
  }

  h1, .juno-h1 {
    font-size: 1.69rem;
    line-height: 1.375;
  }

  h2, .juno-h2 {
    font-size: 1.56rem;
    line-height: 1.375;
  }

  h3, .juno-h3 {
    font-size: 1.44rem;
    line-height: 1.375;
  }

  h4, .juno-h4 {
    font-size: 1.28rem;
    line-height: 1.625;
  }

  h5, .juno-h5 {
    font-size: 1.125rem;
    line-height: 1.625;
  }

  h6, .juno-h6 {
    font-size: 1rem;
    line-height: 1.5;
  }
}