/* THIS FILE IS AUTO-GENERATED. DO NOT EDIT. CONTENTS CAN BE CHANGED IN YOUR THEME CONFIG. */

/* Shared styles */
.charm-light,
.charm-dark {
  --body-font-family: var(--font-family-base);
  --body-font-size: var(--font-size-sm);
  --body-font-weight: var(--font-weight-regular);
  --body-line-height: var(--line-height-md);
  --default-border: var(--default-border-size) var(--default-border-color)
    var(--default-border-style);
  --default-border-size: var(--border-width-thin);
  --default-border-color: var(--color-neutral-500);
  --default-border-style: solid;
  --button-border-size: var(--border-width-thin);
  --button-border-style: solid;
  --button-border-radius: var(--border-radius-md);
  --button-font-weight: var(--font-weight-regular);
  --button-padding-x: var(--spacing-md);
  --button-padding-y: var(--spacing-xs);
  --button-shadow: var(--shadow-xs);
  --button-active-shadow: var(--shadow-none);
  --button-disabled-shadow: var(--shadow-none);
  --button-focus-shadow: var(--shadow-sm);
  --button-hover-shadow: var(--shadow-sm);
  --form-border-color: inherit;
  --form-border-size: inherit;
  --form-border-style: inherit;
  --form-border-radius: inherit;
  --form-bg-color: inherit;
  --form-content-gap: inherit;
  --form-padding-x: inherit;
  --form-padding-y: inherit;
  --form-control-border-color: var(--default-border);
  --form-control-border-radius: var(--border-radius-md);
  --form-control-border-size: var(--border-width-thin);
  --form-control-border-style: solid;
  --form-control-font-size: var(--font-size-sm);
  --form-control-icon-gap: var(--spacing-xxs);
  --form-control-input-height: 32px;
  --form-control-placeholder-color: var(--color-neutral-500);
  --form-control-padding-x: var(--spacing-md);
  --form-control-padding-y: var(--spacing-none);
  --form-control-disabled-opacity: 1;
  --form-control-invalid-placeholder-color: var(--color-neutral-500);
  --form-control-help-text-font-size: var(--font-size-sm);
  --form-control-help-text-font-weight: var(--font-weight-regular);
  --form-control-help-text-gap: var(--spacing-xxs);
  --form-control-label-font-size: var(--font-size-sm);
  --form-control-label-font-weight: var(--font-weight-regular);
  --form-control-label-gap: var(--spacing-xxs);
  --form-control-label-required-indicator-gap: var(--spacing-xxs);
  --heading-fg-color: inherit;
  --heading-font-family: inherit;
  --heading-font-weight: var(--font-weight-semi-bold);
  --heading-line-height: var(--line-height-sm);
  --link-decoration: none;
  --link-active-decoration: underline;
  --link-hover-decoration: underline;
  --link-focus-decoration: underline;
  --link-visited-decoration: none;
  --link-disabled-decoration: none;
  --focus-outline: var(--focus-outline-size) var(--focus-outline-color)
    var(--focus-outline-style);
  --focus-outline-offset: var(--spacing-xxs);
  --focus-outline-size: var(--border-width-thick);
  --focus-outline-style: solid;
  --border-radius-none: 0;
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-pill: 10rem;
  --border-radius-circle: 50%;
  --border-width-none: 0;
  --border-width-thin: 1px;
  --border-width-thick: 2px;
  --border-width-thicker: 3px;
  --border-width-thickest: 4px;
  --color-primary-50: rgba(225, 238, 255, var(--color-primary-50-alpha));
  --color-primary-50-alt: black;
  --color-primary-50-alpha: 1;
  --color-primary-100: rgba(199, 224, 254, var(--color-primary-100-alpha));
  --color-primary-100-alt: black;
  --color-primary-100-alpha: 1;
  --color-primary-200: rgba(139, 191, 254, var(--color-primary-200-alpha));
  --color-primary-200-alt: black;
  --color-primary-200-alpha: 1;
  --color-primary-300: rgba(83, 160, 253, var(--color-primary-300-alpha));
  --color-primary-300-alt: black;
  --color-primary-300-alpha: 1;
  --color-primary-400: rgba(28, 130, 253, var(--color-primary-400-alpha));
  --color-primary-400-alt: black;
  --color-primary-400-alpha: 1;
  --color-primary-500: rgba(2, 101, 220, var(--color-primary-500-alpha));
  --color-primary-500-alt: white;
  --color-primary-500-alpha: 1;
  --color-primary-600: rgba(2, 81, 177, var(--color-primary-600-alpha));
  --color-primary-600-alt: white;
  --color-primary-600-alpha: 1;
  --color-primary-700: rgba(1, 60, 131, var(--color-primary-700-alpha));
  --color-primary-700-alt: white;
  --color-primary-700-alpha: 1;
  --color-primary-800: rgba(1, 39, 86, var(--color-primary-800-alpha));
  --color-primary-800-alt: white;
  --color-primary-800-alpha: 1;
  --color-primary-900: rgba(0, 21, 45, var(--color-primary-900-alpha));
  --color-primary-900-alt: white;
  --color-primary-900-alpha: 1;
  --color-primary-950: rgba(0, 9, 20, var(--color-primary-950-alpha));
  --color-primary-950-alt: white;
  --color-primary-950-alpha: 1;
  --color-danger-50: rgba(251, 233, 233, var(--color-danger-50-alpha));
  --color-danger-50-alt: black;
  --color-danger-50-alpha: 1;
  --color-danger-100: rgba(248, 211, 211, var(--color-danger-100-alpha));
  --color-danger-100-alt: black;
  --color-danger-100-alpha: 1;
  --color-danger-200: rgba(241, 167, 167, var(--color-danger-200-alpha));
  --color-danger-200-alt: black;
  --color-danger-200-alpha: 1;
  --color-danger-300: rgba(234, 123, 123, var(--color-danger-300-alpha));
  --color-danger-300-alt: black;
  --color-danger-300-alpha: 1;
  --color-danger-400: rgba(227, 79, 79, var(--color-danger-400-alpha));
  --color-danger-400-alt: black;
  --color-danger-400-alpha: 1;
  --color-danger-500: rgba(220, 38, 38, var(--color-danger-500-alpha));
  --color-danger-500-alt: white;
  --color-danger-500-alpha: 1;
  --color-danger-600: rgba(176, 28, 28, var(--color-danger-600-alpha));
  --color-danger-600-alt: white;
  --color-danger-600-alpha: 1;
  --color-danger-700: rgba(132, 21, 21, var(--color-danger-700-alpha));
  --color-danger-700-alt: white;
  --color-danger-700-alpha: 1;
  --color-danger-800: rgba(88, 14, 14, var(--color-danger-800-alpha));
  --color-danger-800-alt: white;
  --color-danger-800-alpha: 1;
  --color-danger-900: rgba(44, 7, 7, var(--color-danger-900-alpha));
  --color-danger-900-alt: white;
  --color-danger-900-alpha: 1;
  --color-danger-950: rgba(22, 4, 4, var(--color-danger-950-alpha));
  --color-danger-950-alt: white;
  --color-danger-950-alpha: 1;
  --color-neutral-0: rgba(255, 255, 255, var(--color-neutral-0-alpha));
  --color-neutral-0-alt: black;
  --color-neutral-0-alpha: 1;
  --color-neutral-50: rgba(250, 250, 250, var(--color-neutral-50-alpha));
  --color-neutral-50-alt: black;
  --color-neutral-50-alpha: 1;
  --color-neutral-100: rgba(247, 247, 247, var(--color-neutral-100-alpha));
  --color-neutral-100-alt: black;
  --color-neutral-100-alpha: 1;
  --color-neutral-200: rgba(237, 237, 237, var(--color-neutral-200-alpha));
  --color-neutral-200-alt: black;
  --color-neutral-200-alpha: 1;
  --color-neutral-300: rgba(230, 230, 230, var(--color-neutral-300-alpha));
  --color-neutral-300-alt: black;
  --color-neutral-300-alpha: 1;
  --color-neutral-400: rgba(222, 222, 222, var(--color-neutral-400-alpha));
  --color-neutral-400-alt: black;
  --color-neutral-400-alpha: 1;
  --color-neutral-500: rgba(213, 213, 213, var(--color-neutral-500-alpha));
  --color-neutral-500-alt: black;
  --color-neutral-500-alpha: 1;
  --color-neutral-600: rgba(171, 171, 171, var(--color-neutral-600-alpha));
  --color-neutral-600-alt: black;
  --color-neutral-600-alpha: 1;
  --color-neutral-700: rgba(128, 128, 128, var(--color-neutral-700-alpha));
  --color-neutral-700-alt: black;
  --color-neutral-700-alpha: 1;
  --color-neutral-800: rgba(84, 84, 84, var(--color-neutral-800-alpha));
  --color-neutral-800-alt: white;
  --color-neutral-800-alpha: 1;
  --color-neutral-900: rgba(43, 43, 43, var(--color-neutral-900-alpha));
  --color-neutral-900-alt: white;
  --color-neutral-900-alpha: 1;
  --color-neutral-950: rgba(20, 20, 20, var(--color-neutral-950-alpha));
  --color-neutral-950-alt: white;
  --color-neutral-950-alpha: 1;
  --color-neutral-1000: rgba(0, 0, 0, var(--color-neutral-1000-alpha));
  --color-neutral-1000-alt: white;
  --color-neutral-1000-alpha: 1;
  --duration-xslow: 2s;
  --duration-slow: 1s;
  --duration-med: 0.5s;
  --duration-fast: 0.3s;
  --duration-xfast: 0.1s;
  --font-family-accent:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-base:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace:
    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  --font-size-xxs: 0.75rem;
  --font-size-xs: 0.875rem;
  --font-size-sm: 1rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 3rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --line-height-xs: 1;
  --line-height-sm: 1.25;
  --line-height-md: 1.5;
  --line-height-lg: 2;
  --shadow-none: none;
  --shadow-inner: inset 1px 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-outline: 0 0 0 3px rgba(0, 0, 0, 0.5);
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-sm: 0 3px 5px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
  --spacing-none: 0;
  --spacing-3xs: 0.0625rem;
  --spacing-xxs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.25rem;
  --spacing-xxl: 1.5rem;
  --spacing-3xl: 2rem;
  --timing-function-ease: ease;
  --timing-function-ease-in: ease-in;
  --timing-function-ease-in-out: ease-in-out;
  --timing-function-ease-out: ease-out;
  --timing-function-linear: linear;
}

/* Light theme styles */
.charm-light {
  --body-bg-color: var(--color-neutral-0);
  --body-fg-color: var(--color-neutral-1000);
  --button-bg-color: var(--color-neutral-200);
  --button-border-color: var(--color-neutral-800);
  --button-fg-color: var(--color-neutral-200-alt);
  --button-active-fg-color: var(--color-neutral-800);
  --button-active-border-color: var(--color-neutral-800);
  --button-active-bg-color: var(--color-neutral-300);
  --button-disabled-bg-color: var(--color-neutral-300);
  --button-disabled-border-color: var(--color-neutral-300);
  --button-disabled-fg-color: var(--color-neutral-400);
  --button-focus-bg-color: var(--color-neutral-200);
  --button-focus-border-color: var(--color-neutral-800);
  --button-focus-fg-color: var(--color-neutral-200-alt);
  --button-hover-bg-color: var(--color-neutral-400);
  --button-hover-border-color: var(--color-neutral-800);
  --button-hover-fg-color: var(--color-neutral-200-alt);
  --form-control-bg-color: var(--color-neutral-0);
  --form-control-fg-color: var(--color-neutral-1000);
  --form-control-disabled-bg-color: var(--color-neutral-100);
  --form-control-disabled-border-color: var(--color-neutral-400);
  --form-control-disabled-fg-color: var(--color-neutral-400);
  --form-control-disabled-placeholder-color: var(--color-neutral-300);
  --form-control-invalid-bg-color: var(--color-neutral-0);
  --form-control-invalid-border-color: var(--color-danger-500);
  --form-control-invalid-fg-color: var(--color-danger-500);
  --form-control-invalid-message-fg-color: var(--color-danger-500);
  --form-control-focus-bg-color: var(--color-neutral-0);
  --form-control-focus-border-color: var(--color-primary-500);
  --form-control-focus-fg-color: var(--color-neutral-1000);
  --form-control-help-text-fg-color: var(--color-neutral-800);
  --form-control-label-fg-color: var(--color-neutral-1000);
  --link-fg-color: var(--color-primary-500);
  --link-active-fg-color: var(--color-primary-700);
  --link-hover-fg-color: var(--color-primary-600);
  --link-focus-fg-color: var(--color-primary-500);
  --link-visited-fg-color: var(--color-primary-700);
  --link-disabled-fg-color: var(--color-neutral-400);
  --focus-outline-color: var(--color-primary-500);
  --nav-bg-color: var(--color-neutral-200);
  --card-bg-color: var(--color-neutral-0);
  --card-border-color: var(--color-neutral-300);
  --button-accent-bg-color: var(--color-primary-500);
  --button-accent-fg-color: var(--color-neutral-0);
  --button-accent-hover-bg-color: var(--color-primary-600);
  --alert-bg-color: var(--color-neutral-0);
  --alert-fg-color: var(--color-neutral-1000);
  --avatar-bg-color: var(--color-neutral-300);
  --avatar-fg-color: var(--color-neutral-1000);
  --checkbox-bg-color: var(--color-neutral-0);
  --checkbox-border-color: var(--color-neutral-800);
  --checkbox-fg-color: var(--color-neutral-1000);
  --checkbox-fg-color-checked: var(--color-neutral-1000);
  --divider-bg-color: var(--color-neutral-300);
  --divider-fg-color: var(--color-neutral-1000);
  --spinner-label-color: var(--color-neutral-1000);
  --search-bg-color: var(--color-neutral-0);
  --search-border-color: var(--color-neutral-100);
  --search-fg-color: var(--color-neutral-1000);
  --search-placeholder-color: var(--color-neutral-500);
  --site-title-fg-color: var(--color-primary-800);
  --theme-select-bg-color: var(--color-neutral-100);
  --theme-select-fg-color: var(--color-neutral-800);
  --theme-select-hover-border-color: var(--color-neutral-700);
  --theme-select-border-color: var(--color-neutral-600);
  --header-divider-color: var(--color-neutral-600);
  --sidebar-text-color: var(--color-neutral-800);
  --sidebar-bg-color: var(--color-primary-50);
  --sidebar-fg-color: var(--color-primary-700);
  --sidebar-selected-bg-color: var(--color-primary-100);
  --sidebar-selected-fg-color: var(--color-primary-800);
  --sidebar-hover-bg-color: var(--color-primary-50);
  --sidebar-hover-fg-color: var(--color-primary-700);
  --code-bubble-border-color: var(--color-neutral-700);
  --code-bubble-button-border-color: var(--color-neutral-700);
  --code-bubble-button-hover-border-color: var(--color-neutral-600);
  --code-bubble-copy-button-border-color: var(--color-neutral-700);
  --code-bubble-copy-button-hover-border-color: var(--color-neutral-600);
  --skip-to-content-bg-color: var(--color-neutral-700);
  --skip-to-content-fg-color: var(--color-neutral-0);
  --skip-to-content-hover-bg-color: var(--color-neutral-600);
  --skip-to-content-hover-fg-color: var(--color-neutral-0);
  --toc-link-color: var(--color-neutral-800);
}

/* Dark theme styles */
.charm-dark {
  --body-bg-color: var(--color-neutral-900);
  --body-fg-color: var(--color-neutral-0);
  --button-bg-color: var(--color-neutral-800);
  --button-border-color: var(--color-neutral-800);
  --button-fg-color: var(--color-neutral-800-alt);
  --button-active-fg-color: var(--color-neutral-800);
  --button-active-border-color: var(--color-neutral-800);
  --button-active-bg-color: var(--color-neutral-700);
  --button-disabled-bg-color: var(--color-neutral-300);
  --button-disabled-border-color: var(--color-neutral-300);
  --button-disabled-fg-color: var(--color-neutral-400);
  --button-focus-bg-color: var(--color-neutral-800);
  --button-focus-border-color: var(--color-neutral-800);
  --button-focus-fg-color: var(--color-neutral-800-alt);
  --button-hover-bg-color: var(--color-neutral-700);
  --button-hover-border-color: var(--color-neutral-800);
  --button-hover-fg-color: var(--color-neutral-700-alt);
  --form-control-bg-color: var(--color-neutral-800);
  --form-control-fg-color: var(--color-neutral-0);
  --form-control-disabled-bg-color: var(--color-neutral-700);
  --form-control-disabled-border-color: var(--color-neutral-400);
  --form-control-disabled-fg-color: var(--color-neutral-400);
  --form-control-disabled-placeholder-color: var(--color-neutral-300);
  --form-control-invalid-bg-color: var(--color-neutral-800);
  --form-control-invalid-border-color: var(--color-danger-300);
  --form-control-invalid-fg-color: var(--color-danger-300);
  --form-control-invalid-message-fg-color: var(--color-danger-300);
  --form-control-focus-bg-color: var(--color-neutral-800);
  --form-control-focus-border-color: var(--color-primary-200);
  --form-control-focus-fg-color: var(--color-neutral-0);
  --form-control-help-text-fg-color: var(--color-neutral-200);
  --form-control-label-fg-color: var(--color-neutral-0);
  --link-fg-color: var(--color-primary-200);
  --link-active-fg-color: var(--color-primary-400);
  --link-hover-fg-color: var(--color-primary-300);
  --link-focus-fg-color: var(--color-primary-200);
  --link-visited-fg-color: var(--color-primary-400);
  --link-disabled-fg-color: var(--color-neutral-400);
  --focus-outline-color: var(--color-primary-200);
  --nav-bg-color: var(--color-neutral-900);
  --card-bg-color: var(--color-neutral-900);
  --card-border-color: var(--color-neutral-700);
  --button-accent-bg-color: var(--color-primary-600);
  --button-accent-fg-color: var(--color-neutral-0);
  --button-accent-hover-bg-color: var(--color-primary-500);
  --alert-bg-color: var(--color-neutral-800);
  --alert-fg-color: var(--color-neutral-0);
  --avatar-bg-color: var(--color-neutral-700);
  --avatar-fg-color: var(--color-neutral-0);
  --checkbox-bg-color: var(--color-neutral-800);
  --checkbox-border-color: var(--color-neutral-800);
  --checkbox-fg-color: var(--color-neutral-0);
  --checkbox-fg-color-checked: var(--color-neutral-0);
  --divider-bg-color: var(--color-neutral-700);
  --divider-fg-color: var(--color-neutral-0);
  --spinner-label-color: var(--color-neutral-0);
  --search-bg-color: var(--color-neutral-800);
  --search-border-color: var(--color-neutral-800);
  --search-fg-color: var(--color-neutral-0);
  --search-placeholder-color: var(--color-neutral-500);
  --site-title-fg-color: var(--color-primary-200);
  --theme-select-bg-color: var(--color-neutral-700);
  --theme-select-fg-color: var(--color-neutral-200);
  --theme-select-hover-border-color: var(--color-neutral-200);
  --theme-select-border-color: var(--color-neutral-600);
  --header-divider-color: var(--color-neutral-700);
  --sidebar-text-color: var(--color-neutral-200);
  --sidebar-bg-color: var(--color-primary-900);
  --sidebar-fg-color: var(--color-primary-500);
  --sidebar-selected-bg-color: var(--color-primary-50);
  --sidebar-selected-fg-color: var(--color-primary-800);
  --sidebar-hover-bg-color: var(--color-primary-100);
  --sidebar-hover-fg-color: var(--color-primary-700);
  --code-bubble-border-color: var(--color-neutral-600);
  --code-bubble-button-border-color: var(--color-neutral-600);
  --code-bubble-button-hover-border-color: var(--color-neutral-500);
  --code-bubble-copy-button-border-color: var(--color-neutral-600);
  --code-bubble-copy-button-hover-border-color: var(--color-neutral-500);
  --skip-to-content-bg-color: var(--color-neutral-200);
  --skip-to-content-fg-color: var(--color-neutral-1000);
  --skip-to-content-hover-bg-color: var(--color-neutral-300);
  --skip-to-content-hover-fg-color: var(--color-neutral-1000);
  --toc-link-color: var(--color-neutral-300);
}