.sample {
    /* default.css */
    --color-main-background: #171717;
    --color-main-background-rgb: 23, 23, 23;
    --color-main-background-translucent: rgba(var(--color-main-background-rgb), 0.97);
    --color-main-background-blur: rgba(var(--color-main-background-rgb), 0.85);
    --filter-background-blur: none;
    --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
    --color-background-hover: #212121;
    --color-background-dark: #292929;
    --color-background-darker: #3b3b3b;
    --color-placeholder-light: #313131;
    --color-placeholder-dark: #4a4a4a;
    --color-main-text: #ebebeb;
    --color-text-maxcontrast: #999999;
    --color-text-maxcontrast-default: #999999;
    --color-text-maxcontrast-background-blur: #a8a8a8;
    --color-text-error: #ff6f6f;
    --color-text-success: #49bb37;
    --color-border: #292929;
    --color-border-dark: #3b3b3b;
    --color-border-maxcontrast: #7d7d7d;
    --color-border-error: var(--color-element-error);
    --color-border-success: var(--color-element-success);
    --color-element-error: #ff5050;
    --color-element-info: #0099e0;
    --color-element-success: #40a330;
    --color-element-warning: #ffcc00;
    --color-error: #552121;
    --color-error-hover: #7a2f2f;
    --color-error-text: #ffcccc;
    --color-warning: #3d3010;
    --color-warning-hover: #65501b;
    --color-warning-text: #ffeec5;
    --color-success: #11321a;
    --color-success-hover: #1e582e;
    --color-success-text: #d5f2dc;
    --color-info: #003553;
    --color-info-hover: #005686;
    --color-info-text: #00aeff;
    --color-favorite: #ffde00;
    --color-error-rgb: 85, 33, 33;
    --color-warning-rgb: 61, 48, 16;
    --color-success-rgb: 17, 50, 26;
    --color-info-rgb: 0, 53, 83;
    --color-loading-light: #777;
    --color-loading-dark: #ccc;
    --color-scrollbar: var(--color-border-maxcontrast) transparent;
    --color-box-shadow-rgb: 0, 0, 0;
    --color-box-shadow: #000000;
    --color-background-assistant: #221d2b;
    --color-border-assistant: linear-gradient(125deg, #0c3a65 50%, #6204a5 125%);
    --color-element-assistant: linear-gradient(214deg, #c8a3e8 12%, #007cff 39%, #c297dd 86%);
    --color-element-assistant-icon: linear-gradient(214deg, #cdace7 15.28%, #008fdb 39.98%, #a180e0 82.05%);
    --font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans,
    Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
    --default-font-size: 15px;
    --font-size-small: 13px;
    --default-line-height: 1.5;
    --animation-quick: 100ms;
    --animation-slow: 300ms;
    --border-width-input: 1px;
    --border-width-input-focused: 2px;
    --border-radius-small: 4px;
    --border-radius-element: 8px;
    --border-radius-container: 12px;
    --border-radius-container-large: 16px;
    --border-radius: var(--border-radius-small);
    --border-radius-large: var(--border-radius-element);
    --border-radius-rounded: 28px;
    --border-radius-pill: 100px;
    --default-clickable-area: 34px;
    --clickable-area-large: 48px;
    --clickable-area-small: 24px;
    --default-grid-baseline: 4px;
    --header-height: 50px;
    --header-menu-item-height: 44px;
    --header-menu-icon-mask: linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha;
    --navigation-width: 300px;
    --sidebar-min-width: 300px;
    --sidebar-max-width: 500px;
    --body-container-radius: var(--border-radius-container-large);
    --body-container-margin: calc(var(--default-grid-baseline) * 2);
    --body-height: calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin));
    --breakpoint-mobile: 1024px;
    --background-invert-if-dark: invert(100%);
    --background-invert-if-bright: no;
    --background-image-invert-if-bright: no;
    --primary-invert-if-bright: invert(100%);
    --primary-invert-if-dark: no;
    --color-primary: #00679e;
    --color-primary-text: #ffffff;
    --color-primary-hover: #045783;
    --color-primary-element: #0091f2;
    --color-primary-element-hover: #17a2ff;
    --color-primary-element-text: #000000;
    --color-primary-element-text-dark: #121212;
    --color-primary-light: #14232c;
    --color-primary-light-hover: #1f2e36;
    --color-primary-light-text: #99c2d8;
    --color-primary-element-light: var(--color-primary-light);
    --color-primary-element-light-text: var(--color-primary-light-text);
    --color-primary-element-light-hover: var(--color-primary-light-hover);
    --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    --color-background-plain: #00679e;
    --color-background-plain-text: #ffffff;
    --image-background: url("/apps/theming/img/background/jo-myoung-hee-fluid-dark.webp");
}