/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/* Common */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --ifm-color-scheme: light;

  /* Colors. */
  --ifm-dark-value: 10%;
  --ifm-darker-value: 15%;
  --ifm-darkest-value: 30%;
  --ifm-light-value: 15%;
  --ifm-lighter-value: 30%;
  --ifm-lightest-value: 50%;

  /*
  This seems like a lot, but we want to ensure enough contrast.
  Goal is to have a min score of 3 on https://www.myndex.com/APCA/fullmatrix
  For fontWeight 400 + score 3, the cell must show a value < 16px (fontsize we use in places like alerts)
  See also https://github.com/facebookincubator/infima/issues/55#issuecomment-884023075
   */
  --ifm-contrast-background-value: 90%;
  --ifm-contrast-foreground-value: 70%;
  /* Using slightly different values for dark mode */
  --ifm-contrast-background-dark-value: 70%;
  --ifm-contrast-foreground-dark-value: 90%;

  --ifm-color-primary: #3578e5;
  --ifm-color-secondary: #ebedf0;
  --ifm-color-success: #00a400;
  --ifm-color-info: #54c7ec;
  --ifm-color-warning: #ffba00;
  --ifm-color-danger: #fa383e;
    --ifm-color-primary-dark: rgb(48, 108, 206);
    --ifm-color-primary-darker: rgb(45, 102, 195);
    --ifm-color-primary-darkest: rgb(37, 84, 160);
    --ifm-color-primary-light: rgb(83, 140, 233);
    --ifm-color-primary-lighter: rgb(114, 161, 237);
    --ifm-color-primary-lightest: rgb(154, 188, 242);
    --ifm-color-primary-contrast-background: rgb(235, 242, 252);
    --ifm-color-primary-contrast-foreground: rgb(16, 36, 69);
    --ifm-color-secondary-dark: rgb(212, 213, 216);
    --ifm-color-secondary-darker: rgb(200, 201, 204);
    --ifm-color-secondary-darkest: rgb(164, 166, 168);
    --ifm-color-secondary-light: rgb(238, 240, 242);
    --ifm-color-secondary-lighter: rgb(241, 242, 245);
    --ifm-color-secondary-lightest: rgb(245, 246, 248);
    --ifm-color-secondary-contrast-background: rgb(253, 253, 254);
    --ifm-color-secondary-contrast-foreground: rgb(71, 71, 72);
    --ifm-color-success-dark: rgb(0, 148, 0);
    --ifm-color-success-darker: rgb(0, 139, 0);
    --ifm-color-success-darkest: rgb(0, 115, 0);
    --ifm-color-success-light: rgb(38, 178, 38);
    --ifm-color-success-lighter: rgb(77, 191, 77);
    --ifm-color-success-lightest: rgb(128, 210, 128);
    --ifm-color-success-contrast-background: rgb(230, 246, 230);
    --ifm-color-success-contrast-foreground: rgb(0, 49, 0);
    --ifm-color-info-dark: rgb(76, 179, 212);
    --ifm-color-info-darker: rgb(71, 169, 201);
    --ifm-color-info-darkest: rgb(59, 139, 165);
    --ifm-color-info-light: rgb(110, 207, 239);
    --ifm-color-info-lighter: rgb(135, 216, 242);
    --ifm-color-info-lightest: rgb(170, 227, 246);
    --ifm-color-info-contrast-background: rgb(238, 249, 253);
    --ifm-color-info-contrast-foreground: rgb(25, 60, 71);
    --ifm-color-warning-dark: rgb(230, 167, 0);
    --ifm-color-warning-darker: rgb(217, 158, 0);
    --ifm-color-warning-darkest: rgb(179, 130, 0);
    --ifm-color-warning-light: rgb(255, 196, 38);
    --ifm-color-warning-lighter: rgb(255, 207, 77);
    --ifm-color-warning-lightest: rgb(255, 221, 128);
    --ifm-color-warning-contrast-background: rgb(255, 248, 230);
    --ifm-color-warning-contrast-foreground: rgb(77, 56, 0);
    --ifm-color-danger-dark: rgb(225, 50, 56);
    --ifm-color-danger-darker: rgb(213, 48, 53);
    --ifm-color-danger-darkest: rgb(175, 39, 43);
    --ifm-color-danger-light: rgb(251, 86, 91);
    --ifm-color-danger-lighter: rgb(251, 116, 120);
    --ifm-color-danger-lightest: rgb(253, 156, 159);
    --ifm-color-danger-contrast-background: rgb(255, 235, 236);
    --ifm-color-danger-contrast-foreground: rgb(75, 17, 19);

  --ifm-color-white: #fff;
  --ifm-color-black: #000;

  --ifm-color-gray-0: var(--ifm-color-white);
  --ifm-color-gray-100: #f5f6f7;
  --ifm-color-gray-200: #ebedf0;
  --ifm-color-gray-300: #dadde1;
  --ifm-color-gray-400: #ccd0d5;
  --ifm-color-gray-500: #bec3c9;
  --ifm-color-gray-600: #8d949e;
  --ifm-color-gray-700: #606770;
  --ifm-color-gray-800: #444950;
  --ifm-color-gray-900: #1c1e21;
  --ifm-color-gray-1000: var(--ifm-color-black);

  --ifm-color-emphasis-0: var(--ifm-color-gray-0);
  --ifm-color-emphasis-100: var(--ifm-color-gray-100);
  --ifm-color-emphasis-200: var(--ifm-color-gray-200);
  --ifm-color-emphasis-300: var(--ifm-color-gray-300);
  --ifm-color-emphasis-400: var(--ifm-color-gray-400);
  --ifm-color-emphasis-500: var(--ifm-color-gray-500);
  --ifm-color-emphasis-600: var(--ifm-color-gray-600);
  --ifm-color-emphasis-700: var(--ifm-color-gray-700);
  --ifm-color-emphasis-800: var(--ifm-color-gray-800);
  --ifm-color-emphasis-900: var(--ifm-color-gray-900);
  --ifm-color-emphasis-1000: var(--ifm-color-gray-1000);

  /* Base. */
  --ifm-color-content: var(--ifm-color-emphasis-900);
  --ifm-color-content-inverse: var(--ifm-color-emphasis-0);
  --ifm-color-content-secondary: #525860;

  --ifm-background-color: transparent; /* Body's background. */
  --ifm-background-surface-color: var(--ifm-color-content-inverse);
  --ifm-global-border-width: 1px;
  --ifm-global-radius: 0.4rem;

  --ifm-hover-overlay: rgba(0, 0, 0, 0.05);

  /* Typography. */
  --ifm-font-color-base: var(--ifm-color-content);
  --ifm-font-color-base-inverse: var(--ifm-color-content-inverse);
  --ifm-font-color-secondary: var(--ifm-color-content-secondary);
  --ifm-font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
    'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  --ifm-font-size-base: 100%;

  --ifm-font-weight-light: 300;
  --ifm-font-weight-normal: 400;
  --ifm-font-weight-semibold: 500;
  --ifm-font-weight-bold: 700;

  --ifm-font-weight-base: var(--ifm-font-weight-normal);
  --ifm-line-height-base: 1.65;

  /* Spacing. */
  --ifm-global-spacing: 1rem;
  --ifm-spacing-vertical: var(--ifm-global-spacing);
  --ifm-spacing-horizontal: var(--ifm-global-spacing);

  /* Transitions. */
  --ifm-transition-fast: 200ms;
  --ifm-transition-slow: 400ms;
  --ifm-transition-timing-default: cubic-bezier(0.08, 0.52, 0.52, 1);

  /* Shadows. */
  --ifm-global-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --ifm-global-shadow-md: 0 5px 40px rgba(0, 0, 0, 0.2);
  --ifm-global-shadow-tl: 0 12px 28px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px 0 rgba(0, 0, 0, 0.1);

  /* Z-index. */
  --ifm-z-index-dropdown: 100;
  --ifm-z-index-fixed: 200;
  --ifm-z-index-overlay: 400;
  --ifm-container-width: 1140px;
  --ifm-container-width-xl: 1320px;
  --ifm-code-background: rgb(246, 247, 248);
  --ifm-code-border-radius: var(--ifm-global-radius);
  --ifm-code-font-size: 90%;
  --ifm-code-padding-horizontal: 0.1rem;
  --ifm-code-padding-vertical: 0.1rem;

  --ifm-pre-background: var(--ifm-code-background);
  --ifm-pre-border-radius: var(--ifm-code-border-radius);
  --ifm-pre-color: inherit;
  --ifm-pre-line-height: 1.45;
  --ifm-pre-padding: 1rem;
  --ifm-heading-color: inherit;
  --ifm-heading-margin-top: 0;
  --ifm-heading-margin-bottom: var(--ifm-spacing-vertical);
  --ifm-heading-font-family: var(--ifm-font-family-base);
  --ifm-heading-font-weight: var(--ifm-font-weight-bold);
  --ifm-heading-line-height: 1.25;

  --ifm-h1-font-size: 2rem;
  --ifm-h2-font-size: 1.5rem;
  --ifm-h3-font-size: 1.25rem;
  --ifm-h4-font-size: 1rem;
  --ifm-h5-font-size: 0.875rem;
  --ifm-h6-font-size: 0.85rem;
  --ifm-image-alignment-padding: 1.25rem;
  /* Leading is the distance between two baselines */
  /* TODO: add appropriate mobile leading */
  --ifm-leading-desktop: 1.25;
  --ifm-leading: calc(var(--ifm-leading-desktop) * 1rem);
  --ifm-list-left-padding: 2rem;
  --ifm-list-margin: 1rem;
  --ifm-list-item-margin: 0.25rem;
  --ifm-list-paragraph-margin: 1rem;
  --ifm-table-cell-padding: 0.75rem;

  --ifm-table-background: transparent;
  --ifm-table-stripe-background: rgba(0, 0, 0, 0.03);

  --ifm-table-border-width: 1px;
  --ifm-table-border-color: var(--ifm-color-emphasis-300);

  --ifm-table-head-background: inherit;
  --ifm-table-head-color: inherit;
  --ifm-table-head-font-weight: var(--ifm-font-weight-bold);

  --ifm-table-cell-color: inherit;
  /* Links. */
  --ifm-link-color: var(--ifm-color-primary);
  --ifm-link-decoration: none;
  --ifm-link-hover-color: var(--ifm-link-color);
  --ifm-link-hover-decoration: underline;

  /* Paragraphs. */
  --ifm-paragraph-margin-bottom: var(--ifm-leading);

  /* Blockquotes. */
  --ifm-blockquote-font-size: var(--ifm-font-size-base);
  --ifm-blockquote-border-left-width: 2px;
  --ifm-blockquote-padding-horizontal: var(--ifm-spacing-horizontal);
  --ifm-blockquote-padding-vertical: 0;
  --ifm-blockquote-shadow: none;
  --ifm-blockquote-color: var(--ifm-color-emphasis-800);
  --ifm-blockquote-border-color: var(--ifm-color-emphasis-300);

  /* Horizontal Rules. */
  --ifm-hr-background-color: var(--ifm-color-emphasis-500);
  --ifm-hr-height: 1px;
  --ifm-hr-margin-vertical: 1.5rem;
  --ifm-scrollbar-size: 7px;
  --ifm-scrollbar-track-background-color: #f1f1f1;
  --ifm-scrollbar-thumb-background-color: #c0c0c0;
  --ifm-scrollbar-thumb-hover-background-color: #a7a7a7;
  --ifm-alert-background-color: inherit; /* Set a default which will be overridden later. */
  --ifm-alert-border-color: inherit; /* Set a default which will be overridden later. */
  --ifm-alert-border-radius: var(--ifm-global-radius);
  --ifm-alert-border-width: 0px; /* For users that want to easily add a border */
  --ifm-alert-border-left-width: 5px;
  --ifm-alert-color: var(--ifm-font-color-base);
  --ifm-alert-padding-horizontal: var(--ifm-spacing-horizontal);
  --ifm-alert-padding-vertical: var(--ifm-spacing-vertical);
  --ifm-alert-shadow: var(--ifm-global-shadow-lw);
  --ifm-avatar-intro-margin: 1rem;
  --ifm-avatar-intro-alignment: inherit;
  --ifm-avatar-photo-size: 3rem;
  --ifm-badge-background-color: inherit; /* Set a default which will be overridden later. */
  --ifm-badge-border-color: inherit; /* Set a default which will be overridden later. */
  --ifm-badge-border-radius: var(--ifm-global-radius);
  --ifm-badge-border-width: var(--ifm-global-border-width);
  --ifm-badge-color: var(--ifm-color-white);
  --ifm-badge-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 0.5);
  --ifm-badge-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25);
  --ifm-breadcrumb-border-radius: 1.5rem;
  --ifm-breadcrumb-spacing: 0.5rem;
  --ifm-breadcrumb-color-active: var(--ifm-color-primary);
  --ifm-breadcrumb-item-background-active: var(--ifm-hover-overlay);
  --ifm-breadcrumb-padding-horizontal: 0.8rem;
  --ifm-breadcrumb-padding-vertical: 0.4rem;
  --ifm-breadcrumb-size-multiplier: 1;
  --ifm-breadcrumb-separator: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
  --ifm-breadcrumb-separator-filter: none;
  --ifm-breadcrumb-separator-size: 0.5rem;
  --ifm-breadcrumb-separator-size-multiplier: 1.25;
  --ifm-button-background-color: inherit;
  --ifm-button-border-color: var(--ifm-button-background-color);
  --ifm-button-border-width: var(--ifm-global-border-width);
  --ifm-button-color: var(--ifm-font-color-base-inverse);
  --ifm-button-font-weight: var(--ifm-font-weight-bold);
  --ifm-button-padding-horizontal: 1.5rem;
  --ifm-button-padding-vertical: 0.375rem;
  --ifm-button-size-multiplier: 1;
  --ifm-button-transition-duration: var(--ifm-transition-fast);
  --ifm-button-border-radius: calc(
    var(--ifm-global-radius) * var(--ifm-button-size-multiplier)
  );
  --ifm-button-group-spacing: 2px;
  --ifm-card-background-color: var(--ifm-background-surface-color);
  --ifm-card-border-radius: calc(var(--ifm-global-radius) * 2);
  --ifm-card-horizontal-spacing: var(--ifm-global-spacing);
  --ifm-card-vertical-spacing: var(--ifm-global-spacing);
  --ifm-toc-border-color: var(--ifm-color-emphasis-300);
  --ifm-toc-link-color: var(--ifm-color-content-secondary);
  --ifm-toc-padding-vertical: 0.5rem;
  --ifm-toc-padding-horizontal: 0.5rem;
  --ifm-dropdown-background-color: var(--ifm-background-surface-color);
  --ifm-dropdown-font-weight: var(--ifm-font-weight-semibold);
  --ifm-dropdown-link-color: var(--ifm-font-color-base);
  --ifm-dropdown-hover-background-color: var(--ifm-hover-overlay);
  --ifm-footer-background-color: var(--ifm-color-emphasis-100);
  --ifm-footer-color: inherit;
  --ifm-footer-link-color: var(--ifm-color-emphasis-700);
  --ifm-footer-link-hover-color: var(--ifm-color-primary);
  --ifm-footer-link-horizontal-spacing: 0.5rem;
  --ifm-footer-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 2);
  --ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 2);
  --ifm-footer-title-color: inherit;
  --ifm-footer-logo-max-width: min(30rem, 90vw);
  --ifm-hero-background-color: var(--ifm-background-surface-color);
  --ifm-hero-text-color: var(--ifm-color-emphasis-800);
  --ifm-menu-color: var(--ifm-color-emphasis-700);
  --ifm-menu-color-active: var(--ifm-color-primary);
  --ifm-menu-color-background-active: var(--ifm-hover-overlay);
  --ifm-menu-color-background-hover: var(--ifm-hover-overlay);
  --ifm-menu-link-padding-horizontal: 0.75rem;
  --ifm-menu-link-padding-vertical: 0.375rem;
  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
  --ifm-menu-link-sublist-icon-filter: none;
  --ifm-navbar-background-color: var(--ifm-background-surface-color);
  --ifm-navbar-height: 3.75rem;
  --ifm-navbar-item-padding-horizontal: 0.75rem;
  --ifm-navbar-item-padding-vertical: 0.25rem;
  --ifm-navbar-link-color: var(--ifm-font-color-base);
  --ifm-navbar-link-hover-color: var(--ifm-color-primary);
  --ifm-navbar-link-active-color: var(--ifm-link-color);
  --ifm-navbar-padding-horizontal: var(--ifm-spacing-horizontal);
  --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5);
  --ifm-navbar-shadow: var(--ifm-global-shadow-lw);
  --ifm-navbar-search-input-background-color: var(--ifm-color-emphasis-200);
  --ifm-navbar-search-input-color: var(--ifm-color-emphasis-800);
  --ifm-navbar-search-input-placeholder-color: var(--ifm-color-emphasis-500);
  --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
  --ifm-navbar-sidebar-width: 83vw;
  --ifm-pagination-border-radius: var(--ifm-global-radius);
  --ifm-pagination-color-active: var(--ifm-color-primary);
  --ifm-pagination-font-size: 1rem;
  --ifm-pagination-item-active-background: var(--ifm-hover-overlay);
  --ifm-pagination-page-spacing: 0.2em;
  --ifm-pagination-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 1);
  --ifm-pagination-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25);
  --ifm-pagination-nav-border-radius: var(--ifm-global-radius);
  --ifm-pagination-nav-color-hover: var(--ifm-color-primary);
  --ifm-pills-color-active: var(--ifm-color-primary);
  --ifm-pills-color-background-active: var(--ifm-hover-overlay);
  --ifm-pills-spacing: 0.125rem;
  --ifm-tabs-color: var(--ifm-font-color-secondary);
  --ifm-tabs-color-active: var(--ifm-color-primary);
  --ifm-tabs-color-active-border: var(--ifm-tabs-color-active);
  --ifm-tabs-padding-horizontal: 1rem;
  --ifm-tabs-padding-vertical: 1rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

* {
  box-sizing: border-box;
}

html {
  background-color: var(--ifm-background-color);
  color: var(--ifm-font-color-base);
  color-scheme: var(--ifm-color-scheme);
  font: var(--ifm-font-size-base) / var(--ifm-line-height-base)
    var(--ifm-font-family-base);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizelegibility;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

body {
  margin: 0;
  word-wrap: break-word;
}

iframe {
  border: 0;
  color-scheme: auto;
}

/* Layout */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.container {
  margin: 0 auto;
  max-width: var(--ifm-container-width);
  padding: 0 var(--ifm-spacing-horizontal);
  width: 100%;
}

.container--fluid {
    max-width: inherit;
  }

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--ifm-spacing-horizontal) * -1);
}

.row--no-gutters {
    margin-left: 0;
    margin-right: 0;
  }

.row--no-gutters > .col {
      padding-left: 0;
      padding-right: 0;
    }

.row--align-top {
    align-items: flex-start;
  }

.row--align-bottom {
    align-items: flex-end;
  }

.row--align-center {
    align-items: center;
  }

.row--align-stretch {
    align-items: stretch;
  }

.row--align-baseline {
    align-items: baseline;
  }

.col {
  --ifm-col-width: 100%;

  flex: 1 0;
  margin-left: 0;
  max-width: var(--ifm-col-width);
  padding: 0 var(--ifm-spacing-horizontal);
  width: 100%;
}

.col[class*='col--'] {
    flex: 0 0 var(--ifm-col-width);
  }

.col--1 {
      --ifm-col-width: calc(1 / 12 * 100%);
    }

.col--offset-1 {
      margin-left: calc(1 / 12 * 100%);
    }

.col--2 {
      --ifm-col-width: calc(2 / 12 * 100%);
    }

.col--offset-2 {
      margin-left: calc(2 / 12 * 100%);
    }

.col--3 {
      --ifm-col-width: calc(3 / 12 * 100%);
    }

.col--offset-3 {
      margin-left: calc(3 / 12 * 100%);
    }

.col--4 {
      --ifm-col-width: calc(4 / 12 * 100%);
    }

.col--offset-4 {
      margin-left: calc(4 / 12 * 100%);
    }

.col--5 {
      --ifm-col-width: calc(5 / 12 * 100%);
    }

.col--offset-5 {
      margin-left: calc(5 / 12 * 100%);
    }

.col--6 {
      --ifm-col-width: calc(6 / 12 * 100%);
    }

.col--offset-6 {
      margin-left: calc(6 / 12 * 100%);
    }

.col--7 {
      --ifm-col-width: calc(7 / 12 * 100%);
    }

.col--offset-7 {
      margin-left: calc(7 / 12 * 100%);
    }

.col--8 {
      --ifm-col-width: calc(8 / 12 * 100%);
    }

.col--offset-8 {
      margin-left: calc(8 / 12 * 100%);
    }

.col--9 {
      --ifm-col-width: calc(9 / 12 * 100%);
    }

.col--offset-9 {
      margin-left: calc(9 / 12 * 100%);
    }

.col--10 {
      --ifm-col-width: calc(10 / 12 * 100%);
    }

.col--offset-10 {
      margin-left: calc(10 / 12 * 100%);
    }

.col--11 {
      --ifm-col-width: calc(11 / 12 * 100%);
    }

.col--offset-11 {
      margin-left: calc(11 / 12 * 100%);
    }

.col--12 {
      --ifm-col-width: calc(12 / 12 * 100%);
    }

.col--offset-12 {
      margin-left: calc(12 / 12 * 100%);
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.margin--none {
      margin: 0 !important;
    }

.margin-top--none {
        margin-top: 0 !important;
      }

.margin-left--none {
        margin-left: 0 !important;
      }

.margin-bottom--none {
        margin-bottom: 0 !important;
      }

.margin-right--none {
        margin-right: 0 !important;
      }

.margin-vert--none {
      margin-bottom: 0 !important;
      margin-top: 0 !important;
    }

.margin-horiz--none {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

.margin--xs {
      margin: 0.25rem !important;
    }

.margin-top--xs {
        margin-top: 0.25rem !important;
      }

.margin-left--xs {
        margin-left: 0.25rem !important;
      }

.margin-bottom--xs {
        margin-bottom: 0.25rem !important;
      }

.margin-right--xs {
        margin-right: 0.25rem !important;
      }

.margin-vert--xs {
      margin-bottom: 0.25rem !important;
      margin-top: 0.25rem !important;
    }

.margin-horiz--xs {
      margin-left: 0.25rem !important;
      margin-right: 0.25rem !important;
    }

.margin--sm {
      margin: 0.5rem !important;
    }

.margin-top--sm {
        margin-top: 0.5rem !important;
      }

.margin-left--sm {
        margin-left: 0.5rem !important;
      }

.margin-bottom--sm {
        margin-bottom: 0.5rem !important;
      }

.margin-right--sm {
        margin-right: 0.5rem !important;
      }

.margin-vert--sm {
      margin-bottom: 0.5rem !important;
      margin-top: 0.5rem !important;
    }

.margin-horiz--sm {
      margin-left: 0.5rem !important;
      margin-right: 0.5rem !important;
    }

.margin--md {
      margin: 1rem !important;
    }

.margin-top--md {
        margin-top: 1rem !important;
      }

.margin-left--md {
        margin-left: 1rem !important;
      }

.margin-bottom--md {
        margin-bottom: 1rem !important;
      }

.margin-right--md {
        margin-right: 1rem !important;
      }

.margin-vert--md {
      margin-bottom: 1rem !important;
      margin-top: 1rem !important;
    }

.margin-horiz--md {
      margin-left: 1rem !important;
      margin-right: 1rem !important;
    }

.margin--lg {
      margin: 2rem !important;
    }

.margin-top--lg {
        margin-top: 2rem !important;
      }

.margin-left--lg {
        margin-left: 2rem !important;
      }

.margin-bottom--lg {
        margin-bottom: 2rem !important;
      }

.margin-right--lg {
        margin-right: 2rem !important;
      }

.margin-vert--lg {
      margin-bottom: 2rem !important;
      margin-top: 2rem !important;
    }

.margin-horiz--lg {
      margin-left: 2rem !important;
      margin-right: 2rem !important;
    }

.margin--xl {
      margin: 5rem !important;
    }

.margin-top--xl {
        margin-top: 5rem !important;
      }

.margin-left--xl {
        margin-left: 5rem !important;
      }

.margin-bottom--xl {
        margin-bottom: 5rem !important;
      }

.margin-right--xl {
        margin-right: 5rem !important;
      }

.margin-vert--xl {
      margin-bottom: 5rem !important;
      margin-top: 5rem !important;
    }

.margin-horiz--xl {
      margin-left: 5rem !important;
      margin-right: 5rem !important;
    }

.padding--none {
      padding: 0 !important;
    }

.padding-top--none {
        padding-top: 0 !important;
      }

.padding-left--none {
        padding-left: 0 !important;
      }

.padding-bottom--none {
        padding-bottom: 0 !important;
      }

.padding-right--none {
        padding-right: 0 !important;
      }

.padding-vert--none {
      padding-bottom: 0 !important;
      padding-top: 0 !important;
    }

.padding-horiz--none {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

.padding--xs {
      padding: 0.25rem !important;
    }

.padding-top--xs {
        padding-top: 0.25rem !important;
      }

.padding-left--xs {
        padding-left: 0.25rem !important;
      }

.padding-bottom--xs {
        padding-bottom: 0.25rem !important;
      }

.padding-right--xs {
        padding-right: 0.25rem !important;
      }

.padding-vert--xs {
      padding-bottom: 0.25rem !important;
      padding-top: 0.25rem !important;
    }

.padding-horiz--xs {
      padding-left: 0.25rem !important;
      padding-right: 0.25rem !important;
    }

.padding--sm {
      padding: 0.5rem !important;
    }

.padding-top--sm {
        padding-top: 0.5rem !important;
      }

.padding-left--sm {
        padding-left: 0.5rem !important;
      }

.padding-bottom--sm {
        padding-bottom: 0.5rem !important;
      }

.padding-right--sm {
        padding-right: 0.5rem !important;
      }

.padding-vert--sm {
      padding-bottom: 0.5rem !important;
      padding-top: 0.5rem !important;
    }

.padding-horiz--sm {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

.padding--md {
      padding: 1rem !important;
    }

.padding-top--md {
        padding-top: 1rem !important;
      }

.padding-left--md {
        padding-left: 1rem !important;
      }

.padding-bottom--md {
        padding-bottom: 1rem !important;
      }

.padding-right--md {
        padding-right: 1rem !important;
      }

.padding-vert--md {
      padding-bottom: 1rem !important;
      padding-top: 1rem !important;
    }

.padding-horiz--md {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }

.padding--lg {
      padding: 2rem !important;
    }

.padding-top--lg {
        padding-top: 2rem !important;
      }

.padding-left--lg {
        padding-left: 2rem !important;
      }

.padding-bottom--lg {
        padding-bottom: 2rem !important;
      }

.padding-right--lg {
        padding-right: 2rem !important;
      }

.padding-vert--lg {
      padding-bottom: 2rem !important;
      padding-top: 2rem !important;
    }

.padding-horiz--lg {
      padding-left: 2rem !important;
      padding-right: 2rem !important;
    }

.padding--xl {
      padding: 5rem !important;
    }

.padding-top--xl {
        padding-top: 5rem !important;
      }

.padding-left--xl {
        padding-left: 5rem !important;
      }

.padding-bottom--xl {
        padding-bottom: 5rem !important;
      }

.padding-right--xl {
        padding-right: 5rem !important;
      }

.padding-vert--xl {
      padding-bottom: 5rem !important;
      padding-top: 5rem !important;
    }

.padding-horiz--xl {
      padding-left: 5rem !important;
      padding-right: 5rem !important;
    }

/* Content */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

code {
  background-color: var(--ifm-code-background);
  border: 0.1rem solid rgba(0, 0, 0, 0.1);
  border-radius: var(--ifm-code-border-radius);
  font-family: var(--ifm-font-family-monospace);
  font-size: var(--ifm-code-font-size);
  padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal);
  vertical-align: middle;
}

a code {
  color: inherit;
}

pre {
  background-color: var(--ifm-pre-background);
  border-radius: var(--ifm-pre-border-radius);
  color: var(--ifm-pre-color);
  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
    var(--ifm-font-family-monospace);
  margin: 0 0 var(--ifm-spacing-vertical);
  overflow: auto;
  padding: var(--ifm-pre-padding);
}

pre code {
    background-color: transparent;
    border: none;
    font-size: 100%;
    line-height: inherit;
    padding: 0;
  }

kbd {
  background-color: var(--ifm-color-emphasis-0);
  border: 1px solid var(--ifm-color-emphasis-400);
  border-radius: 0.2rem;
  box-shadow: inset 0 -1px 0 var(--ifm-color-emphasis-400);
  color: var(--ifm-color-emphasis-800);
  font: 80% var(--ifm-font-family-monospace);
  padding: 0.15rem 0.3rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ifm-heading-color);
  font-family: var(--ifm-heading-font-family);
  font-weight: var(--ifm-heading-font-weight);
  line-height: var(--ifm-heading-line-height);
  margin: var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0;
}

h1 {
    font-size: var(--ifm-h1-font-size);
  }

h2 {
    font-size: var(--ifm-h2-font-size);
  }

h3 {
    font-size: var(--ifm-h3-font-size);
  }

h4 {
    font-size: var(--ifm-h4-font-size);
  }

h5 {
    font-size: var(--ifm-h5-font-size);
  }

h6 {
    font-size: var(--ifm-h6-font-size);
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

img {
  max-width: 100%;
}

img[align='right'] {
  padding-left: var(--image-alignment-padding);
}

img[align='left'] {
  padding-right: var(--image-alignment-padding);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.markdown {
  --ifm-h1-vertical-rhythm-top: 3;
  --ifm-h2-vertical-rhythm-top: 2;
  --ifm-h3-vertical-rhythm-top: 1.5;
  --ifm-heading-vertical-rhythm-top: 1.25;

  --ifm-h1-vertical-rhythm-bottom: 1.25;
  --ifm-heading-vertical-rhythm-bottom: 1;
}

.markdown:before {
    content: '';
    display: table;
  }

.markdown:after {
    clear: both;
    content: '';
    display: table;
  }

.markdown > *:last-child {
    margin-bottom: 0 !important;
  }

.markdown h1:first-child {
    --ifm-h1-font-size: 3rem;

    margin-bottom: calc(
      var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading)
    );
  }

.markdown > h2 {
    --ifm-h2-font-size: 2rem;

    margin-bottom: calc(
      var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading)
    );
    margin-top: calc(var(--ifm-h2-vertical-rhythm-top) * var(--ifm-leading));
  }

.markdown > h3 {
    --ifm-h3-font-size: 1.5rem;

    margin-bottom: calc(
      var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading)
    );
    margin-top: calc(var(--ifm-h3-vertical-rhythm-top) * var(--ifm-leading));
  }

.markdown > h4,
  .markdown > h5,
  .markdown > h6 {
    margin-bottom: calc(
      var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading)
    );
    margin-top: calc(
      var(--ifm-heading-vertical-rhythm-top) * var(--ifm-leading)
    );
  }

/* Consistent spacing between content paragraphs. */

.markdown > pre,
  .markdown > ul,
  .markdown > p {
    margin-bottom: var(--ifm-leading);
  }

.markdown li {
    word-wrap: break-word;
  }

.markdown li > p {
      margin-top: var(--ifm-list-paragraph-margin);
    }

.markdown li + li {
      margin-top: var(--ifm-list-item-margin);
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/* Lists */

ul,
ol {
  margin: 0 0 var(--ifm-list-margin);
  padding-left: var(--ifm-list-left-padding);
}

ol ol,
ul ol {
  list-style-type: lower-roman;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin: 0;
}

ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
  list-style-type: lower-alpha;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

table {
  border-collapse: collapse;
  display: block;
  margin-bottom: var(--ifm-spacing-vertical);
  overflow: auto;
}

table thead tr {
    border-bottom: 2px solid var(--ifm-table-border-color);
  }

table thead {
    background-color: var(--ifm-table-stripe-background);
  }

table tr {
    background-color: var(--ifm-table-background);
    border-top: var(--ifm-table-border-width) solid
      var(--ifm-table-border-color);
  }

table tr:nth-child(2n) {
    background-color: var(--ifm-table-stripe-background);
  }

table th,
  table td {
    border: var(--ifm-table-border-width) solid var(--ifm-table-border-color);
    padding: var(--ifm-table-cell-padding);
  }

table th {
    background-color: var(--ifm-table-head-background);
    color: var(--ifm-table-head-color);
    font-weight: var(--ifm-table-head-font-weight);
  }

table td {
    color: var(--ifm-table-cell-color);
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

strong {
  font-weight: var(--ifm-font-weight-bold);
}

/* Links */

a {
  color: var(--ifm-link-color);
  /* autoprefixer: ignore next */
  text-decoration: var(--ifm-link-decoration);
  transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}

a:hover {
    color: var(--ifm-link-hover-color);
    /* autoprefixer: ignore next */
    text-decoration: var(--ifm-link-hover-decoration);
  }

a:not([href]) {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

/* Paragraphs */

p {
  margin: 0 0 var(--ifm-paragraph-margin-bottom);
}

/* Blockquotes */

blockquote {
  border-left: var(--ifm-blockquote-border-left-width) solid
    var(--ifm-blockquote-border-color);
  box-shadow: var(--ifm-blockquote-shadow);
  color: var(--ifm-blockquote-color);
  font-size: var(--ifm-blockquote-font-size);
  margin: 0 0 var(--ifm-spacing-vertical);
  padding: var(--ifm-blockquote-padding-vertical)
    var(--ifm-blockquote-padding-horizontal);
}

blockquote > :first-child {
    margin-top: 0;
  }

blockquote > :last-child {
    margin-bottom: 0;
  }

/* Horizontal Rules */

hr {
  background-color: var(--ifm-hr-background-color);
  border: 0;
  height: var(--ifm-hr-height);
  margin: var(--ifm-hr-margin-vertical) 0;
}

/* Utilities */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.shadow--lw {
    box-shadow: var(--ifm-global-shadow-lw) !important;
  }

.shadow--md {
    box-shadow: var(--ifm-global-shadow-md) !important;
  }

.shadow--tl {
    box-shadow: var(--ifm-global-shadow-tl) !important;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.text--primary {
    color: var(--ifm-color-primary);
  }

.text--secondary {
    color: var(--ifm-color-secondary);
  }

.text--success {
    color: var(--ifm-color-success);
  }

.text--info {
    color: var(--ifm-color-info);
  }

.text--warning {
    color: var(--ifm-color-warning);
  }

.text--danger {
    color: var(--ifm-color-danger);
  }

.text--center {
    text-align: center;
  }

.text--left {
    text-align: left;
  }

.text--justify {
    text-align: justify;
  }

.text--right {
    text-align: right;
  }

.text--capitalize {
    text-transform: capitalize;
  }

.text--lowercase {
    text-transform: lowercase;
  }

.text--uppercase {
    text-transform: uppercase;
  }

.text--light {
    font-weight: var(--ifm-font-weight-light);
  }

.text--normal {
    font-weight: var(--ifm-font-weight-normal);
  }

.text--semibold {
    font-weight: var(--ifm-font-weight-semibold);
  }

.text--bold {
    font-weight: var(--ifm-font-weight-bold);
  }

.text--italic {
  font-style: italic;
}

.text--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text--break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.text--no-decoration,
  .text--no-decoration:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.clean-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.clean-list {
  list-style: none;
  padding-left: 0;
}

/* Components */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.alert--primary {
      --ifm-alert-background-color: var(
        --ifm-color-primary-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(53, 120, 229, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-primary-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-primary-dark);
    }

.alert--secondary {
      --ifm-alert-background-color: var(
        --ifm-color-secondary-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(235, 237, 240, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-secondary-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-secondary-dark);
    }

.alert--success {
      --ifm-alert-background-color: var(
        --ifm-color-success-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(0, 164, 0, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-success-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-success-dark);
    }

.alert--info {
      --ifm-alert-background-color: var(
        --ifm-color-info-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(84, 199, 236, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-info-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-info-dark);
    }

.alert--warning {
      --ifm-alert-background-color: var(
        --ifm-color-warning-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(255, 186, 0, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-warning-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-warning-dark);
    }

.alert--danger {
      --ifm-alert-background-color: var(
        --ifm-color-danger-contrast-background
      );
      --ifm-alert-background-color-highlight: rgba(250, 56, 62, 0.15);
      --ifm-alert-foreground-color: var(
        --ifm-color-danger-contrast-foreground
      );
      --ifm-alert-border-color: var(--ifm-color-danger-dark);
    }

.alert {

  --ifm-code-background: var(--ifm-alert-background-color-highlight);
  --ifm-link-color: var(--ifm-alert-foreground-color);
  --ifm-link-hover-color: var(--ifm-alert-foreground-color);
  --ifm-link-decoration: underline;
  --ifm-tabs-color: var(--ifm-alert-foreground-color);
  --ifm-tabs-color-active: var(--ifm-alert-foreground-color);
  --ifm-tabs-color-active-border: var(--ifm-alert-border-color);

  background-color: var(--ifm-alert-background-color);
  border: var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);
  border-left-width: var(--ifm-alert-border-left-width);
  border-radius: var(--ifm-alert-border-radius);
  box-shadow: var(--ifm-alert-shadow);
  color: var(--ifm-alert-foreground-color);
  padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
}

.alert__heading {
    align-items: center;
    display: flex;
    font: bold var(--ifm-h5-font-size) / var(--ifm-heading-line-height)
      var(--ifm-heading-font-family);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
  }

.alert__icon {
    display: inline-flex;
    margin-right: 0.4em;
  }

.alert__icon svg {
      fill: var(--ifm-alert-foreground-color);
      stroke: var(--ifm-alert-foreground-color);
      stroke-width: 0;
    }

.alert .close {
    color: var(--ifm-alert-foreground-color);
    margin: calc(var(--ifm-alert-padding-vertical) * -1)
      calc(var(--ifm-alert-padding-horizontal) * -1) 0 0;

    opacity: 0.75;
  }

.alert .close:hover,
    .alert .close:focus {
      opacity: 1;
    }

.alert a {
    text-decoration-color: var(--ifm-alert-border-color);
  }

.alert a:hover {
      text-decoration-thickness: 2px;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.avatar {
  -moz-column-gap: var(--ifm-avatar-intro-margin);
       column-gap: var(--ifm-avatar-intro-margin);
  display: flex;
}

.avatar__photo {
    border-radius: 50%;
    display: block;
    height: var(--ifm-avatar-photo-size);
    overflow: hidden;
    width: var(--ifm-avatar-photo-size);
  }

.avatar__photo--sm {
      --ifm-avatar-photo-size: 2rem;
    }

.avatar__photo--lg {
      --ifm-avatar-photo-size: 4rem;
    }

.avatar__photo--xl {
      --ifm-avatar-photo-size: 6rem;
    }

.avatar__intro {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    justify-content: center;
    text-align: var(--ifm-avatar-intro-alignment);
  }

.avatar__name {
    font: bold var(--ifm-h4-font-size) / var(--ifm-heading-line-height)
      var(--ifm-font-family-base);
  }

.avatar__subtitle {
    margin-top: 0.25rem;
  }

.avatar--vertical {
    --ifm-avatar-intro-alignment: center;
    --ifm-avatar-intro-margin: 0.5rem;

    align-items: center;
    flex-direction: column;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.badge {
  background-color: var(--ifm-badge-background-color);
  border: var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);
  border-radius: var(--ifm-badge-border-radius);
  color: var(--ifm-badge-color);
  display: inline-block;
  font-size: 75%;
  font-weight: var(--ifm-font-weight-bold);
  line-height: 1;
  padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
}

.badge--primary {
      --ifm-badge-background-color: var(--ifm-color-primary);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    }

.badge--secondary {
      --ifm-badge-background-color: var(--ifm-color-secondary);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    color: var(--ifm-color-black);
    }

.badge--success {
      --ifm-badge-background-color: var(--ifm-color-success);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    }

.badge--info {
      --ifm-badge-background-color: var(--ifm-color-info);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    }

.badge--warning {
      --ifm-badge-background-color: var(--ifm-color-warning);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    }

.badge--danger {
      --ifm-badge-background-color: var(--ifm-color-danger);
      --ifm-badge-border-color: var(--ifm-badge-background-color);
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.breadcrumbs {
  margin-bottom: 0;
  padding-left: 0;
}

.breadcrumbs__item {
    display: inline-block;
  }

.breadcrumbs__item:not(:last-child):after {
      background: var(--ifm-breadcrumb-separator) center;
      content: ' ';
      display: inline-block;
      filter: var(--ifm-breadcrumb-separator-filter);
      height: calc(
        var(--ifm-breadcrumb-separator-size) *
          var(--ifm-breadcrumb-size-multiplier) *
          var(--ifm-breadcrumb-separator-size-multiplier)
      );
      margin: 0 var(--ifm-breadcrumb-spacing);
      opacity: 0.5;
      width: calc(
        var(--ifm-breadcrumb-separator-size) *
          var(--ifm-breadcrumb-size-multiplier) *
          var(--ifm-breadcrumb-separator-size-multiplier)
      );
      /*rtl:raw:
      transform: rotate(180deg);
      */
    }

.breadcrumbs__item--active .breadcrumbs__link {
        background: var(--ifm-breadcrumb-item-background-active);
        color: var(--ifm-breadcrumb-color-active);
      }

.breadcrumbs__link {
    border-radius: var(--ifm-breadcrumb-border-radius);
    color: var(--ifm-font-color-base);
    display: inline-block;
    font-size: calc(1rem * var(--ifm-breadcrumb-size-multiplier));
    padding: calc(
        var(--ifm-breadcrumb-padding-vertical) *
          var(--ifm-breadcrumb-size-multiplier)
      )
      calc(
        var(--ifm-breadcrumb-padding-horizontal) *
          var(--ifm-breadcrumb-size-multiplier)
      );
    transition-property: background, color;
    transition-duration: var(--ifm-transition-fast);
    transition-timing-function: var(--ifm-transition-timing-default);
  }

.breadcrumbs__link:link:hover, .breadcrumbs__link:visited:hover, area[href].breadcrumbs__link:hover {
      background: var(--ifm-breadcrumb-item-background-active);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.breadcrumbs__link:-moz-any-link:hover {
      background: var(--ifm-breadcrumb-item-background-active);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.breadcrumbs__link:any-link:hover {
      background: var(--ifm-breadcrumb-item-background-active);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.breadcrumbs--sm {
    --ifm-breadcrumb-size-multiplier: 0.8;
  }

.breadcrumbs--lg {
    --ifm-breadcrumb-size-multiplier: 1.2;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.button {
  background-color: var(--ifm-button-background-color);
  border: var(--ifm-button-border-width) solid var(--ifm-button-border-color);
  border-radius: var(--ifm-button-border-radius);
  color: var(--ifm-button-color);
  cursor: pointer;
  display: inline-block;
  font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
  font-weight: var(--ifm-button-font-weight);
  line-height: 1.5;
  padding: calc(
      var(--ifm-button-padding-vertical) * var(--ifm-button-size-multiplier)
    )
    calc(
      var(--ifm-button-padding-horizontal) * var(--ifm-button-size-multiplier)
    );
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  transition-property: color, background, border-color;
  transition-duration: var(--ifm-button-transition-duration);
  transition-timing-function: var(--ifm-transition-timing-default);
}

.button:hover {
    color: var(--ifm-button-color); /* Override for button links. */
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.button--outline {
    --ifm-button-background-color: transparent;
    --ifm-button-color: var(--ifm-button-border-color);
  }

.button--outline:hover {
      --ifm-button-background-color: var(--ifm-button-border-color);
    }

.button--outline:hover,
    .button--outline:active,
    .button--outline.button--active {
      --ifm-button-color: var(--ifm-font-color-base-inverse);
    }

.button--link {
    --ifm-button-background-color: transparent;
    --ifm-button-border-color: transparent;

    color: var(--ifm-link-color);
    /* autoprefixer: ignore next */
    text-decoration: var(--ifm-link-decoration);
  }

.button--link:hover,
    .button--link:active,
    .button--link.button--active {
      color: var(--ifm-link-hover-color);
      /* autoprefixer: ignore next */
      text-decoration: var(--ifm-link-hover-decoration);
    }

.button.disabled,
  .button:disabled,
  .button[disabled] {
    opacity: 0.65;
    pointer-events: none;
  }

.button--sm {
    --ifm-button-size-multiplier: 0.8;
  }

.button--lg {
    --ifm-button-size-multiplier: 1.35;
  }

.button--block {
    display: block;
    width: 100%;
  }

.button.button--secondary {
    color: var(--ifm-color-gray-900);
  }

.button.button--secondary.button--outline:not(.button--active):not(:hover) {
      color: var(--ifm-font-color-base);
    }

:where(.button--primary) {
      --ifm-button-background-color: var(--ifm-color-primary);
      --ifm-button-border-color: var(--ifm-color-primary);
    }

:where(.button--primary):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-primary-dark);
        --ifm-button-border-color: var(--ifm-color-primary-dark);
      }

.button--primary:active,
      .button--primary.button--active {
        --ifm-button-background-color: var(--ifm-color-primary-darker);
        --ifm-button-border-color: var(--ifm-color-primary-darker);
      }

:where(.button--secondary) {
      --ifm-button-background-color: var(--ifm-color-secondary);
      --ifm-button-border-color: var(--ifm-color-secondary);
    }

:where(.button--secondary):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-secondary-dark);
        --ifm-button-border-color: var(--ifm-color-secondary-dark);
      }

.button--secondary:active,
      .button--secondary.button--active {
        --ifm-button-background-color: var(--ifm-color-secondary-darker);
        --ifm-button-border-color: var(--ifm-color-secondary-darker);
      }

:where(.button--success) {
      --ifm-button-background-color: var(--ifm-color-success);
      --ifm-button-border-color: var(--ifm-color-success);
    }

:where(.button--success):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-success-dark);
        --ifm-button-border-color: var(--ifm-color-success-dark);
      }

.button--success:active,
      .button--success.button--active {
        --ifm-button-background-color: var(--ifm-color-success-darker);
        --ifm-button-border-color: var(--ifm-color-success-darker);
      }

:where(.button--info) {
      --ifm-button-background-color: var(--ifm-color-info);
      --ifm-button-border-color: var(--ifm-color-info);
    }

:where(.button--info):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-info-dark);
        --ifm-button-border-color: var(--ifm-color-info-dark);
      }

.button--info:active,
      .button--info.button--active {
        --ifm-button-background-color: var(--ifm-color-info-darker);
        --ifm-button-border-color: var(--ifm-color-info-darker);
      }

:where(.button--warning) {
      --ifm-button-background-color: var(--ifm-color-warning);
      --ifm-button-border-color: var(--ifm-color-warning);
    }

:where(.button--warning):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-warning-dark);
        --ifm-button-border-color: var(--ifm-color-warning-dark);
      }

.button--warning:active,
      .button--warning.button--active {
        --ifm-button-background-color: var(--ifm-color-warning-darker);
        --ifm-button-border-color: var(--ifm-color-warning-darker);
      }

:where(.button--danger) {
      --ifm-button-background-color: var(--ifm-color-danger);
      --ifm-button-border-color: var(--ifm-color-danger);
    }

:where(.button--danger):not(.button--outline):hover {
        --ifm-button-background-color: var(--ifm-color-danger-dark);
        --ifm-button-border-color: var(--ifm-color-danger-dark);
      }

.button--danger:active,
      .button--danger.button--active {
        --ifm-button-background-color: var(--ifm-color-danger-darker);
        --ifm-button-border-color: var(--ifm-color-danger-darker);
      }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.button-group {
  display: inline-flex;
  gap: var(--ifm-button-group-spacing);
}

.button-group > .button:not(:first-child) {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }

.button-group > .button:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }

.button-group--block {
    display: flex;
    justify-content: stretch;
  }

.button-group--block > .button {
      flex-grow: 1;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.card {
  background-color: var(--ifm-card-background-color);
  border-radius: var(--ifm-card-border-radius);
  box-shadow: var(--ifm-global-shadow-lw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Because of border-radius. */

.card--full-height {
    height: 100%;
  }

.card__image {
    padding-top: var(--ifm-card-vertical-spacing);
  }

.card__image:first-child {
      padding-top: 0;
    }

.card__header,
  .card__body,
  .card__footer {
    padding: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing);
  }

.card__header:not(:last-child), .card__body:not(:last-child), .card__footer:not(:last-child) {
      padding-bottom: 0;
    }

.card__header > :last-child, .card__body > :last-child, .card__footer > :last-child {
      margin-bottom: 0;
    }

.card__footer {
    margin-top: auto; /* Pushes the footer to the bottom of the card. */
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.table-of-contents {
  font-size: 0.8rem;
  margin-bottom: 0;
  padding: var(--ifm-toc-padding-vertical) 0;
}

.table-of-contents,
  .table-of-contents ul {
    list-style: none;
    padding-left: var(--ifm-toc-padding-horizontal);
  }

.table-of-contents li {
    margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
  }

.table-of-contents__left-border {
    border-left: 1px solid var(--ifm-toc-border-color);
  }

.table-of-contents__link {
    color: var(--ifm-toc-link-color);
    display: block;
  }

.table-of-contents__link:hover,
    .table-of-contents__link:hover code,
    .table-of-contents__link--active,
    .table-of-contents__link--active code {
      color: var(--ifm-color-primary);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.close {
  color: var(--ifm-color-black);
  float: right;
  font-size: 1.5rem;
  font-weight: var(--ifm-font-weight-bold);
  line-height: 1;
  opacity: 0.5;
  padding: 1rem;
  transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}

.close:hover {
    opacity: 0.7;
  }

.close:focus {
    opacity: 0.8;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.dropdown {
  display: inline-flex;
  font-weight: var(--ifm-dropdown-font-weight);
  position: relative;
  vertical-align: top;
}

.dropdown--hoverable:hover .dropdown__menu, .dropdown--show .dropdown__menu {
      opacity: 1;
      pointer-events: all;
      transform: translateY(-1px);
      visibility: visible;
    }

.dropdown--right .dropdown__menu {
      left: inherit;
      right: 0;
    }

.dropdown--nocaret .navbar__link:after {
    content: none !important;
  }

.dropdown__menu {
    background-color: var(--ifm-dropdown-background-color);
    border-radius: var(--ifm-global-radius);
    box-shadow: var(--ifm-global-shadow-md);
    left: 0;
    list-style: none;
    max-height: 80vh;
    min-width: 10rem;
    opacity: 0;
    overflow-y: auto;
    padding: 0.5rem;
    pointer-events: none;
    position: absolute;
    top: calc(100% - var(--ifm-navbar-item-padding-vertical) + 0.3rem);
    transform: translateY(-0.625rem);
    visibility: hidden;
    z-index: var(--ifm-z-index-dropdown);
    transition-property: opacity, transform, visibility;
    transition-duration: var(--ifm-transition-fast);
    transition-timing-function: var(--ifm-transition-timing-default);
  }

.dropdown__link {
    border-radius: 0.25rem;
    color: var(--ifm-dropdown-link-color);
    display: block;
    font-size: 0.875rem;
    margin-top: 0.2rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
  }

.dropdown__link:hover,
    .dropdown__link--active {
      background-color: var(--ifm-dropdown-hover-background-color);
      color: var(--ifm-dropdown-link-color);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.dropdown__link--active,
    .dropdown__link--active:hover {
      --ifm-dropdown-link-color: var(--ifm-link-color);
    }

.dropdown > .navbar__link:after {
    border-color: currentColor transparent;
    border-style: solid;
    border-width: 0.4em 0.4em 0;
    content: '';
    display: inline-block;
    margin-left: 0.3em;
    position: relative;
    top: 2px;
    transform: translateY(-50%);
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.footer {
  background-color: var(--ifm-footer-background-color);
  color: var(--ifm-footer-color);
  padding: var(--ifm-footer-padding-vertical)
    var(--ifm-footer-padding-horizontal);
}

.footer--dark {
    --ifm-footer-background-color: #303846;
    --ifm-footer-color: var(--ifm-footer-link-color);
    --ifm-footer-link-color: var(--ifm-color-secondary);
    --ifm-footer-title-color: var(--ifm-color-white);
  }

.footer__links {
    margin-bottom: 1rem;
  }

.footer__link-item {
    color: var(--ifm-footer-link-color);
    line-height: 2;
  }

.footer__link-item:hover {
      color: var(--ifm-footer-link-hover-color);
    }

.footer__link-separator {
    margin: 0 var(--ifm-footer-link-horizontal-spacing);
  }

.footer__logo {
    margin-top: 1rem;
    max-width: var(--ifm-footer-logo-max-width);
  }

.footer__title {
    color: var(--ifm-footer-title-color);
    font: bold var(--ifm-h4-font-size) / var(--ifm-heading-line-height)
      var(--ifm-font-family-base);
    margin-bottom: var(--ifm-heading-margin-bottom);
  }

.footer__item {
    margin-top: 0;
  }

.footer__items {
    margin-bottom: 0;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

[type='checkbox'] {
  padding: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.hero {
  align-items: center;
  background-color: var(--ifm-hero-background-color);
  color: var(--ifm-hero-text-color);
  display: flex;
  padding: 4rem 2rem;
}

.hero--primary {
    --ifm-hero-background-color: var(--ifm-color-primary);
    --ifm-hero-text-color: var(--ifm-font-color-base-inverse);
  }

.hero--dark {
    --ifm-hero-background-color: #303846;
    --ifm-hero-text-color: var(--ifm-color-white);
  }

.hero__title {
    font-size: 3rem;
  }

.hero__subtitle {
    font-size: 1.5rem;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.menu {
  font-weight: var(--ifm-font-weight-semibold);
  overflow-x: hidden;
}

.menu__list {
    list-style: none;
    margin: 0;
    padding-left: 0;
  }

/* Non-top level menus */

.menu__list .menu__list {
      flex: 0 0 100%;
      margin-top: 0.25rem;
      padding-left: var(--ifm-menu-link-padding-horizontal);
    }

.menu__list-item:not(:first-child) {
      margin-top: 0.25rem;
    }

.menu__list-item--collapsed .menu__list {
        height: 0;
        overflow: hidden;
      }

.menu__list-item--collapsed .menu__link--sublist:after,
      .menu__list-item--collapsed .menu__caret:before {
        transform: rotateZ(90deg);
      }

.menu__list-item-collapsible {
      flex-wrap: wrap;
      position: relative;
      border-radius: 0.25rem;
      display: flex;
      transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
    }

.menu__list-item-collapsible:hover {
    background: var(--ifm-menu-color-background-hover);
  }

.menu__list-item-collapsible--active {
        background: var(--ifm-menu-color-background-hover);
      }

.menu__list-item-collapsible .menu__link:hover,
        .menu__list-item-collapsible .menu__link--active {
          background: none !important;
        }

.menu__link,
  .menu__caret {
    align-items: center;
    border-radius: 0.25rem;
    display: flex;
    transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
  }

.menu__link:hover, .menu__caret:hover {
    background: var(--ifm-menu-color-background-hover);
  }

.menu__link {
    color: var(--ifm-menu-color);
    flex: 1;
    line-height: 1.25;
    padding: var(--ifm-menu-link-padding-vertical)
      var(--ifm-menu-link-padding-horizontal);
  }

.menu__link:hover {
      -webkit-text-decoration: none;
      text-decoration: none;
      color: var(--ifm-menu-color);
      transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
    }

.menu__link--sublist-caret:after {
      content: '';
      margin-left: auto;
      min-width: 1.25rem;
      background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
      filter: var(--ifm-menu-link-sublist-icon-filter);
      height: 1.25rem;
      transform: rotate(180deg);
      width: 1.25rem;
      transition: transform var(--ifm-transition-fast) linear;
    }

.menu__link--active {
      color: var(--ifm-menu-color-active);
    }

.menu__link--active:hover {
        color: var(--ifm-menu-color-active);
      }

.menu__link--active:not(.menu__link--sublist) {
        background-color: var(--ifm-menu-color-background-active);
      }

.menu__caret {
    padding: var(--ifm-menu-link-padding-vertical)
      var(--ifm-menu-link-padding-horizontal);
  }

.menu__caret:before {
      content: '';
      background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
      filter: var(--ifm-menu-link-sublist-icon-filter);
      height: 1.25rem;
      transform: rotate(180deg);
      width: 1.25rem;
      transition: transform var(--ifm-transition-fast) linear;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

html[data-theme='dark'],
.navbar--dark {
  --ifm-menu-link-sublist-icon-filter: invert(100%) sepia(94%) saturate(17%)
    hue-rotate(223deg) brightness(104%) contrast(98%);
}

.navbar {
  background-color: var(--ifm-navbar-background-color);
  box-shadow: var(--ifm-navbar-shadow);
  display: flex;
  height: var(--ifm-navbar-height);
  padding: var(--ifm-navbar-padding-vertical)
    var(--ifm-navbar-padding-horizontal);
}

.navbar > .container,
  .navbar > .container-fluid {
    display: flex;
  }

.navbar--fixed-top {
    position: sticky;
    top: 0;
    z-index: var(--ifm-z-index-fixed);
  }

.navbar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

.navbar__brand {
    align-items: center;
    color: var(--ifm-navbar-link-color);
    display: flex;
    margin-right: 1rem;
    min-width: 0;
  }

.navbar__brand:hover {
      color: var(--ifm-navbar-link-hover-color);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.navbar__title {
    flex: 1 1 auto;
  }

.navbar__toggle {
    display: none;
    margin-right: 0.5rem;
  }

.navbar__logo {
    flex: 0 0 auto;
    height: 2rem;
    margin-right: 0.5rem;
  }

.navbar__logo img {
      height: 100%;
    }

.navbar__items {
    align-items: center;
    display: flex;
    flex: 1;
    min-width: 0;
  }

.navbar__items--center {
      flex: 0 0 auto;
    }

.navbar__items--center .navbar__brand {
        margin: 0;
      }

.navbar__items--center + .navbar__items--right {
        flex: 1;
      }

.navbar__items--right {
      flex: 0 0 auto;
      justify-content: flex-end;
    }

.navbar__items--right > :last-child {
        padding-right: 0;
      }

.navbar__item {
    display: inline-block;
    padding: var(--ifm-navbar-item-padding-vertical)
      var(--ifm-navbar-item-padding-horizontal);
  }

.navbar__item.dropdown .navbar__link:not([href]) {
        pointer-events: none;
      }

.navbar__link {
    color: var(--ifm-navbar-link-color);
    font-weight: var(--ifm-font-weight-semibold);
  }

.navbar__link:hover,
    .navbar__link--active {
      color: var(--ifm-navbar-link-hover-color);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.navbar--dark,
  .navbar--primary {
    --ifm-menu-color: var(--ifm-color-gray-300);
    --ifm-navbar-link-color: var(--ifm-color-gray-100);
    --ifm-navbar-search-input-background-color: rgba(255, 255, 255, 0.1);
    --ifm-navbar-search-input-placeholder-color: rgba(255, 255, 255, 0.5);

    color: var(--ifm-color-white);
  }

.navbar--dark {
    --ifm-navbar-background-color: #242526;
    --ifm-navbar-link-hover-color: var(--ifm-color-primary);
    --ifm-menu-color-background-active: rgba(255, 255, 255, 0.05);
    --ifm-navbar-search-input-color: var(--ifm-color-white);
  }

.navbar--primary {
    --ifm-navbar-background-color: var(--ifm-color-primary);
    --ifm-navbar-link-hover-color: var(--ifm-color-white);
    --ifm-menu-color-active: var(--ifm-color-white);
    --ifm-navbar-search-input-color: var(--ifm-color-emphasis-500);
  }

.navbar__search-input {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none; /* Algolia will add type="search" to the input in Safari and Safari's styling will override the styling here. */
      background: var(--ifm-navbar-search-input-background-color)
        var(--ifm-navbar-search-input-icon) no-repeat 0.75rem center / 1rem 1rem;
      border: none;
      border-radius: 2rem;
      color: var(--ifm-navbar-search-input-color);
      cursor: text;
      display: inline-block;
      font-size: 1rem;
      height: 2rem;
      padding: 0 0.5rem 0 2.25rem;
      width: 12.5rem;
    }

.navbar__search-input::-moz-placeholder {
        color: var(--ifm-navbar-search-input-placeholder-color);
      }

.navbar__search-input::placeholder {
        color: var(--ifm-navbar-search-input-placeholder-color);
      }

.navbar-sidebar {
    background-color: var(--ifm-navbar-background-color);
    bottom: 0;
    box-shadow: var(--ifm-global-shadow-md);
    left: 0;
    opacity: 0;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
    width: var(--ifm-navbar-sidebar-width);
    transition-property: opacity, visibility, transform;
    transition-duration: var(--ifm-transition-fast);
    transition-timing-function: ease-in-out;
  }

.navbar-sidebar--show .navbar-sidebar,
      .navbar-sidebar--show .navbar-sidebar__backdrop {
        opacity: 1;
        visibility: visible;
      }

.navbar-sidebar--show .navbar-sidebar {
        transform: translate3d(0, 0, 0);
      }

.navbar-sidebar__backdrop {
      background-color: rgba(0, 0, 0, 0.6);
      bottom: 0;
      left: 0;
      opacity: 0;
      position: fixed;
      right: 0;
      top: 0;
      visibility: hidden;
      transition-property: opacity, visibility;
      transition-duration: var(--ifm-transition-fast);
      transition-timing-function: ease-in-out;
    }

.navbar-sidebar__brand {
      align-items: center;
      box-shadow: var(--ifm-navbar-shadow);
      display: flex;
      flex: 1;
      height: var(--ifm-navbar-height);
      padding: var(--ifm-navbar-padding-vertical)
        var(--ifm-navbar-padding-horizontal);
    }

.navbar-sidebar__items {
      display: flex;
      height: calc(100% - var(--ifm-navbar-height));
      transform: translateZ(0);
      transition: transform var(--ifm-transition-fast) ease-in-out;
    }

.navbar-sidebar__items--show-secondary {
        transform: translate3d(
          calc((var(--ifm-navbar-sidebar-width)) * -1),
          0,
          0
        );
      }

.navbar-sidebar__item {
      flex-shrink: 0;
      padding: 0.5rem;
      width: calc(var(--ifm-navbar-sidebar-width));
    }

.navbar-sidebar__back {
      background: var(--ifm-menu-color-background-active);
      font-size: 15px;
      font-weight: var(--ifm-button-font-weight);
      margin: 0 0 0.2rem -0.5rem;
      padding: 0.6rem 1.5rem;
      position: relative;
      text-align: left;
      top: -0.5rem;
      width: calc(100% + 1rem);
    }

.navbar-sidebar__close {
      display: flex;
      margin-left: auto;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.pagination {
  -moz-column-gap: var(--ifm-pagination-page-spacing);
       column-gap: var(--ifm-pagination-page-spacing);
  display: flex;
  font-size: var(--ifm-pagination-font-size);
  padding-left: 0;
}

.pagination--sm {
    --ifm-pagination-font-size: 0.8rem;
    --ifm-pagination-padding-horizontal: 0.8rem;
    --ifm-pagination-padding-vertical: 0.2rem;
  }

.pagination--lg {
    --ifm-pagination-font-size: 1.2rem;
    --ifm-pagination-padding-horizontal: 1.2rem;
    --ifm-pagination-padding-vertical: 0.3rem;
  }

.pagination__item {
    display: inline-flex;
  }

.pagination__item > span {
      padding: var(--ifm-pagination-padding-vertical);
    }

.pagination__item--active .pagination__link {
        background: var(--ifm-pagination-item-active-background);
        color: var(--ifm-pagination-color-active);
      }

.pagination__item:not(.pagination__item--active):hover .pagination__link {
        background: var(--ifm-pagination-item-active-background);
      }

.pagination__item--disabled,
    .pagination__item[disabled] {
      opacity: 0.25;
      pointer-events: none;
    }

.pagination__link {
    border-radius: var(--ifm-pagination-border-radius);
    color: var(--ifm-font-color-base);
    display: inline-block;
    padding: var(--ifm-pagination-padding-vertical)
      var(--ifm-pagination-padding-horizontal);
    transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
  }

.pagination__link:hover {
      -webkit-text-decoration: none;
      text-decoration: none;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.pagination-nav {
  display: grid;
  grid-gap: var(--ifm-spacing-horizontal);
  gap: var(--ifm-spacing-horizontal);
  grid-template-columns: repeat(2, 1fr);
}

.pagination-nav__link {
    border: 1px solid var(--ifm-color-emphasis-300);
    border-radius: var(--ifm-pagination-nav-border-radius);
    display: block;
    height: 100%;
    line-height: var(--ifm-heading-line-height);
    padding: var(--ifm-global-spacing);
    transition: border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
  }

.pagination-nav__link:hover {
      border-color: var(--ifm-pagination-nav-color-hover);
      -webkit-text-decoration: none;
      text-decoration: none;
    }

.pagination-nav__link--next {
      grid-column: 2/3;
      text-align: right;
    }

.pagination-nav__label {
    font-size: var(--ifm-h4-font-size);
    font-weight: var(--ifm-heading-font-weight);
    word-break: break-word;
  }

.pagination-nav__link--prev .pagination-nav__label::before {
      content: '« ';
    }

.pagination-nav__link--next .pagination-nav__label::after {
      content: ' »';
    }

.pagination-nav__sublabel {
    color: var(--ifm-color-content-secondary);
    font-size: var(--ifm-h5-font-size);
    font-weight: var(--ifm-font-weight-semibold);
    margin-bottom: 0.25rem;
  }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.pills {
  display: flex;
  gap: var(--ifm-pills-spacing);
  padding-left: 0;
}

.pills__item {
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-block;
    font-weight: var(--ifm-font-weight-bold);
    padding: 0.25rem 1rem;
    transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
  }

.pills__item--active {
      background: var(--ifm-pills-color-background-active);
      color: var(--ifm-pills-color-active);
    }

.pills__item:not(.pills__item--active):hover {
      background: var(--ifm-pills-color-background-active);
    }

.pills--block {
    justify-content: stretch;
  }

.pills--block .pills__item {
      flex-grow: 1;
      text-align: center;
    }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tabs {
  color: var(--ifm-tabs-color);
  display: flex;
  font-weight: var(--ifm-font-weight-bold);
  margin-bottom: 0;
  overflow-x: auto;
  padding-left: 0;
}

.tabs__item {
    border-bottom: 3px solid transparent;
    border-radius: var(--ifm-global-radius);
    cursor: pointer;
    display: inline-flex;
    padding: var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal);
    transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
  }

.tabs__item--active {
      border-bottom-color: var(--ifm-tabs-color-active-border);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      color: var(--ifm-tabs-color-active);
    }

.tabs__item:hover {
      background-color: var(--ifm-hover-overlay);
    }

.tabs--block {
    justify-content: stretch;
  }

.tabs--block .tabs__item {
      flex-grow: 1;
      justify-content: center;
    }

/* Mode */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

html[data-theme='dark'] {
  --ifm-color-scheme: dark;

  --ifm-color-emphasis-0: var(--ifm-color-gray-1000);
  --ifm-color-emphasis-100: var(--ifm-color-gray-900);
  --ifm-color-emphasis-200: var(--ifm-color-gray-800);
  --ifm-color-emphasis-300: var(--ifm-color-gray-700);
  --ifm-color-emphasis-400: var(--ifm-color-gray-600);
  --ifm-color-emphasis-500: var(--ifm-color-gray-500);
  --ifm-color-emphasis-600: var(--ifm-color-gray-400);
  --ifm-color-emphasis-700: var(--ifm-color-gray-300);
  --ifm-color-emphasis-800: var(--ifm-color-gray-200);
  --ifm-color-emphasis-900: var(--ifm-color-gray-100);
  --ifm-color-emphasis-1000: var(--ifm-color-gray-0);

  --ifm-background-color: #1b1b1d;
  --ifm-background-surface-color: #242526;

  --ifm-hover-overlay: rgba(255, 255, 255, 0.05);

  --ifm-color-content: #e3e3e3;
  --ifm-color-content-secondary: rgba(255, 255, 255, 1);

  --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%)
    hue-rotate(149deg) brightness(99%) contrast(95%);

  --ifm-code-background: rgba(255, 255, 255, 0.1);

  --ifm-scrollbar-track-background-color: #444444;
  --ifm-scrollbar-thumb-background-color: #686868;
  --ifm-scrollbar-thumb-hover-background-color: #7a7a7a;

  --ifm-table-stripe-background: rgba(255, 255, 255, 0.07);

  --ifm-toc-border-color: var(--ifm-color-emphasis-200);
    --ifm-color-primary-contrast-background: rgb(16, 36, 69);
    --ifm-color-primary-contrast-foreground: rgb(235, 242, 252);
    --ifm-color-secondary-contrast-background: rgb(71, 71, 72);
    --ifm-color-secondary-contrast-foreground: rgb(253, 253, 254);
    --ifm-color-success-contrast-background: rgb(0, 49, 0);
    --ifm-color-success-contrast-foreground: rgb(230, 246, 230);
    --ifm-color-info-contrast-background: rgb(25, 60, 71);
    --ifm-color-info-contrast-foreground: rgb(238, 249, 253);
    --ifm-color-warning-contrast-background: rgb(77, 56, 0);
    --ifm-color-warning-contrast-foreground: rgb(255, 248, 230);
    --ifm-color-danger-contrast-background: rgb(75, 17, 19);
    --ifm-color-danger-contrast-foreground: rgb(255, 235, 236)
}

@media (min-width: 1440px) {
    .container {
      max-width: var(--ifm-container-width-xl);
    }
}

@media (max-width: 996px) {
    .col {
      --ifm-col-width: 100%;
      flex-basis: var(--ifm-col-width);
      margin-left: 0;
    }

.footer {
    --ifm-footer-padding-horizontal: 0
}

    .footer__link-separator {
      display: none;
    }

    .footer__col {
      margin-bottom: calc(var(--ifm-spacing-vertical) * 3);
    }

    .footer__link-item {
      display: block;
      width: -moz-max-content;
      width: max-content;
    }

.hero {
    padding-left: 0;
    padding-right: 0
}

.navbar > .container,
  .navbar > .container-fluid {
      padding: 0
  }

.navbar__toggle {
      display: inherit
  }

.navbar__item {
      display: none
  }

.navbar__search-input {
        width: 9rem
    }

.pills--block {
      flex-direction: column
  }

.tabs--block {
      flex-direction: column
  }
}

@media (max-width: 576px) {
    .markdown h1:first-child {
      --ifm-h1-font-size: 2rem;
    }
    .markdown > h2 {
      --ifm-h2-font-size: 1.5rem;
    }
    .markdown > h3 {
      --ifm-h3-font-size: 1.25rem;
    }
}

@media (pointer: fine) {
  .thin-scrollbar {
    scrollbar-width: thin;
  }
  .thin-scrollbar::-webkit-scrollbar {
    height: var(--ifm-scrollbar-size);
    width: var(--ifm-scrollbar-size);
  }
  .thin-scrollbar::-webkit-scrollbar-track {
    background: var(--ifm-scrollbar-track-background-color);
    border-radius: 10px;
  }
  .thin-scrollbar::-webkit-scrollbar-thumb {
    background: var(--ifm-scrollbar-thumb-background-color);
    border-radius: 10px;
  }
  .thin-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--ifm-scrollbar-thumb-hover-background-color);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ifm-transition-fast: 0ms;
    --ifm-transition-slow: 0ms;
  }
}

@media print {

.table-of-contents {
    display: none
}

.footer {
    display: none
}

.menu {
    display: none
}

.navbar {
    display: none
}

.pagination-nav {
    display: none
}

.tabs {
    page-break-inside: avoid
}
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/**
 * Styles for NProgress
 * Copied over to remove unused styles for the spinner.
 * https://github.com/rstacruz/nprogress/blob/master/nprogress.css
 */

:root {
  --docusaurus-progress-bar-color: var(--ifm-color-primary);
}

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: var(--docusaurus-progress-bar-color);
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

#nprogress .peg {
  position: absolute;
  right: 0;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px var(--docusaurus-progress-bar-color),
    0 0 5px var(--docusaurus-progress-bar-color);
  opacity: 1;
  transform: rotate(3deg) translate(0, -4px);
}

/**
 * Lufa Design System - CSS Entry Point
 * 
 * Uses vanilla CSS with CSS Modules and token-based CSS custom properties.
 */

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */

/**
 * Do not edit directly, this file was auto-generated.
 */

[data-theme],
[data-theme][data-mode='light'] {
  --lufa-primitive-border-width-scale-thin: 0.0625rem; /** Thin border width - subtle borders */
  --lufa-primitive-border-width-scale-base: 0.125rem; /** Base border width - emphasized borders */
  --lufa-primitive-border-width-scale-thick: 0.25rem; /** Thick border width - very strong emphasis */
  --lufa-primitive-breakpoint-xs: 20rem; /** Extra small - Mobile portrait (320px+) */
  --lufa-primitive-breakpoint-sm: 40rem; /** Small - Mobile landscape, large phones (640px+) */
  --lufa-primitive-breakpoint-md: 48rem; /** Medium - Tablets portrait (768px+) */
  --lufa-primitive-breakpoint-lg: 64rem; /** Large - Tablets landscape, small desktops (1024px+) */
  --lufa-primitive-breakpoint-xl: 80rem; /** Extra large - Desktop (1280px+) */
  --lufa-primitive-breakpoint-2xl: 96rem; /** 2X Extra large - Large desktop, ultra-wide (1536px+) */
  --lufa-primitive-color-gray-50: #f9fafb; /** Lightest gray - backgrounds, subtle borders */
  --lufa-primitive-color-gray-100: #f3f4f6; /** Very light gray - hover states, disabled backgrounds */
  --lufa-primitive-color-gray-200: #e5e7eb; /** Light gray - borders, separators */
  --lufa-primitive-color-gray-300: #d1d5db; /** Medium-light gray - inactive elements */
  --lufa-primitive-color-gray-400: #9ca3af; /** Medium gray - placeholders, disabled text */
  --lufa-primitive-color-gray-500: #6b7280; /** Base gray - secondary text, icons */
  --lufa-primitive-color-gray-600: #4b5563; /** Dark gray - primary text, headings */
  --lufa-primitive-color-gray-700: #374151; /** Darker gray - accented text */
  --lufa-primitive-color-gray-800: #1f2937; /** Very dark gray - high contrast text */
  --lufa-primitive-color-gray-900: #111827; /** Darkest gray - maximum contrast text */
  --lufa-primitive-color-blue-50: #eff6ff; /** Lightest blue - info backgrounds */
  --lufa-primitive-color-blue-100: #dbeafe; /** Very light blue - info hover states */
  --lufa-primitive-color-blue-200: #bfdbfe; /** Light blue - info borders */
  --lufa-primitive-color-blue-300: #93c5fd; /** Medium-light blue - disabled info elements */
  --lufa-primitive-color-blue-400: #60a5fa; /** Medium blue - info icons */
  --lufa-primitive-color-blue-500: #3b82f6; /** Base blue - brand primary, links */
  --lufa-primitive-color-blue-600: #2563eb; /** Dark blue - primary hover */
  --lufa-primitive-color-blue-700: #1d4ed8; /** Darker blue - primary active */
  --lufa-primitive-color-blue-800: #1e40af; /** Very dark blue - primary high contrast */
  --lufa-primitive-color-blue-900: #1e3a8a; /** Darkest blue - primary maximum contrast */
  --lufa-primitive-color-red-50: #fef2f2; /** Lightest red - error backgrounds */
  --lufa-primitive-color-red-100: #fee2e2; /** Very light red - error hover states */
  --lufa-primitive-color-red-200: #fecaca; /** Light red - error borders */
  --lufa-primitive-color-red-300: #fca5a5; /** Medium-light red - disabled error elements */
  --lufa-primitive-color-red-400: #f87171; /** Medium red - error icons */
  --lufa-primitive-color-red-500: #ef4444; /** Base red - error states, destructive actions */
  --lufa-primitive-color-red-600: #dc2626; /** Dark red - error hover */
  --lufa-primitive-color-red-700: #b91c1c; /** Darker red - error active */
  --lufa-primitive-color-red-800: #991b1b; /** Very dark red - error high contrast */
  --lufa-primitive-color-red-900: #7f1d1d; /** Darkest red - error maximum contrast */
  --lufa-primitive-color-green-50: #f0fdf4; /** Lightest green - success backgrounds */
  --lufa-primitive-color-green-100: #dcfce7; /** Very light green - success hover states */
  --lufa-primitive-color-green-200: #bbf7d0; /** Light green - success borders */
  --lufa-primitive-color-green-300: #86efac; /** Medium-light green - disabled success elements */
  --lufa-primitive-color-green-400: #4ade80; /** Medium green - success icons */
  --lufa-primitive-color-green-500: #22c55e; /** Base green - success states, positive actions */
  --lufa-primitive-color-green-600: #16a34a; /** Dark green - success hover */
  --lufa-primitive-color-green-700: #15803d; /** Darker green - success active */
  --lufa-primitive-color-green-800: #166534; /** Very dark green - success high contrast */
  --lufa-primitive-color-green-900: #14532d; /** Darkest green - success maximum contrast */
  --lufa-primitive-color-yellow-50: #fefce8; /** Lightest yellow - alert backgrounds */
  --lufa-primitive-color-yellow-100: #fef9c3; /** Very light yellow - alert hover states */
  --lufa-primitive-color-yellow-200: #fef08a; /** Light yellow - alert borders */
  --lufa-primitive-color-yellow-300: #fde047; /** Medium-light yellow - disabled alert elements */
  --lufa-primitive-color-yellow-400: #facc15; /** Medium yellow - alert icons */
  --lufa-primitive-color-yellow-500: #eab308; /** Base yellow - alert states, attention */
  --lufa-primitive-color-yellow-600: #ca8a04; /** Dark yellow - alert hover */
  --lufa-primitive-color-yellow-700: #a16207; /** Darker yellow - alert active */
  --lufa-primitive-color-yellow-800: #854d0e; /** Very dark yellow - alert high contrast */
  --lufa-primitive-color-yellow-900: #713f12; /** Darkest yellow - alert maximum contrast */
  --lufa-primitive-color-purple-50: #faf5ff; /** Lightest purple - accent backgrounds */
  --lufa-primitive-color-purple-100: #f3e8ff; /** Very light purple - accent hover states */
  --lufa-primitive-color-purple-200: #e9d5ff; /** Light purple - accent borders */
  --lufa-primitive-color-purple-300: #d8b4fe; /** Medium-light purple - disabled accent elements */
  --lufa-primitive-color-purple-400: #c084fc; /** Medium purple - accent icons */
  --lufa-primitive-color-purple-500: #a855f7; /** Base purple - secondary brand, accent */
  --lufa-primitive-color-purple-600: #9333ea; /** Dark purple - accent hover */
  --lufa-primitive-color-purple-700: #7e22ce; /** Darker purple - accent active */
  --lufa-primitive-color-purple-800: #6b21a8; /** Very dark purple - accent high contrast */
  --lufa-primitive-color-purple-900: #581c87; /** Darkest purple - accent maximum contrast */
  --lufa-primitive-color-hc-black: #000000; /** Pure black for high-contrast text and borders - WCAG AAA compliant */
  --lufa-primitive-color-hc-white: #ffffff; /** Pure white for high-contrast backgrounds and inverse text */
  --lufa-primitive-color-hc-blue: #0000ff; /** Pure blue for high-contrast primary actions and links */
  --lufa-primitive-color-hc-red: #ff0000; /** Pure red for high-contrast error states and destructive actions */
  --lufa-primitive-color-hc-green: #00ff00; /** Pure green for high-contrast success states and positive feedback */
  --lufa-primitive-color-hc-yellow: #ffff00; /** Pure yellow for high-contrast warning states and alerts */
  --lufa-primitive-color-hc-purple: #9900ff; /** Pure purple for high-contrast visited links and secondary accents */
  --lufa-primitive-color-alpha-black-4: rgba(0, 0, 0, 0.04); /** 4% opacity black - ultra-subtle overlay */
  --lufa-primitive-color-alpha-black-5: rgba(0, 0, 0, 0.05); /** 5% opacity black - ultra-subtle shadow layer */
  --lufa-primitive-color-alpha-black-8: rgba(0, 0, 0, 0.08); /** 8% opacity black - hover state overlay */
  --lufa-primitive-color-alpha-black-12: rgba(0, 0, 0, 0.12); /** 12% opacity black - hover/scrim variant */
  --lufa-primitive-color-alpha-black-15: rgba(0, 0, 0, 0.15); /** 15% opacity black - soft shadow layer */
  --lufa-primitive-color-alpha-black-16: rgba(0, 0, 0, 0.16); /** 16% opacity black - subtle overlay */
  --lufa-primitive-color-alpha-black-38: rgba(0, 0, 0, 0.38); /** 38% opacity black - disabled state standard (Material Design) */
  --lufa-primitive-color-alpha-black-50: rgba(0, 0, 0, 0.5); /** 50% opacity black - balanced overlay */
  --lufa-primitive-color-alpha-black-60: rgba(0, 0, 0, 0.6); /** 60% opacity black - medium overlay */
  --lufa-primitive-color-alpha-black-80: rgba(0, 0, 0, 0.8); /** 80% opacity black - strong overlay */
  --lufa-primitive-color-alpha-black-90: rgba(0, 0, 0, 0.9); /** 90% opacity black - very strong overlay */
  --lufa-primitive-color-alpha-black-100: #000000; /** Solid black - reference value */
  --lufa-primitive-color-alpha-white-4: rgba(255, 255, 255, 0.04); /** 4% opacity white - ultra-subtle overlay */
  --lufa-primitive-color-alpha-white-5: rgba(255, 255, 255, 0.05); /** 5% opacity white - ultra-subtle shadow layer */
  --lufa-primitive-color-alpha-white-8: rgba(255, 255, 255, 0.08); /** 8% opacity white - hover state overlay */
  --lufa-primitive-color-alpha-white-12: rgba(255, 255, 255, 0.12); /** 12% opacity white - hover/scrim variant */
  --lufa-primitive-color-alpha-white-15: rgba(255, 255, 255, 0.15); /** 15% opacity white - soft shadow layer */
  --lufa-primitive-color-alpha-white-16: rgba(255, 255, 255, 0.16); /** 16% opacity white - subtle overlay */
  --lufa-primitive-color-alpha-white-38: rgba(255, 255, 255, 0.38); /** 38% opacity white - disabled state standard */
  --lufa-primitive-color-alpha-white-50: rgba(255, 255, 255, 0.5); /** 50% opacity white - balanced overlay */
  --lufa-primitive-color-alpha-white-60: rgba(255, 255, 255, 0.6); /** 60% opacity white - medium overlay */
  --lufa-primitive-color-alpha-white-80: rgba(255, 255, 255, 0.8); /** 80% opacity white - strong overlay */
  --lufa-primitive-color-alpha-white-90: rgba(255, 255, 255, 0.9); /** 90% opacity white - very strong overlay */
  --lufa-primitive-color-alpha-white-100: #ffffff; /** Solid white - reference value */
  --lufa-primitive-height-24: 1.5rem; /** Extra small height - Compact UI elements */
  --lufa-primitive-height-32: 2rem; /** Small height - Compact buttons, inputs */
  --lufa-primitive-height-40: 2.5rem; /** Default height - Standard buttons, inputs */
  --lufa-primitive-height-48: 3rem; /** Large height - Prominent buttons, touch-friendly */
  --lufa-primitive-height-56: 3.5rem; /** Extra large height - Headers, app bars */
  --lufa-primitive-height-64: 4rem; /** 2X large height - Desktop headers */
  --lufa-primitive-height-80: 5rem; /** 3X large height - Hero elements */
  --lufa-primitive-height-96: 6rem; /** Maximum height - Extra large headers */
  --lufa-primitive-icon-size-scale-xs: 1rem; /** Extra small icon size - compact UI */
  --lufa-primitive-icon-size-scale-sm: 1.25rem; /** Small icon size - standard UI */
  --lufa-primitive-icon-size-scale-md: 1.5rem; /** Medium icon size - emphasized UI */
  --lufa-primitive-icon-size-scale-lg: 2rem; /** Large icon size - prominent UI */
  --lufa-primitive-icon-size-scale-xl: 2.5rem; /** Extra large icon size - hero UI */
  --lufa-primitive-layout-sidebar-width: 17.5rem; /** Standard sidebar width for desktop navigation panels */
  --lufa-primitive-layout-content-max-width: 45rem; /** Maximum width for readable text content (optimal reading length ~65-75 characters) */
  --lufa-primitive-motion-duration-instant: 100ms; /** Instant duration for immediate feedback (100ms) */
  --lufa-primitive-motion-duration-fast: 150ms; /** Fast duration for quick transitions (150ms) */
  --lufa-primitive-motion-duration-normal: 300ms; /** Normal duration for standard transitions (300ms) */
  --lufa-primitive-motion-duration-slow: 500ms; /** Slow duration for deliberate transitions (500ms) */
  --lufa-primitive-motion-duration-slower: 2s; /** Very slow duration for continuous animations (2s) */
  --lufa-primitive-motion-easing-linear: cubic-bezier(0, 0, 1, 1); /** Linear easing - constant speed (no acceleration) */
  --lufa-primitive-motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1); /** Ease-in - slow start, fast end (accelerating) */
  --lufa-primitive-motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1); /** Ease-out - fast start, slow end (decelerating) */
  --lufa-primitive-motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /** Ease-in-out - slow start and end (smooth) */
  --lufa-primitive-motion-easing-ease: ease; /** Standard ease - browser default easing */
  --lufa-primitive-motion-easing-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /** Bounce easing - overshoots and settles back (playful) */
  --lufa-primitive-motion-easing-ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275); /** Elastic easing - slight overshoot (energetic) */
  --lufa-primitive-opacity-scale-disabled: 0.38; /** Opacity for disabled states (Material Design standard - 38%) */
  --lufa-primitive-opacity-scale-placeholder: 0.5; /** Opacity for placeholder elements (50%) */
  --lufa-primitive-opacity-scale-loading: 0.6; /** Opacity for loading states (60%) */
  --lufa-primitive-radius-scale-none: 0rem; /** No rounding - sharp corners */
  --lufa-primitive-radius-scale-sm: 0.125rem; /** Small radius - slightly rounded corners */
  --lufa-primitive-radius-scale-base: 0.25rem; /** Base radius - standard rounding for most elements */
  --lufa-primitive-radius-scale-md: 0.375rem; /** Medium radius - more pronounced rounding */
  --lufa-primitive-radius-scale-lg: 0.5rem; /** Large radius - generous rounding */
  --lufa-primitive-radius-scale-xl: 0.75rem; /** Extra large radius - very pronounced rounding */
  --lufa-primitive-radius-scale-2xl: 1rem; /** 2X Extra large radius - highly pronounced rounding */
  --lufa-primitive-radius-scale-full: 624.9375rem; /** Full radius - perfect circle or pill shape */
  --lufa-primitive-shadow-elevation-none: 0px 0px 0px 0px rgba(0, 0, 0, 0); /** No shadow - surface at base level */
  --lufa-primitive-shadow-elevation-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); /** Small shadow - subtle elevation for cards and panels */
  --lufa-primitive-shadow-elevation-base: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); /** Base shadow - standard elevation for cards */
  --lufa-primitive-shadow-elevation-md: 0px 4px 6px 0px rgba(0, 0, 0, 0.1); /** Medium shadow - elevation for dropdowns and popovers */
  --lufa-primitive-shadow-elevation-lg: 0px 8px 16px 0px rgba(0, 0, 0, 0.12); /** Large shadow - elevation for modals and sidebars */
  --lufa-primitive-shadow-elevation-xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.15); /** Extra large shadow - maximum elevation for floating elements */
  --lufa-primitive-spacing-0: 0rem; /** Zero spacing - reset/remove gaps */
  --lufa-primitive-spacing-4: 0.25rem; /** Extra tight - minimal gaps between related elements */
  --lufa-primitive-spacing-8: 0.5rem; /** Tight - compact layouts, inline spacing */
  --lufa-primitive-spacing-12: 0.75rem; /** Comfortable - default element spacing */
  --lufa-primitive-spacing-16: 1rem; /** Base spacing - standard component gaps */
  --lufa-primitive-spacing-24: 1.5rem; /** Spacious - wider gaps between sections */
  --lufa-primitive-spacing-32: 2rem; /** Ample - major section spacing */
  --lufa-primitive-spacing-40: 2.5rem; /** Extra ample - emphasized spacing */
  --lufa-primitive-spacing-48: 3rem; /** Very ample - prominent gaps */
  --lufa-primitive-spacing-64: 4rem; /** Large - large page sections */
  --lufa-primitive-spacing-80: 5rem; /** Extra large - major layout spacing */
  --lufa-primitive-spacing-96: 6rem; /** Maximum - largest spacing value */
  --lufa-primitive-typography-font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /** System sans-serif font stack - optimized for readability, 0kb download */
  --lufa-primitive-typography-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /** System monospace font stack - code blocks, technical content */
  --lufa-primitive-typography-font-size-xs: 0.75rem; /** Extra small font size - used for tiny labels, footnotes */
  --lufa-primitive-typography-font-size-sm: 0.875rem; /** Small font size - used for secondary text, descriptions */
  --lufa-primitive-typography-font-size-base: 1rem; /** Base font size - default size for body text */
  --lufa-primitive-typography-font-size-lg: 1.125rem; /** Large font size - used for emphasized text */
  --lufa-primitive-typography-font-size-xl: 1.25rem; /** Extra large font size - used for subtitles */
  --lufa-primitive-typography-font-size-2xl: clamp(1.25rem, 1rem + 1vw, 1.5rem); /** 2x extra large font size - fluid scaling from mobile to desktop */
  --lufa-primitive-typography-font-size-3xl: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); /** 3x extra large font size - fluid scaling from mobile to desktop */
  --lufa-primitive-typography-font-size-4xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem); /** 4x extra large font size - fluid scaling from mobile to desktop */
  --lufa-primitive-typography-font-size-5xl: clamp(2rem, 1.5rem + 2vw, 3rem); /** 5x extra large font size - fluid scaling from mobile to desktop */
  --lufa-primitive-typography-font-size-6xl: clamp(2.5rem, 2rem + 2.5vw, 3.75rem); /** 6x extra large font size - fluid scaling for hero headlines and featured content */
  --lufa-primitive-typography-font-size-7xl: clamp(3rem, 2.5rem + 3vw, 4.5rem); /** 7x extra large font size - fluid scaling for marketing hero sections */
  --lufa-primitive-typography-font-size-8xl: clamp(4rem, 3rem + 4vw, 6rem); /** 8x extra large font size - fluid scaling for display text and brand impact moments (scales from 400px+ viewport) */
  --lufa-primitive-typography-font-weight-normal: 400; /** Normal font weight - used for standard body text */
  --lufa-primitive-typography-font-weight-medium: 500; /** Medium font weight - used for subtle emphasis */
  --lufa-primitive-typography-font-weight-semibold: 600; /** Semibold font weight - used for subtitles and strong emphasis */
  --lufa-primitive-typography-font-weight-bold: 700; /** Bold font weight - used for headings and important elements */
  --lufa-primitive-typography-letter-spacing-tighter: -0.0025rem; /** Extra tight letter spacing for very large headings and display text */
  --lufa-primitive-typography-letter-spacing-tight: -0.00125rem; /** Tight letter spacing for large headings */
  --lufa-primitive-typography-letter-spacing-normal: 0rem; /** Normal letter spacing for body text and default use */
  --lufa-primitive-typography-letter-spacing-wide: 0.003125rem; /** Wide letter spacing for small text and uppercase labels */
  --lufa-primitive-typography-letter-spacing-wider: 0.00625rem; /** Extra wide letter spacing for all-caps headings and emphasis */
  --lufa-primitive-typography-line-height-tight: 1.25; /** Tight line height - used for headings and short text */
  --lufa-primitive-typography-line-height-normal: 1.5; /** Normal line height - used for standard body text (WCAG recommended) */
  --lufa-primitive-typography-line-height-relaxed: 1.75; /** Relaxed line height - used for better readability of long text */
  --lufa-core-color-alpha-black-4: var(--lufa-primitive-color-alpha-black-4); /** Ultra-subtle black overlay - hover state on light surfaces */
  --lufa-core-color-alpha-black-8: var(--lufa-primitive-color-alpha-black-8); /** Subtle black overlay - pressed states and focus glow on light surfaces */
  --lufa-core-color-alpha-black-16: var(--lufa-primitive-color-alpha-black-16); /** Light black overlay - selected states and focus ring on light surfaces */
  --lufa-core-color-alpha-black-38: var(--lufa-primitive-color-alpha-black-38); /** Medium black overlay - scrim for bottom sheets and drawers */
  --lufa-core-color-alpha-black-50: var(--lufa-primitive-color-alpha-black-50); /** Half-opacity black overlay - modal backdrops in light mode */
  --lufa-core-color-alpha-black-60: var(--lufa-primitive-color-alpha-black-60); /** Strong black overlay - scrim in dark mode */
  --lufa-core-color-alpha-black-80: var(--lufa-primitive-color-alpha-black-80); /** Very strong black overlay - modal backdrops in dark mode, high-contrast scrim */
  --lufa-core-color-alpha-black-90: var(--lufa-primitive-color-alpha-black-90); /** Near-opaque black overlay - high-contrast modal backdrops */
  --lufa-core-color-alpha-white-8: var(--lufa-primitive-color-alpha-white-8); /** Subtle white overlay - hover state on dark surfaces */
  --lufa-core-color-alpha-white-16: var(--lufa-primitive-color-alpha-white-16); /** Light white overlay - pressed/selected states on dark surfaces */
  --lufa-core-layout-container-xs: var(--lufa-primitive-breakpoint-xs); /** Extra small container max-width (320px) */
  --lufa-core-layout-container-sm: var(--lufa-primitive-breakpoint-sm); /** Small container max-width (640px) */
  --lufa-core-layout-container-md: var(--lufa-primitive-breakpoint-md); /** Medium container max-width (768px) */
  --lufa-core-layout-container-lg: var(--lufa-primitive-breakpoint-lg); /** Large container max-width (1024px) */
  --lufa-core-layout-container-xl: var(--lufa-primitive-breakpoint-xl); /** Extra large container max-width (1280px) */
  --lufa-core-layout-container-2xl: var(--lufa-primitive-breakpoint-2xl); /** 2X extra large container max-width (1536px) */
  --lufa-core-layout-container-gutter-base: var(--lufa-primitive-spacing-16); /** Horizontal gutter between container and content on mobile */
  --lufa-core-layout-container-gutter-md: var(--lufa-primitive-spacing-24); /** Horizontal gutter between container and content on tablet */
  --lufa-core-layout-container-gutter-lg: var(--lufa-primitive-spacing-32); /** Horizontal gutter between container and content on desktop */
  --lufa-core-layout-container-gutter-fluid: clamp(16px, 4vw, 48px); /** Fluid container gutters (scales from 16px to 48px) */
  --lufa-core-layout-content-max-width: var(--lufa-primitive-layout-content-max-width); /** Maximum width for readable text content (optimal reading length) */
  --lufa-core-layout-grid-columns: 12; /** Standard 12-column grid system */
  --lufa-core-layout-grid-gap-tight: var(--lufa-primitive-spacing-8); /** Tight gap between grid items (8px) */
  --lufa-core-layout-grid-gap-default: var(--lufa-primitive-spacing-16); /** Default gap between grid items (16px) */
  --lufa-core-layout-grid-gap-comfortable: var(--lufa-primitive-spacing-24); /** Comfortable gap between grid items (24px) */
  --lufa-core-layout-grid-gap-spacious: var(--lufa-primitive-spacing-32); /** Spacious gap between grid items (32px) */
  --lufa-core-layout-grid-min-column-width: 17.5rem; /** Minimum width for grid columns in auto-fit/auto-fill layouts */
  --lufa-core-layout-header-height-base: var(--lufa-primitive-height-56); /** Header height for mobile viewports */
  --lufa-core-layout-header-height-md: var(--lufa-primitive-height-64); /** Header height for tablet and desktop viewports */
  --lufa-core-layout-header-height-lg: var(--lufa-primitive-height-64); /** Header height for large desktop viewports */
  --lufa-core-layout-hero-padding-fluid: clamp(32px, 6vw, 80px); /** Fluid padding for hero sections (scales from 32px to 80px) */
  --lufa-core-layout-modal-padding-base: var(--lufa-primitive-spacing-24); /** Internal padding for modals on mobile */
  --lufa-core-layout-modal-padding-md: var(--lufa-primitive-spacing-32); /** Internal padding for modals on tablet */
  --lufa-core-layout-modal-padding-lg: var(--lufa-primitive-spacing-40); /** Internal padding for modals on desktop */
  --lufa-core-layout-page-padding-base: var(--lufa-primitive-spacing-16); /** Horizontal padding for page container on mobile viewports */
  --lufa-core-layout-page-padding-md: var(--lufa-primitive-spacing-24); /** Horizontal padding for page container on tablet viewports */
  --lufa-core-layout-page-padding-lg: var(--lufa-primitive-spacing-32); /** Horizontal padding for page container on desktop viewports */
  --lufa-core-layout-page-margin-fluid: clamp(16px, 3vw, 32px); /** Fluid page margins (scales from 16px to 32px) */
  --lufa-core-layout-section-gap-base: var(--lufa-primitive-spacing-48); /** Vertical spacing between major page sections on mobile */
  --lufa-core-layout-section-gap-md: var(--lufa-primitive-spacing-64); /** Vertical spacing between major page sections on tablet */
  --lufa-core-layout-section-gap-lg: var(--lufa-primitive-spacing-80); /** Vertical spacing between major page sections on desktop */
  --lufa-core-layout-section-gap-fluid: clamp(48px, 8vw, 96px); /** Fluid vertical spacing between major sections (scales from 48px to 96px) */
  --lufa-core-layout-sidebar-width: var(--lufa-primitive-layout-sidebar-width); /** Standard width for sidebar navigation (desktop) */
  --lufa-core-typography-body-font-family: var(--lufa-primitive-typography-font-family-sans); /** Font family for body text and general content */
  --lufa-core-typography-body-font-weight: var(--lufa-primitive-typography-font-weight-normal); /** Font weight for body text */
  --lufa-core-typography-body-font-size-large: var(--lufa-primitive-typography-font-size-lg); /** Large body text size */
  --lufa-core-typography-body-font-size-default: var(--lufa-primitive-typography-font-size-base); /** Default body text size (16px) */
  --lufa-core-typography-body-font-size-small: var(--lufa-primitive-typography-font-size-sm); /** Small body text size */
  --lufa-core-typography-body-line-height: var(--lufa-primitive-typography-line-height-normal); /** Line height for body text (1.5 for optimal readability) */
  --lufa-core-typography-button-font-size: var(--lufa-primitive-typography-font-size-base); /** Font size for button text */
  --lufa-core-typography-caption-font-size: var(--lufa-primitive-typography-font-size-xs); /** Font size for captions and metadata */
  --lufa-core-typography-code-font-family: var(--lufa-primitive-typography-font-family-mono); /** Monospace font family for code and technical content */
  --lufa-core-typography-heading-font-family: var(--lufa-primitive-typography-font-family-sans); /** Font family for all heading levels (h1-h6) */
  --lufa-core-typography-heading-font-weight: var(--lufa-primitive-typography-font-weight-bold); /** Font weight for all heading levels */
  --lufa-core-typography-heading-letter-spacing: var(--lufa-primitive-typography-letter-spacing-tight); /** Letter spacing for headings — tight by default, override per theme */
  --lufa-core-typography-heading-font-size-h1: var(--lufa-primitive-typography-font-size-5xl); /** Font size for H1 headings (largest) */
  --lufa-core-typography-heading-font-size-h2: var(--lufa-primitive-typography-font-size-4xl); /** Font size for H2 headings */
  --lufa-core-typography-heading-font-size-h3: var(--lufa-primitive-typography-font-size-3xl); /** Font size for H3 headings */
  --lufa-core-typography-heading-font-size-h4: var(--lufa-primitive-typography-font-size-2xl); /** Font size for H4 headings */
  --lufa-core-typography-heading-font-size-h5: var(--lufa-primitive-typography-font-size-xl); /** Font size for H5 headings */
  --lufa-core-typography-heading-font-size-h6: var(--lufa-primitive-typography-font-size-lg); /** Font size for H6 headings (smallest) */
  --lufa-core-typography-label-font-size: var(--lufa-primitive-typography-font-size-sm); /** Font size for form labels and UI labels */
  --lufa-core-typography-medium-font-weight: var(--lufa-primitive-typography-font-weight-medium); /** Font weight for medium emphasis text (labels, navigation, subtle highlights) */
  --lufa-core-typography-small-font-size: var(--lufa-primitive-typography-font-size-sm); /** Font size for small text and captions */
  --lufa-core-typography-strong-font-weight: var(--lufa-primitive-typography-font-weight-semibold); /** Font weight for emphasized/strong text */
  --lufa-semantic-effect-glow-box-none: none; /** No box glow effect (default for most components) */
  --lufa-semantic-effect-glow-box-primary-default: none; /** Primary box glow effect for interactive elements (cards, buttons) - themeable */
  --lufa-semantic-effect-glow-box-primary-hover: none; /** Enhanced primary box glow on hover - themeable */
  --lufa-semantic-effect-glow-box-focus: 0 0 0 3px rgba(0, 0, 0, 0.16); /** Focus ring glow for accessibility - neutral alpha token, themeable via theme overrides */
  --lufa-semantic-effect-glow-text-none: none; /** No text glow effect (default) */
  --lufa-semantic-effect-glow-text-primary-default: none; /** Primary text glow for neon/cyberpunk effects - themeable */
  --lufa-semantic-effect-glow-text-primary-hover: none; /** Enhanced text glow on hover - themeable */
  --lufa-semantic-effect-glow-border-none: none; /** No border glow effect (default) */
  --lufa-semantic-effect-glow-border-focus: 0 0 0 2px rgba(0, 0, 0, 0.08); /** Border glow for focused inputs - neutral alpha token, themeable via theme overrides */
  --lufa-semantic-z-index-base: 0; /** Base z-index for normal content flow */
  --lufa-semantic-z-index-dropdown: 1000; /** Z-index for dropdown menus - above normal content */
  --lufa-semantic-z-index-sticky: 1100; /** Z-index for sticky positioned elements - above dropdowns */
  --lufa-semantic-z-index-fixed: 1200; /** Z-index for fixed positioned elements - above sticky elements */
  --lufa-semantic-z-index-modal-backdrop: 1300; /** Z-index for modal backdrops - overlays page content */
  --lufa-semantic-z-index-modal: 1400; /** Z-index for modal content - above modal backdrop */
  --lufa-semantic-z-index-popover: 1500; /** Z-index for popovers and tooltips - above modals */
  --lufa-semantic-z-index-toast: 1600; /** Z-index for toast notifications - highest layer for critical messages */
  --lufa-semantic-interactive-action-primary-default: var(--lufa-core-color-brand-primary-default); /** Primary action intent color - default state. Used for primary buttons, toggles, chips, and other actionable elements. */
  --lufa-semantic-interactive-action-primary-hover: var(--lufa-core-color-brand-primary-hover); /** Primary action intent color - hover state */
  --lufa-semantic-interactive-action-primary-active: var(--lufa-core-color-brand-primary-active); /** Primary action intent color - active/pressed state */
  --lufa-semantic-interactive-action-primary-on: var(--lufa-core-color-brand-primary-on-background); /** Text/icon color on primary action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-secondary-default: var(--lufa-core-color-brand-secondary-default); /** Secondary action intent color - default state. Used for secondary buttons, accents, and alternative actions. */
  --lufa-semantic-interactive-action-secondary-hover: var(--lufa-core-color-brand-secondary-hover); /** Secondary action intent color - hover state */
  --lufa-semantic-interactive-action-secondary-active: var(--lufa-core-color-brand-secondary-active); /** Secondary action intent color - active/pressed state */
  --lufa-semantic-interactive-action-secondary-on: var(--lufa-core-color-brand-secondary-on-background); /** Text/icon color on secondary action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-destructive-default: var(--lufa-core-color-feedback-error-default); /** Destructive action intent color - default state. Used for danger/delete buttons and destructive actions. */
  --lufa-semantic-interactive-action-destructive-hover: var(--lufa-core-color-feedback-error-hover); /** Destructive action intent color - hover state */
  --lufa-semantic-interactive-action-destructive-active: var(--lufa-core-color-feedback-error-active); /** Destructive action intent color - active/pressed state */
  --lufa-semantic-interactive-action-destructive-on: var(--lufa-core-color-feedback-error-on-background); /** Text/icon color on destructive action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-success-default: var(--lufa-core-color-feedback-success-default); /** Success action intent color - default state. Used for positive/confirmation action elements. */
  --lufa-semantic-interactive-action-success-hover: var(--lufa-core-color-feedback-success-hover); /** Success action intent color - hover state */
  --lufa-semantic-interactive-action-success-active: var(--lufa-core-color-feedback-success-active); /** Success action intent color - active/pressed state */
  --lufa-semantic-interactive-action-success-on: var(--lufa-core-color-feedback-success-on-background); /** Text/icon color on success action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-warning-default: var(--lufa-core-color-feedback-warning-default); /** Warning action intent color - default state. Used for caution/warning action elements. */
  --lufa-semantic-interactive-action-warning-hover: var(--lufa-core-color-feedback-warning-hover); /** Warning action intent color - hover state */
  --lufa-semantic-interactive-action-warning-active: var(--lufa-core-color-feedback-warning-active); /** Warning action intent color - active/pressed state */
  --lufa-semantic-interactive-action-warning-on: var(--lufa-core-color-feedback-warning-on-background); /** Text/icon color on warning action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-info-default: var(--lufa-core-color-feedback-info-default); /** Info action intent color - default state. Used for informational action elements. */
  --lufa-semantic-interactive-action-info-hover: var(--lufa-core-color-feedback-info-hover); /** Info action intent color - hover state */
  --lufa-semantic-interactive-action-info-active: var(--lufa-core-color-feedback-info-active); /** Info action intent color - active/pressed state */
  --lufa-semantic-interactive-action-info-on: var(--lufa-core-color-feedback-info-on-background); /** Text/icon color on info action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-neutral-default: var(--lufa-core-color-neutral-surface-default); /** Neutral action intent color - default state. Used for neutral/default action elements, slightly elevated above surface. */
  --lufa-semantic-interactive-action-neutral-hover: var(--lufa-core-color-neutral-surface-hover); /** Neutral action intent color - hover state */
  --lufa-semantic-interactive-action-neutral-active: var(--lufa-core-color-neutral-surface-active); /** Neutral action intent color - active/pressed state */
  --lufa-semantic-interactive-action-neutral-on: var(--lufa-core-color-neutral-text-primary); /** Text/icon color on neutral action backgrounds - uses primary text for readability */
  --lufa-semantic-interactive-background-default: var(--lufa-core-color-neutral-surface-default); /** Default background for interactive elements like buttons and inputs in their resting state */
  --lufa-semantic-interactive-background-hover: var(--lufa-core-color-neutral-surface-hover); /** Background color when hovering over interactive elements - provides visual feedback */
  --lufa-semantic-interactive-background-active: var(--lufa-core-color-brand-primary-active); /** Background color when pressing/clicking interactive elements - provides immediate feedback */
  --lufa-semantic-interactive-background-disabled: var(--lufa-core-color-neutral-surface-default); /** Background color for disabled interactive elements - indicates non-interactive state */
  --lufa-semantic-interactive-background-focus: var(--lufa-core-color-neutral-surface-default); /** Background color for focused interactive elements — same as default. Focus indication is provided by focus ring/border, not background change. */
  --lufa-semantic-interactive-border-default: var(--lufa-core-color-neutral-border-default); /** Default border color for interactive elements in resting state */
  --lufa-semantic-interactive-border-hover: var(--lufa-core-color-neutral-border-strong); /** Border color when hovering over interactive elements - stronger emphasis */
  --lufa-semantic-interactive-border-focus: var(--lufa-core-color-brand-primary-default); /** Border color for focused interactive elements - indicates keyboard focus and accessibility */
  --lufa-semantic-interactive-border-disabled: var(--lufa-core-color-neutral-border-default); /** Border color for disabled interactive elements - subtle indication of disabled state */
  --lufa-semantic-interactive-cursor-default: pointer; /** Default cursor for interactive elements (buttons, links, clickable items) */
  --lufa-semantic-interactive-cursor-disabled: not-allowed; /** Cursor for disabled interactive elements, indicating the action is not available */
  --lufa-semantic-interactive-cursor-loading: wait; /** Cursor for elements in a loading/busy state, indicating the user should wait */
  --lufa-semantic-interactive-focus-ring: var(--lufa-core-color-brand-primary-default); /** Color for focus rings around interactive elements - ensures accessibility compliance */
  --lufa-semantic-interactive-focus-ring-offset: var(--lufa-primitive-border-width-scale-base); /** Offset distance for focus rings from element edge - improves visibility (standard UX constant) */
  --lufa-semantic-interactive-focus-background: var(--lufa-core-color-brand-primary-default); /** Background color for focused interactive elements (rare use case) */
  --lufa-semantic-interactive-link-default: var(--lufa-core-color-brand-primary-default); /** Default link color for all link states in resting state */
  --lufa-semantic-interactive-link-hover: var(--lufa-core-color-brand-primary-hover); /** Link color when hovering - provides visual feedback */
  --lufa-semantic-interactive-link-visited: var(--lufa-core-color-brand-accent-visited); /** Color for visited links - helps users track navigation history */
  --lufa-semantic-interactive-link-focus: var(--lufa-core-color-brand-primary-default); /** Link color when focused via keyboard - accessibility focus state */
  --lufa-semantic-interactive-link-active: var(--lufa-core-color-brand-primary-active); /** Link color when being clicked/activated */
  --lufa-semantic-interactive-opacity-disabled: var(--lufa-primitive-opacity-scale-disabled); /** Opacity value for disabled interactive elements (Material Design standard) */
  --lufa-semantic-interactive-opacity-loading: var(--lufa-primitive-opacity-scale-loading); /** Opacity value for loading states and skeleton loaders */
  --lufa-semantic-interactive-opacity-placeholder: var(--lufa-primitive-opacity-scale-placeholder); /** Opacity value for placeholder text and empty states */
  --lufa-semantic-interactive-selected-background: var(--lufa-semantic-ui-overlay-selected); /** Background color for selected items in lists and menus */
  --lufa-semantic-interactive-selected-text: var(--lufa-core-color-brand-primary-default); /** Text color for selected items */
  --lufa-semantic-interactive-text-default: var(--lufa-core-color-neutral-text-primary); /** Default text color for interactive elements in resting state */
  --lufa-semantic-interactive-text-hover: var(--lufa-core-color-neutral-text-primary); /** Text color when hovering over interactive elements - maintains readability */
  --lufa-semantic-interactive-text-active: var(--lufa-core-color-neutral-text-primary); /** Text color when pressing/clicking interactive elements */
  --lufa-semantic-interactive-text-disabled: var(--lufa-core-color-neutral-text-disabled); /** Text color for disabled interactive elements - low contrast indicates non-interactive */
  --lufa-semantic-interactive-text-focus: var(--lufa-core-color-neutral-text-primary); /** Text color for focused interactive elements — same as default. Text color does not change on focus; the focus ring provides the visual indicator. */
  --lufa-semantic-layout-breakpoint-xs: var(--lufa-primitive-breakpoint-xs); /** Extra small layout breakpoint - mobile portrait */
  --lufa-semantic-layout-breakpoint-sm: var(--lufa-primitive-breakpoint-sm); /** Small layout breakpoint - mobile landscape, large phones */
  --lufa-semantic-layout-breakpoint-md: var(--lufa-primitive-breakpoint-md); /** Medium layout breakpoint - tablets portrait */
  --lufa-semantic-layout-breakpoint-lg: var(--lufa-primitive-breakpoint-lg); /** Large layout breakpoint - tablets landscape, small desktops */
  --lufa-semantic-layout-breakpoint-xl: var(--lufa-primitive-breakpoint-xl); /** Extra large layout breakpoint - desktop */
  --lufa-semantic-layout-breakpoint-2xl: var(--lufa-primitive-breakpoint-2xl); /** 2X extra large layout breakpoint - large desktop, ultra-wide */
  --lufa-semantic-typography-body-large: var(--lufa-core-typography-body-font-size-large); /** Large body text size - for emphasized paragraphs and lead text */
  --lufa-semantic-typography-body-default: var(--lufa-core-typography-body-font-size-default); /** Default body text size - standard for all paragraphs and content */
  --lufa-semantic-typography-body-small: var(--lufa-core-typography-body-font-size-small); /** Small body text size - for secondary content and descriptions */
  --lufa-semantic-typography-button: var(--lufa-core-typography-button-font-size); /** Button text size - for button labels and CTAs */
  --lufa-semantic-typography-caption: var(--lufa-core-typography-caption-font-size); /** Caption text size - smallest text for metadata and labels */
  --lufa-semantic-typography-heading-h1: var(--lufa-core-typography-heading-font-size-h1); /** Font size for H1 headings - largest heading for page titles and hero sections */
  --lufa-semantic-typography-heading-h2: var(--lufa-core-typography-heading-font-size-h2); /** Font size for H2 headings - major section titles */
  --lufa-semantic-typography-heading-h3: var(--lufa-core-typography-heading-font-size-h3); /** Font size for H3 headings - subsection titles */
  --lufa-semantic-typography-heading-h4: var(--lufa-core-typography-heading-font-size-h4); /** Font size for H4 headings - minor section titles */
  --lufa-semantic-typography-heading-h5: var(--lufa-core-typography-heading-font-size-h5); /** Font size for H5 headings - small section titles */
  --lufa-semantic-typography-heading-h6: var(--lufa-core-typography-heading-font-size-h6); /** Font size for H6 headings - smallest heading level */
  --lufa-semantic-typography-label: var(--lufa-core-typography-label-font-size); /** Label text size - for form labels and UI labels */
  --lufa-semantic-ui-animation-pulse-duration: var(--lufa-primitive-motion-duration-slower); /** Duration for pulse animation (breathing, pulsing effects) */
  --lufa-semantic-ui-animation-pulse-timing: var(--lufa-primitive-motion-easing-ease-in-out); /** Timing function for pulse animation */
  --lufa-semantic-ui-animation-shimmer-duration: var(--lufa-primitive-motion-duration-slower); /** Duration for shimmer animation (loading skeleton, shine effects) */
  --lufa-semantic-ui-animation-shimmer-timing: var(--lufa-primitive-motion-easing-linear); /** Timing function for shimmer animation */
  --lufa-semantic-ui-animation-slide-in-duration: var(--lufa-primitive-motion-duration-normal); /** Duration for slide-in animation */
  --lufa-semantic-ui-animation-slide-in-timing: var(--lufa-primitive-motion-easing-ease-out); /** Timing function for slide-in animation */
  --lufa-semantic-ui-background-pattern: none; /** Optional decorative background pattern overlay — none by default, themeable via theme overrides */
  --lufa-semantic-ui-background-page: var(--lufa-core-color-neutral-background); /** Main page background - base canvas for entire application */
  --lufa-semantic-ui-background-surface-default: var(--lufa-core-color-neutral-surface-default); /** Surface background for cards, panels, and elevated content */
  --lufa-semantic-ui-background-surface-raised: var(--lufa-core-color-neutral-surface-raised); /** Raised surface background - slightly elevated above default surface */
  --lufa-semantic-ui-background-surface-active: var(--lufa-core-color-neutral-surface-active); /** Active surface background - for pressed/active interactive surfaces */
  --lufa-semantic-ui-background-success: var(--lufa-core-color-feedback-success-subtle); /** Background for success messages and positive feedback */
  --lufa-semantic-ui-background-error: var(--lufa-core-color-feedback-error-subtle); /** Background for error messages and validation failures */
  --lufa-semantic-ui-background-warning: var(--lufa-core-color-feedback-warning-subtle); /** Background for warning messages and caution notices */
  --lufa-semantic-ui-background-info: var(--lufa-core-color-feedback-info-subtle); /** Background for informational messages and neutral notifications */
  --lufa-semantic-ui-background-on-success: var(--lufa-core-color-feedback-success-default); /** Text and icons on success background - for use with background-success (subtle background) */
  --lufa-semantic-ui-background-on-error: var(--lufa-core-color-feedback-error-default); /** Text and icons on error background - for use with background-error (subtle background) */
  --lufa-semantic-ui-background-on-warning: var(--lufa-core-color-feedback-warning-default); /** Text and icons on warning background - for use with background-warning (subtle background) */
  --lufa-semantic-ui-background-on-info: var(--lufa-core-color-feedback-info-default); /** Text and icons on info background - for use with background-info (subtle background) */
  --lufa-semantic-ui-background-on-primary: var(--lufa-core-color-brand-primary-on-background); /** Text and icons on primary brand background - themeable for accessibility */
  --lufa-semantic-ui-background-on-secondary: var(--lufa-core-color-brand-secondary-on-background); /** Text and icons on secondary brand background - themeable for accessibility */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-base); /** Small border radius for subtle rounding (4px) */
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-lg); /** Default border radius for standard components (8px - most common) */
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-xl); /** Medium border radius for emphasized rounding (12px) */
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-2xl); /** Large border radius for prominent rounding (16px) */
  --lufa-semantic-ui-border-radius-full: var(--lufa-primitive-radius-scale-full); /** Full border radius for pill-shaped elements (9999px) */
  --lufa-semantic-ui-border-width-thin: var(--lufa-primitive-border-width-scale-thin); /** Thin border width for subtle borders (1px) */
  --lufa-semantic-ui-border-width-medium: var(--lufa-primitive-border-width-scale-base); /** Medium border width for emphasized borders (2px) */
  --lufa-semantic-ui-border-width-thick: var(--lufa-primitive-border-width-scale-thick); /** Thick border width for very strong emphasis (4px) */
  --lufa-semantic-ui-text-primary: var(--lufa-core-color-neutral-text-primary); /** Primary text color for headings and body content */
  --lufa-semantic-ui-text-secondary: var(--lufa-core-color-neutral-text-secondary); /** Secondary text color for supporting content */
  --lufa-semantic-ui-text-tertiary: var(--lufa-core-color-neutral-text-tertiary); /** Tertiary text color for subtle content */
  --lufa-semantic-ui-text-success: var(--lufa-core-color-feedback-success-default); /** Text color for success messages and positive feedback */
  --lufa-semantic-ui-text-error: var(--lufa-core-color-feedback-error-default); /** Text color for error messages and validation failures */
  --lufa-semantic-ui-text-warning: var(--lufa-core-color-feedback-warning-default); /** Text color for warning messages and caution notices */
  --lufa-semantic-ui-text-info: var(--lufa-core-color-feedback-info-default); /** Text color for informational messages */
  --lufa-semantic-ui-border-default: var(--lufa-core-color-neutral-border-default); /** Default border color for dividers and element boundaries */
  --lufa-semantic-ui-border-strong: var(--lufa-core-color-neutral-border-strong); /** Stronger border for emphasis and visual hierarchy */
  --lufa-semantic-ui-border-success: var(--lufa-core-color-feedback-success-border); /** Border color for success contexts */
  --lufa-semantic-ui-border-error: var(--lufa-core-color-feedback-error-border); /** Border color for error contexts */
  --lufa-semantic-ui-border-warning: var(--lufa-core-color-feedback-warning-border); /** Border color for warning contexts */
  --lufa-semantic-ui-border-info: var(--lufa-core-color-feedback-info-border); /** Border color for informational contexts */
  --lufa-semantic-ui-typography-caption: var(--lufa-semantic-typography-caption); /** Caption text size alias for UI components */
  --lufa-semantic-ui-divider-dash-size: var(--lufa-primitive-spacing-8); /** Length of each dash segment in a dashed divider */
  --lufa-semantic-ui-divider-dash-gap: var(--lufa-primitive-spacing-12); /** Total step between dash starts (dash + gap) in a dashed divider */
  --lufa-semantic-ui-height-sm: var(--lufa-primitive-height-32); /** Small UI component height - compact buttons, inputs */
  --lufa-semantic-ui-height-md: var(--lufa-primitive-height-40); /** Medium UI component height - default buttons, inputs */
  --lufa-semantic-ui-height-lg: var(--lufa-primitive-height-48); /** Large UI component height - prominent buttons, touch-friendly */
  --lufa-semantic-ui-icon-size-xs: var(--lufa-primitive-icon-size-scale-xs); /** Extra small icon size - compact UI elements */
  --lufa-semantic-ui-icon-size-sm: var(--lufa-primitive-icon-size-scale-sm); /** Small icon size - standard UI elements */
  --lufa-semantic-ui-icon-size-md: var(--lufa-primitive-icon-size-scale-md); /** Medium icon size - emphasized UI elements */
  --lufa-semantic-ui-icon-size-lg: var(--lufa-primitive-icon-size-scale-lg); /** Large icon size - prominent UI elements */
  --lufa-semantic-ui-icon-size-xl: var(--lufa-primitive-icon-size-scale-xl); /** Extra large icon size - hero UI elements */
  --lufa-semantic-ui-shadow-small: var(--lufa-primitive-shadow-elevation-sm); /** Small shadow for subtle elevation (cards, panels) */
  --lufa-semantic-ui-shadow-medium: var(--lufa-primitive-shadow-elevation-base); /** Medium shadow for standard elevation (default for cards) */
  --lufa-semantic-ui-shadow-large: var(--lufa-primitive-shadow-elevation-lg); /** Large shadow for strong elevation (modals, popovers) */
  --lufa-semantic-ui-shadow-extra-large: var(--lufa-primitive-shadow-elevation-xl); /** Extra large shadow for maximum elevation (floating elements) */
  --lufa-semantic-ui-spacing-tight: var(--lufa-primitive-spacing-4); /** Tight spacing for very dense layouts - minimal spacing between elements */
  --lufa-semantic-ui-spacing-compact: var(--lufa-primitive-spacing-8); /** Compact spacing for tight layouts and dense UIs */
  --lufa-semantic-ui-spacing-snug: var(--lufa-primitive-spacing-12); /** Snug spacing — between compact (8px) and default (16px), for components that need a mid-step */
  --lufa-semantic-ui-spacing-default: var(--lufa-primitive-spacing-16); /** Default spacing for standard layouts (most common) */
  --lufa-semantic-ui-spacing-comfortable: var(--lufa-primitive-spacing-24); /** Comfortable spacing for relaxed, breathable layouts */
  --lufa-semantic-ui-spacing-spacious: var(--lufa-primitive-spacing-32); /** Spacious spacing for generous, airy layouts */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-fast); /** Fast transition duration for quick interactions (150ms) */
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-normal); /** Normal transition duration for standard animations (250ms) */
  --lufa-semantic-ui-transition-duration-slow: var(--lufa-primitive-motion-duration-slow); /** Slow transition duration for deliberate animations (400ms) */
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-ease-in-out); /** Default timing function for smooth animations (ease-in-out) */
  --lufa-component-badge-padding-compact-block: var(--lufa-semantic-ui-spacing-tight); /** Compact badge block-axis padding (top/bottom) — semantic tight (4px) */
  --lufa-component-badge-padding-compact-inline: var(--lufa-semantic-ui-spacing-compact); /** Compact badge inline-axis padding (left/right) — semantic compact (8px) */
  --lufa-component-badge-padding-default-block: var(--lufa-semantic-ui-spacing-compact); /** Default badge block-axis padding (top/bottom) — semantic compact (8px) */
  --lufa-component-badge-padding-default-inline: var(--lufa-semantic-ui-spacing-snug); /** Default badge inline-axis padding (left/right) — semantic snug (12px) */
  --lufa-component-badge-padding-large-block: var(--lufa-semantic-ui-spacing-snug); /** Large badge block-axis padding (top/bottom) — semantic snug (12px) */
  --lufa-component-badge-padding-large-inline: var(--lufa-semantic-ui-spacing-default); /** Large badge inline-axis padding (left/right) — semantic default (16px) */
  --lufa-component-badge-font-size-compact: var(--lufa-semantic-typography-caption); /** Compact badge font size — semantic caption (12px) */
  --lufa-component-badge-font-size-default: var(--lufa-semantic-typography-body-small); /** Default badge font size — semantic body small (14px) */
  --lufa-component-badge-font-size-large: var(--lufa-semantic-typography-body-default); /** Large badge font size — semantic body default (16px) */
  --lufa-component-badge-border-radius: var(--lufa-semantic-ui-border-radius-full); /** Badge border radius (pill shape) */
  --lufa-component-badge-variant-default-background: var(--lufa-semantic-ui-background-surface-default); /** Default badge background (neutral) */
  --lufa-component-badge-variant-default-text: var(--lufa-semantic-ui-text-secondary); /** Default badge text color */
  --lufa-component-badge-variant-default-border: var(--lufa-semantic-ui-border-default); /** Default badge border (for outlined variant) */
  --lufa-component-badge-variant-success-background: var(--lufa-semantic-ui-background-success); /** Success badge background */
  --lufa-component-badge-variant-success-text: var(--lufa-semantic-ui-text-success); /** Success badge text color */
  --lufa-component-badge-variant-success-border: var(--lufa-semantic-ui-border-success); /** Success badge border (for outlined variant) */
  --lufa-component-badge-variant-error-background: var(--lufa-semantic-ui-background-error); /** Error badge background */
  --lufa-component-badge-variant-error-text: var(--lufa-semantic-ui-text-error); /** Error badge text color */
  --lufa-component-badge-variant-error-border: var(--lufa-semantic-ui-border-error); /** Error badge border (for outlined variant) */
  --lufa-component-badge-variant-warning-background: var(--lufa-semantic-ui-background-warning); /** Warning badge background */
  --lufa-component-badge-variant-warning-text: var(--lufa-semantic-ui-text-warning); /** Warning badge text color */
  --lufa-component-badge-variant-warning-border: var(--lufa-semantic-ui-border-warning); /** Warning badge border (for outlined variant) */
  --lufa-component-badge-variant-info-background: var(--lufa-semantic-ui-background-info); /** Info badge background */
  --lufa-component-badge-variant-info-text: var(--lufa-semantic-ui-text-info); /** Info badge text color */
  --lufa-component-badge-variant-info-border: var(--lufa-semantic-ui-border-info); /** Info badge border (for outlined variant) */
  --lufa-component-badge-dot-size: 0.375rem; /** Badge dot indicator size */
  --lufa-component-badge-effect-glow: var(--lufa-semantic-effect-glow-box-primary-default); /** Badge box-shadow glow effect */
  --lufa-component-badge-effect-animation-pulse: none; /** Badge pulse animation (for live/active indicators) */
  --lufa-component-button-effect-glow-default: var(--lufa-semantic-effect-glow-box-primary-default); /** Button box-shadow glow effect (default state) */
  --lufa-component-button-effect-glow-hover: var(--lufa-semantic-effect-glow-box-primary-hover); /** Button box-shadow glow effect (hover state) */
  --lufa-component-button-effect-text-glow-default: var(--lufa-semantic-effect-glow-text-primary-default); /** Button text-shadow glow effect (default state) */
  --lufa-component-button-effect-text-glow-hover: var(--lufa-semantic-effect-glow-text-primary-hover); /** Button text-shadow glow effect (hover state) */
  --lufa-component-button-type-solid-variant-primary-background-default: var(--lufa-semantic-interactive-action-primary-default); /** Solid primary button background color */
  --lufa-component-button-type-solid-variant-primary-background-hover: var(--lufa-semantic-interactive-action-primary-hover); /** Solid primary button hover state background */
  --lufa-component-button-type-solid-variant-primary-background-active: var(--lufa-semantic-interactive-action-primary-active); /** Solid primary button active/pressed state background */
  --lufa-component-button-type-solid-variant-primary-text: var(--lufa-semantic-interactive-action-primary-on); /** Solid primary button text color */
  --lufa-component-button-type-solid-variant-secondary-background-default: var(--lufa-semantic-interactive-action-secondary-default); /** Solid secondary button background color */
  --lufa-component-button-type-solid-variant-secondary-background-hover: var(--lufa-semantic-interactive-action-secondary-hover); /** Solid secondary button hover state background */
  --lufa-component-button-type-solid-variant-secondary-background-active: var(--lufa-semantic-interactive-action-secondary-active); /** Solid secondary button active/pressed state background */
  --lufa-component-button-type-solid-variant-secondary-text: var(--lufa-semantic-interactive-action-secondary-on); /** Solid secondary button text color */
  --lufa-component-button-type-solid-variant-destructive-background-default: var(--lufa-semantic-interactive-action-destructive-default); /** Solid destructive button background (danger actions) */
  --lufa-component-button-type-solid-variant-destructive-background-hover: var(--lufa-semantic-interactive-action-destructive-hover); /** Solid destructive button hover state background */
  --lufa-component-button-type-solid-variant-destructive-background-active: var(--lufa-semantic-interactive-action-destructive-active); /** Solid destructive button active/pressed state background */
  --lufa-component-button-type-solid-variant-destructive-text: var(--lufa-semantic-interactive-action-destructive-on); /** Solid destructive button text color */
  --lufa-component-button-type-solid-variant-success-background-default: var(--lufa-semantic-interactive-action-success-default); /** Solid success button background (positive actions) */
  --lufa-component-button-type-solid-variant-success-background-hover: var(--lufa-semantic-interactive-action-success-hover); /** Solid success button hover state background */
  --lufa-component-button-type-solid-variant-success-background-active: var(--lufa-semantic-interactive-action-success-active); /** Solid success button active/pressed state background */
  --lufa-component-button-type-solid-variant-success-text: var(--lufa-semantic-interactive-action-success-on); /** Solid success button text color */
  --lufa-component-button-type-solid-variant-warning-background-default: var(--lufa-semantic-interactive-action-warning-default); /** Solid warning button background */
  --lufa-component-button-type-solid-variant-warning-background-hover: var(--lufa-semantic-interactive-action-warning-hover); /** Solid warning button hover state background */
  --lufa-component-button-type-solid-variant-warning-background-active: var(--lufa-semantic-interactive-action-warning-active); /** Solid warning button active/pressed state background */
  --lufa-component-button-type-solid-variant-warning-text: var(--lufa-semantic-interactive-action-warning-on); /** Solid warning button text color */
  --lufa-component-button-type-solid-variant-info-background-default: var(--lufa-semantic-interactive-action-info-default); /** Solid info button background */
  --lufa-component-button-type-solid-variant-info-background-hover: var(--lufa-semantic-interactive-action-info-hover); /** Solid info button hover state background */
  --lufa-component-button-type-solid-variant-info-background-active: var(--lufa-semantic-interactive-action-info-active); /** Solid info button active/pressed state background */
  --lufa-component-button-type-solid-variant-info-text: var(--lufa-semantic-interactive-action-info-on); /** Solid info button text color */
  --lufa-component-button-type-solid-variant-neutral-background-default: var(--lufa-semantic-interactive-action-neutral-default); /** Solid neutral button background - resting state, slightly elevated above page surface */
  --lufa-component-button-type-solid-variant-neutral-background-hover: var(--lufa-semantic-interactive-action-neutral-hover); /** Solid neutral button hover state background */
  --lufa-component-button-type-solid-variant-neutral-background-active: var(--lufa-semantic-interactive-action-neutral-active); /** Solid neutral button active/pressed state background */
  --lufa-component-button-type-solid-variant-neutral-text: var(--lufa-semantic-interactive-action-neutral-on); /** Solid neutral button text color */
  --lufa-component-button-type-ghost-background-default: rgba(0, 0, 0, 0); /** Ghost button background (transparent) */
  --lufa-component-button-type-ghost-background-hover: var(--lufa-semantic-interactive-background-hover); /** Ghost button hover state background */
  --lufa-component-button-type-ghost-background-active: var(--lufa-semantic-ui-background-surface-active); /** Ghost button active/pressed state background - shared across all ghost variants */
  --lufa-component-button-type-ghost-text-default: var(--lufa-semantic-interactive-action-primary-default); /** Ghost button text color */
  --lufa-component-button-type-ghost-text-hover: var(--lufa-semantic-interactive-action-primary-hover); /** Ghost button hover state text color */
  --lufa-component-button-type-ghost-variant-primary-text-active: var(--lufa-semantic-interactive-action-primary-active); /** Ghost primary button active state text color */
  --lufa-component-button-type-ghost-variant-secondary-text-active: var(--lufa-semantic-interactive-action-secondary-active); /** Ghost secondary button active state text color */
  --lufa-component-button-type-ghost-variant-success-text-active: var(--lufa-semantic-interactive-action-success-active); /** Ghost success button active state text color */
  --lufa-component-button-type-ghost-variant-destructive-text-active: var(--lufa-semantic-interactive-action-destructive-active); /** Ghost destructive button active state text color */
  --lufa-component-button-type-ghost-variant-warning-text-active: var(--lufa-semantic-interactive-action-warning-active); /** Ghost warning button active state text color */
  --lufa-component-button-type-ghost-variant-info-text-active: var(--lufa-semantic-interactive-action-info-active); /** Ghost info button active state text color */
  --lufa-component-button-type-ghost-variant-neutral-text-active: var(--lufa-semantic-interactive-action-neutral-on); /** Ghost neutral button active state text color */
  --lufa-component-button-type-outline-background-default: rgba(0, 0, 0, 0); /** Outline button background (transparent) */
  --lufa-component-button-type-outline-background-hover: var(--lufa-semantic-interactive-action-primary-default); /** Outline button hover state background */
  --lufa-component-button-type-outline-border-default: var(--lufa-semantic-interactive-action-primary-default); /** Outline button border color */
  --lufa-component-button-type-outline-border-hover: var(--lufa-semantic-interactive-action-primary-hover); /** Outline button hover state border */
  --lufa-component-button-type-outline-text-default: var(--lufa-semantic-interactive-action-primary-default); /** Outline button text color */
  --lufa-component-button-type-outline-text-hover: var(--lufa-semantic-interactive-action-primary-on); /** Outline button hover state text */
  --lufa-component-button-type-outline-variant-primary-background-active: var(--lufa-semantic-interactive-action-primary-active); /** Outline primary button active state background */
  --lufa-component-button-type-outline-variant-primary-border-active: var(--lufa-semantic-interactive-action-primary-active); /** Outline primary button active state border color */
  --lufa-component-button-type-outline-variant-secondary-background-active: var(--lufa-semantic-interactive-action-secondary-active); /** Outline secondary button active state background */
  --lufa-component-button-type-outline-variant-secondary-border-active: var(--lufa-semantic-interactive-action-secondary-active); /** Outline secondary button active state border color */
  --lufa-component-button-type-outline-variant-success-background-active: var(--lufa-semantic-interactive-action-success-active); /** Outline success button active state background */
  --lufa-component-button-type-outline-variant-success-border-active: var(--lufa-semantic-interactive-action-success-active); /** Outline success button active state border color */
  --lufa-component-button-type-outline-variant-destructive-background-active: var(--lufa-semantic-interactive-action-destructive-active); /** Outline destructive button active state background */
  --lufa-component-button-type-outline-variant-destructive-border-active: var(--lufa-semantic-interactive-action-destructive-active); /** Outline destructive button active state border color */
  --lufa-component-button-type-outline-variant-warning-background-active: var(--lufa-semantic-interactive-action-warning-active); /** Outline warning button active state background */
  --lufa-component-button-type-outline-variant-warning-border-active: var(--lufa-semantic-interactive-action-warning-active); /** Outline warning button active state border color */
  --lufa-component-button-type-outline-variant-info-background-active: var(--lufa-semantic-interactive-action-info-active); /** Outline info button active state background */
  --lufa-component-button-type-outline-variant-info-border-active: var(--lufa-semantic-interactive-action-info-active); /** Outline info button active state border color */
  --lufa-component-button-type-outline-variant-neutral-background-active: var(--lufa-semantic-interactive-action-neutral-active); /** Outline neutral button active state background */
  --lufa-component-button-type-outline-variant-neutral-border-active: var(--lufa-semantic-interactive-action-neutral-active); /** Outline neutral button active state border color */
  --lufa-component-button-state-default-cursor: var(--lufa-semantic-interactive-cursor-default); /** Default button cursor — applied to the base button in all clickable states */
  --lufa-component-button-state-disabled-opacity: var(--lufa-semantic-interactive-opacity-disabled); /** Disabled button opacity */
  --lufa-component-button-state-disabled-cursor: var(--lufa-semantic-interactive-cursor-disabled); /** Disabled button cursor style */
  --lufa-component-button-state-loading-cursor: var(--lufa-semantic-interactive-cursor-loading); /** Loading button cursor style */
  --lufa-component-card-padding-sm: var(--lufa-semantic-ui-spacing-default); /** Small card padding for compact layouts */
  --lufa-component-card-padding-md: var(--lufa-semantic-ui-spacing-comfortable); /** Medium card padding (default) */
  --lufa-component-card-padding-lg: var(--lufa-semantic-ui-spacing-spacious); /** Large card padding for spacious layouts */
  --lufa-component-card-border-radius-sm: var(--lufa-semantic-ui-border-radius-small); /** Small border radius for subtle rounding */
  --lufa-component-card-border-radius-md: var(--lufa-semantic-ui-border-radius-medium); /** Medium border radius (default) */
  --lufa-component-card-border-radius-lg: var(--lufa-semantic-ui-border-radius-large); /** Large border radius for prominent rounding */
  --lufa-component-card-shadow-sm: var(--lufa-semantic-ui-shadow-small); /** Small shadow for subtle elevation */
  --lufa-component-card-shadow-md: var(--lufa-semantic-ui-shadow-medium); /** Medium shadow for standard elevation (default) */
  --lufa-component-card-shadow-lg: var(--lufa-semantic-ui-shadow-large); /** Large shadow for strong elevation */
  --lufa-component-card-background: var(--lufa-semantic-ui-background-surface-default); /** Card background color */
  --lufa-component-card-border: var(--lufa-semantic-ui-border-default); /** Card border color (for outlined variant) */
  --lufa-component-card-header-padding: var(--lufa-semantic-ui-spacing-default); /** Card header padding */
  --lufa-component-card-header-border: var(--lufa-semantic-ui-border-default); /** Card header bottom border (divider) */
  --lufa-component-card-footer-padding: var(--lufa-semantic-ui-spacing-default); /** Card footer padding */
  --lufa-component-card-footer-border: var(--lufa-semantic-ui-border-default); /** Card footer top border (divider) */
  --lufa-component-card-glow-default: var(--lufa-semantic-effect-glow-box-primary-default); /** Card glow effect (default state) - references semantic, themes can override */
  --lufa-component-card-glow-hover: var(--lufa-semantic-effect-glow-box-primary-hover); /** Card glow effect on hover - references semantic, themes can override */
  --lufa-component-card-glow-focus: var(--lufa-semantic-effect-glow-box-focus); /** Card focus ring glow for accessibility - references semantic, themes can override */
  --lufa-component-card-hover-shadow: var(--lufa-semantic-ui-shadow-large); /** Card shadow on hover state (for interactive cards) */
  --lufa-component-card-hover-scale: var(--lufa-semantic-interactive-transform-scale-hover); /** Card scale transformation on hover (mode-aware) */
  --lufa-component-card-hover-translate: var(--lufa-semantic-interactive-transform-translate-hover); /** Card vertical translation on hover (mode-aware lift) */
  --lufa-component-container-max-width-xs: var(--lufa-semantic-layout-breakpoint-xs); /** Max-width for extra small screens */
  --lufa-component-container-max-width-sm: var(--lufa-semantic-layout-breakpoint-sm); /** Max-width for small screens */
  --lufa-component-container-max-width-md: var(--lufa-semantic-layout-breakpoint-md); /** Max-width for medium screens */
  --lufa-component-container-max-width-lg: var(--lufa-semantic-layout-breakpoint-lg); /** Max-width for large screens */
  --lufa-component-container-max-width-xl: var(--lufa-semantic-layout-breakpoint-xl); /** Max-width for extra large screens */
  --lufa-component-container-max-width-2xl: var(--lufa-semantic-layout-breakpoint-2xl); /** Max-width for 2x extra large screens */
  --lufa-component-container-padding-default: var(--lufa-semantic-ui-spacing-default); /** Default horizontal padding for container */
  --lufa-component-divider-emphasis-subtle-color: var(--lufa-semantic-ui-border-default); /** Subtle emphasis divider color (light gray) */
  --lufa-component-divider-emphasis-subtle-thickness: var(--lufa-semantic-ui-border-width-thin); /** Subtle emphasis thickness */
  --lufa-component-divider-emphasis-default-color: var(--lufa-semantic-ui-border-default); /** Default emphasis divider color (gray) */
  --lufa-component-divider-emphasis-default-thickness: var(--lufa-semantic-ui-border-width-thin); /** Default emphasis thickness */
  --lufa-component-divider-emphasis-moderate-color: var(--lufa-semantic-ui-border-default); /** Moderate emphasis divider color (gray) */
  --lufa-component-divider-emphasis-moderate-thickness: var(--lufa-semantic-ui-border-width-medium); /** Moderate emphasis thickness - more visible */
  --lufa-component-divider-emphasis-strong-color: var(--lufa-semantic-ui-border-strong); /** Strong emphasis divider color (darker gray) */
  --lufa-component-divider-emphasis-strong-thickness: var(--lufa-semantic-ui-border-width-medium); /** Strong emphasis thickness */
  --lufa-component-divider-emphasis-bold-color: var(--lufa-semantic-ui-border-strong); /** Bold emphasis divider color (darker gray) */
  --lufa-component-divider-emphasis-bold-thickness: var(--lufa-semantic-ui-border-width-thick); /** Bold emphasis thickness - major section breaks */
  --lufa-component-divider-spacing-compact: var(--lufa-semantic-ui-spacing-compact); /** Compact spacing around divider */
  --lufa-component-divider-spacing-default: var(--lufa-semantic-ui-spacing-default); /** Default spacing around divider */
  --lufa-component-divider-spacing-comfortable: var(--lufa-semantic-ui-spacing-comfortable); /** Comfortable spacing around divider */
  --lufa-component-divider-dash-size: var(--lufa-semantic-ui-divider-dash-size); /** Length of each dash segment in a dashed divider */
  --lufa-component-divider-dash-gap: var(--lufa-semantic-ui-divider-dash-gap); /** Total step between dash starts (dash + gap) in a dashed divider */
  --lufa-component-input-padding-sm-block: var(--lufa-semantic-ui-spacing-compact); /** Small input block-axis padding (top/bottom, 8px) */
  --lufa-component-input-padding-sm-inline: var(--lufa-semantic-ui-spacing-default); /** Small input inline-axis padding (left/right, 16px) */
  --lufa-component-input-padding-md-block: var(--lufa-semantic-ui-spacing-default); /** Medium input block-axis padding (top/bottom, 16px) */
  --lufa-component-input-padding-md-inline: var(--lufa-semantic-ui-spacing-comfortable); /** Medium input inline-axis padding (left/right, 24px) */
  --lufa-component-input-padding-lg-block: var(--lufa-semantic-ui-spacing-comfortable); /** Large input block-axis padding (top/bottom, 24px) */
  --lufa-component-input-padding-lg-inline: var(--lufa-semantic-ui-spacing-spacious); /** Large input inline-axis padding (left/right, 32px) */
  --lufa-component-input-height-sm: var(--lufa-semantic-ui-height-sm); /** Small input minimum height */
  --lufa-component-input-height-md: var(--lufa-semantic-ui-height-md); /** Medium input minimum height (default) */
  --lufa-component-input-height-lg: var(--lufa-semantic-ui-height-lg); /** Large input minimum height */
  --lufa-component-input-font-size-sm: var(--lufa-semantic-typography-body-small); /** Small input font size */
  --lufa-component-input-font-size-md: var(--lufa-semantic-typography-body-default); /** Medium input font size (default) */
  --lufa-component-input-font-size-lg: var(--lufa-semantic-typography-body-large); /** Large input font size */
  --lufa-component-input-border-radius: var(--lufa-semantic-ui-border-radius-default); /** Input border radius */
  --lufa-component-input-border-width: var(--lufa-semantic-ui-border-width-thin); /** Input border width */
  --lufa-component-input-background-default: var(--lufa-semantic-ui-background-surface-default); /** Input background color (default state) */
  --lufa-component-input-background-hover: var(--lufa-semantic-interactive-background-hover); /** Input background color (hover state) */
  --lufa-component-input-background-disabled: var(--lufa-semantic-interactive-background-disabled); /** Input background color (disabled state) */
  --lufa-component-input-border-default: var(--lufa-semantic-interactive-border-default); /** Input border color (default state) */
  --lufa-component-input-border-hover: var(--lufa-semantic-interactive-border-hover); /** Input border color (hover state) */
  --lufa-component-input-border-focus: var(--lufa-semantic-interactive-border-focus); /** Input border color (focus state) */
  --lufa-component-input-border-error: var(--lufa-semantic-ui-border-error); /** Input border color (error/invalid state) */
  --lufa-component-input-border-disabled: var(--lufa-semantic-interactive-border-disabled); /** Input border color (disabled state) */
  --lufa-component-input-text-default: var(--lufa-semantic-interactive-text-default); /** Input text color (default state) */
  --lufa-component-input-text-placeholder: var(--lufa-semantic-ui-text-tertiary); /** Input placeholder text color */
  --lufa-component-input-text-disabled: var(--lufa-semantic-interactive-text-disabled); /** Input text color (disabled state) */
  --lufa-component-input-label-font-size: var(--lufa-semantic-typography-label); /** Input label font size */
  --lufa-component-input-label-color: var(--lufa-semantic-ui-text-secondary); /** Input label text color */
  --lufa-component-input-label-spacing: var(--lufa-semantic-ui-spacing-compact); /** Spacing between label and input field */
  --lufa-component-input-helper-text-font-size: var(--lufa-semantic-typography-caption); /** Helper/error text font size */
  --lufa-component-input-helper-text-color-default: var(--lufa-semantic-ui-text-tertiary); /** Helper text color (default) */
  --lufa-component-input-helper-text-color-error: var(--lufa-semantic-ui-text-error); /** Helper text color (error state) */
  --lufa-component-input-helper-spacing: var(--lufa-semantic-ui-spacing-compact); /** Spacing between input field and helper text */
  --lufa-component-input-icon-spacing: var(--lufa-component-shared-icon-spacing); /** Spacing between input icon and text */
  --lufa-component-input-effect-glow-border-default: var(--lufa-semantic-effect-glow-border-none); /** Input border glow effect (default state) */
  --lufa-component-input-effect-glow-border-focus: var(--lufa-semantic-effect-glow-border-focus); /** Input border glow effect (focus state) */
  --lufa-component-input-opacity-inactive: 1; /** Input opacity when inactive/disabled */
  --lufa-component-input-state-disabled-cursor: var(--lufa-semantic-interactive-cursor-disabled); /** Cursor for disabled input state */
  --lufa-component-modal-backdrop-background: var(--lufa-semantic-ui-overlay-backdrop); /** Modal backdrop background (semi-transparent overlay) */
  --lufa-component-modal-backdrop-blur: var(--lufa-semantic-ui-backdrop-blur); /** Backdrop blur effect for modal overlay */
  --lufa-component-modal-content-background: var(--lufa-semantic-ui-background-surface-default); /** Modal content background */
  --lufa-component-modal-content-padding: var(--lufa-semantic-ui-spacing-comfortable); /** Modal content padding */
  --lufa-component-modal-content-max-width-sm: 25rem; /** Small modal max width — intentionally raw (400px). Breakpoint-aligned modal width not covered by the semantic spacing scale. */
  --lufa-component-modal-content-max-width-md: 37.5rem; /** Medium modal max width (default) — intentionally raw (600px). Breakpoint-aligned modal width not covered by the semantic spacing scale. */
  --lufa-component-modal-content-max-width-lg: 50rem; /** Large modal max width — intentionally raw (800px). Breakpoint-aligned modal width not covered by the semantic spacing scale. */
  --lufa-component-modal-content-max-width-xl: 75rem; /** Extra large modal max width — intentionally raw (1200px). Breakpoint-aligned modal width not covered by the semantic spacing scale. */
  --lufa-component-modal-content-border-radius: var(--lufa-semantic-ui-border-radius-large); /** Modal content border radius */
  --lufa-component-modal-content-shadow: var(--lufa-semantic-ui-shadow-extra-large); /** Modal content shadow for strong elevation */
  --lufa-component-modal-header-padding: var(--lufa-semantic-ui-spacing-comfortable); /** Modal header padding */
  --lufa-component-modal-header-border: var(--lufa-semantic-ui-border-default); /** Modal header bottom border */
  --lufa-component-modal-footer-padding: var(--lufa-semantic-ui-spacing-comfortable); /** Modal footer padding */
  --lufa-component-modal-footer-border: var(--lufa-semantic-ui-border-default); /** Modal footer top border */
  --lufa-component-modal-close-button-size: 2rem; /** Close button size (width and height) — intentionally raw (32px). Fixed touch-target constant; minimum recommended interactive target size. */
  --lufa-component-modal-close-button-position-offset: var(--lufa-semantic-ui-spacing-default); /** Close button offset from modal edges */
  --lufa-component-modal-close-button-color-default: var(--lufa-semantic-ui-text-secondary); /** Close button icon color */
  --lufa-component-modal-close-button-color-hover: var(--lufa-semantic-ui-text-primary); /** Close button icon color on hover */
  --lufa-component-modal-animation-duration-enter: var(--lufa-semantic-ui-transition-duration-normal); /** Modal enter animation duration */
  --lufa-component-modal-animation-duration-exit: var(--lufa-semantic-ui-transition-duration-fast); /** Modal exit animation duration */
  --lufa-component-modal-animation-timing-function: var(--lufa-component-shared-transition-timing-function); /** Modal animation timing function */
  --lufa-component-modal-z-index-backdrop: var(--lufa-semantic-z-index-modal-backdrop); /** Modal backdrop z-index — references semantic modal-backdrop layer */
  --lufa-component-modal-z-index-content: var(--lufa-semantic-z-index-modal); /** Modal content z-index — references semantic modal layer (above backdrop) */
  --lufa-component-popover-background: var(--lufa-semantic-ui-background-surface-default); /** Popover background color */
  --lufa-component-popover-text: var(--lufa-semantic-ui-text-primary); /** Popover text color */
  --lufa-component-popover-padding: var(--lufa-semantic-ui-spacing-default); /** Popover content padding */
  --lufa-component-popover-border: var(--lufa-semantic-ui-border-default); /** Popover border color */
  --lufa-component-popover-border-radius: var(--lufa-semantic-ui-border-radius-medium); /** Popover border radius */
  --lufa-component-popover-shadow: var(--lufa-semantic-ui-shadow-large); /** Popover shadow for elevation */
  --lufa-component-popover-max-width: 25rem; /** Popover maximum width — intentionally raw (400px). Component-specific layout constraint not represented in the semantic spacing or container scale. */
  --lufa-component-popover-arrow-width: 0.75rem; /** Popover arrow width (base of triangle) — intentionally raw (12px). Geometric constant for CSS border-based arrow; not part of the spacing scale. */
  --lufa-component-popover-arrow-height: 0.375rem; /** Popover arrow height (triangle height) — intentionally raw (6px). Geometric constant for CSS border-based arrow; not part of the spacing scale. */
  --lufa-component-popover-offset: var(--lufa-semantic-ui-spacing-default); /** Popover offset distance from target element */
  --lufa-component-popover-z-index: var(--lufa-semantic-z-index-popover); /** Popover z-index — references semantic popover layer */
  --lufa-component-shared-divider-thickness: var(--lufa-semantic-ui-border-width-thin); /** Standard divider/separator thickness */
  --lufa-component-shared-divider-color: var(--lufa-semantic-ui-border-default); /** Divider color using semantic border */
  --lufa-component-shared-icon-size-xs: var(--lufa-semantic-ui-icon-size-xs); /** Extra small icon size for compact UI */
  --lufa-component-shared-icon-size-sm: var(--lufa-semantic-ui-icon-size-sm); /** Small icon size for standard UI */
  --lufa-component-shared-icon-size-md: var(--lufa-semantic-ui-icon-size-md); /** Medium icon size for emphasized UI */
  --lufa-component-shared-icon-size-lg: var(--lufa-semantic-ui-icon-size-lg); /** Large icon size for prominent UI */
  --lufa-component-shared-icon-size-xl: var(--lufa-semantic-ui-icon-size-xl); /** Extra large icon size for hero UI */
  --lufa-component-shared-icon-spacing: var(--lufa-semantic-ui-spacing-tight); /** Spacing between icon and adjacent text */
  --lufa-component-shared-focus-outline-width: var(--lufa-semantic-ui-border-width-medium); /** Focus outline width for keyboard navigation */
  --lufa-component-shared-focus-outline-offset: var(--lufa-semantic-ui-border-width-medium); /** Focus outline offset from element edge */
  --lufa-component-shared-focus-outline-color: var(--lufa-semantic-interactive-focus-ring); /** Focus outline color */
  --lufa-component-shared-transition-duration-fast: var(--lufa-semantic-ui-transition-duration-fast); /** Fast transition for subtle interactions */
  --lufa-component-shared-transition-duration-normal: var(--lufa-semantic-ui-transition-duration-normal); /** Normal transition for standard interactions */
  --lufa-component-shared-transition-timing-function: var(--lufa-semantic-ui-transition-timing-function-default); /** Standard easing function for smooth transitions */
  --lufa-component-tooltip-background: var(--lufa-semantic-ui-text-primary); /** Tooltip background color (typically dark for high contrast) */
  --lufa-component-tooltip-text: var(--lufa-semantic-ui-background-surface-default); /** Tooltip text color (inverted for contrast) */
  --lufa-component-tooltip-padding-block: var(--lufa-semantic-ui-spacing-compact); /** Tooltip block-axis padding (top/bottom, 8px) */
  --lufa-component-tooltip-padding-inline: var(--lufa-semantic-ui-spacing-default); /** Tooltip inline-axis padding (left/right, 16px) */
  --lufa-component-tooltip-border-radius: var(--lufa-semantic-ui-border-radius-small); /** Tooltip border radius */
  --lufa-component-tooltip-font-size: var(--lufa-semantic-ui-typography-caption); /** Tooltip font size */
  --lufa-component-tooltip-max-width: 20rem; /** Tooltip maximum width — intentionally raw (320px). Component-specific layout constraint not represented in the semantic spacing or container scale. */
  --lufa-component-tooltip-shadow: var(--lufa-semantic-ui-shadow-medium); /** Tooltip shadow for elevation */
  --lufa-component-tooltip-arrow-width: 0.5rem; /** Tooltip arrow width (base of triangle) — intentionally raw (8px). Geometric constant for CSS border-based arrow; not part of the spacing scale. */
  --lufa-component-tooltip-arrow-height: 0.25rem; /** Tooltip arrow height (triangle height) — intentionally raw (4px). Geometric constant for CSS border-based arrow; not part of the spacing scale. */
  --lufa-component-tooltip-offset: var(--lufa-semantic-ui-spacing-compact); /** Tooltip offset distance from target element */
  --lufa-component-tooltip-animation-duration: var(--lufa-semantic-ui-transition-duration-fast); /** Tooltip fade-in/fade-out duration */
  --lufa-component-tooltip-animation-delay: 200ms; /** Tooltip appearance delay (on hover) — intentionally raw (200ms). UX timing constant to prevent tooltip flicker on quick hover gestures; not part of the transition duration scale. */
  --lufa-component-tooltip-animation-timing-function: var(--lufa-component-shared-transition-timing-function); /** Tooltip animation timing function */
  --lufa-component-tooltip-z-index: var(--lufa-semantic-z-index-popover); /** Tooltip z-index — references semantic popover layer (tooltips share the popover stacking level) */
  --lufa-core-color-brand-primary-default: var(--lufa-primitive-color-blue-600); /** Primary brand color used for main actions, links, and focus states. Represents trust and reliability. */
  --lufa-core-color-brand-primary-hover: var(--lufa-primitive-color-blue-700); /** Primary brand hover state - darker shade for interactive feedback */
  --lufa-core-color-brand-primary-active: var(--lufa-primitive-color-blue-800); /** Primary brand active/pressed state - darkest shade for click feedback */
  --lufa-core-color-brand-primary-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on primary brand background. Ensures WCAG AA contrast (4.5:1+) against primary brand color. */
  --lufa-core-color-brand-secondary-default: var(--lufa-primitive-color-purple-600); /** Secondary brand color used for accents, highlights, and secondary actions */
  --lufa-core-color-brand-secondary-hover: var(--lufa-primitive-color-purple-700); /** Secondary brand hover state - darker shade for interactive feedback */
  --lufa-core-color-brand-secondary-active: var(--lufa-primitive-color-purple-800); /** Secondary brand active/pressed state - darkest shade for click feedback */
  --lufa-core-color-brand-secondary-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on secondary brand background. Ensures WCAG AA contrast (4.5:1+) against secondary brand color. */
  --lufa-core-color-brand-accent-visited: var(--lufa-primitive-color-purple-600); /** Visited link color - purple to indicate previously visited links */
  --lufa-core-color-feedback-success-default: var(--lufa-primitive-color-green-700); /** Success state color - positive feedback, confirmations, completed actions */
  --lufa-core-color-feedback-success-subtle: var(--lufa-primitive-color-green-100); /** Subtle success background for alert boxes and banners */
  --lufa-core-color-feedback-success-border: var(--lufa-primitive-color-green-300); /** Success border color for outlined elements */
  --lufa-core-color-feedback-success-hover: var(--lufa-primitive-color-green-800); /** Hover state for success interactive elements - one shade darker than default for visible state change */
  --lufa-core-color-feedback-success-active: var(--lufa-primitive-color-green-900); /** Active/pressed state for success interactive elements - darkest shade for click feedback */
  --lufa-core-color-feedback-success-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on success feedback background. Ensures WCAG AA contrast (4.5:1+) against success color. */
  --lufa-core-color-feedback-error-default: var(--lufa-primitive-color-red-700); /** Error state color - validation errors, destructive actions, critical warnings - meets WCAG AA on subtle error background */
  --lufa-core-color-feedback-error-subtle: var(--lufa-primitive-color-red-100); /** Subtle error background for alert boxes and banners */
  --lufa-core-color-feedback-error-border: var(--lufa-primitive-color-red-500); /** Error border color for outlined elements - meets WCAG 1.4.11 (3:1) on light backgrounds */
  --lufa-core-color-feedback-error-hover: var(--lufa-primitive-color-red-800); /** Hover state for error/destructive interactive elements - one shade darker than default for visible state change */
  --lufa-core-color-feedback-error-active: var(--lufa-primitive-color-red-900); /** Active/pressed state for error/destructive interactive elements - darkest shade for click feedback */
  --lufa-core-color-feedback-error-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on error feedback background. Ensures WCAG AA contrast (4.5:1+) against error color. */
  --lufa-core-color-feedback-warning-default: var(--lufa-primitive-color-yellow-700); /** Warning state color - caution messages, important notices, pending actions - meets WCAG AA on page and warning backgrounds */
  --lufa-core-color-feedback-warning-subtle: var(--lufa-primitive-color-yellow-100); /** Subtle warning background for alert boxes and banners */
  --lufa-core-color-feedback-warning-border: var(--lufa-primitive-color-yellow-300); /** Warning border color for outlined elements */
  --lufa-core-color-feedback-warning-hover: var(--lufa-primitive-color-yellow-800); /** Hover state for warning interactive elements - one shade darker than default for visible state change */
  --lufa-core-color-feedback-warning-active: var(--lufa-primitive-color-yellow-900); /** Active/pressed state for warning interactive elements - darkest shade for click feedback */
  --lufa-core-color-feedback-warning-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on warning feedback background. Ensures WCAG AA contrast (4.5:1+) against warning color. */
  --lufa-core-color-feedback-info-default: var(--lufa-primitive-color-blue-700); /** Info state color - informational messages, tips, neutral notifications */
  --lufa-core-color-feedback-info-subtle: var(--lufa-primitive-color-blue-100); /** Subtle info background for alert boxes and banners */
  --lufa-core-color-feedback-info-border: var(--lufa-primitive-color-blue-300); /** Info border color for outlined elements */
  --lufa-core-color-feedback-info-hover: var(--lufa-primitive-color-blue-800); /** Hover state for info interactive elements - one shade darker than default for visible state change */
  --lufa-core-color-feedback-info-active: var(--lufa-primitive-color-blue-900); /** Active/pressed state for info interactive elements - darkest shade for click feedback */
  --lufa-core-color-feedback-info-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on info feedback background. Ensures WCAG AA contrast (4.5:1+) against info color. */
  --lufa-core-color-neutral-background: var(--lufa-primitive-color-gray-50); /** Page background color - lightest neutral for main canvas */
  --lufa-core-color-neutral-surface-default: var(--lufa-primitive-color-gray-100); /** Surface color for cards, panels, and elevated elements */
  --lufa-core-color-neutral-surface-raised: var(--lufa-primitive-color-gray-200); /** Raised surface color - slightly elevated above default, used as resting state for neutral solid buttons */
  --lufa-core-color-neutral-surface-hover: var(--lufa-primitive-color-gray-200); /** Hover state for interactive surfaces */
  --lufa-core-color-neutral-surface-active: var(--lufa-primitive-color-gray-300); /** Active/pressed state for interactive surfaces - one shade darker than hover for click feedback */
  --lufa-core-color-neutral-border-default: var(--lufa-primitive-color-gray-500); /** Default border color for dividers and element boundaries - meets WCAG 1.4.11 Non-text Contrast (3:1) */
  --lufa-core-color-neutral-border-strong: var(--lufa-primitive-color-gray-600); /** Stronger border color for emphasis or focus states - meets WCAG 1.4.11 Non-text Contrast (3:1) */
  --lufa-core-color-neutral-text-primary: var(--lufa-primitive-color-gray-900); /** Primary text color - highest contrast for body text and headings */
  --lufa-core-color-neutral-text-secondary: var(--lufa-primitive-color-gray-600); /** Secondary text color - medium contrast for supporting text */
  --lufa-core-color-neutral-text-tertiary: var(--lufa-primitive-color-gray-500); /** Tertiary text color - lighter than secondary for optional, non-essential content. Use only for metadata, timestamps, and decorative labels where content is not required reading. Does not guarantee WCAG AA on light surfaces. */
  --lufa-core-color-neutral-text-disabled: var(--lufa-primitive-color-gray-400); /** Disabled text color - lowest contrast for inactive elements */
  --lufa-semantic-interactive-transform-scale-hover: 1.02; /** Scale transformation on hover, adapting per mode for optimal visual feedback */
  --lufa-semantic-interactive-transform-translate-hover: 0rem; /** Vertical translation on hover (upward lift), adapting per mode */
  --lufa-semantic-ui-backdrop-blur: blur(4px); /** Backdrop blur for modals and overlays */
  --lufa-semantic-ui-backdrop-brightness: 0.95; /** Backdrop brightness for overlays */
  --lufa-semantic-ui-overlay-backdrop: var(--lufa-core-color-alpha-black-50); /** Semi-transparent backdrop for modals, dialogs, and drawers */
  --lufa-semantic-ui-overlay-hover: var(--lufa-core-color-alpha-black-4); /** Subtle overlay for hover states on interactive elements */
  --lufa-semantic-ui-overlay-pressed: var(--lufa-core-color-alpha-black-8); /** Overlay for pressed/active states */
  --lufa-semantic-ui-overlay-selected: var(--lufa-core-color-alpha-black-16); /** Overlay for selected states in lists and menus */
  --lufa-semantic-ui-overlay-scrim: var(--lufa-core-color-alpha-black-38); /** Scrim overlay for bottom sheets and temporary surfaces */
}

[data-theme][data-mode='dark'] {
  --lufa-core-color-brand-primary-default: #60a5fa;
  --lufa-core-color-brand-primary-hover: #93c5fd;
  --lufa-core-color-brand-primary-active: #2563eb;
  --lufa-core-color-brand-primary-on-background: #111827;
  --lufa-core-color-brand-secondary-default: #c084fc;
  --lufa-core-color-brand-secondary-hover: #d8b4fe;
  --lufa-core-color-brand-secondary-active: #a855f7;
  --lufa-core-color-brand-secondary-on-background: #111827;
  --lufa-core-color-brand-accent-visited: #c084fc;
  --lufa-core-color-feedback-success-default: #4ade80;
  --lufa-core-color-feedback-success-subtle: #14532d;
  --lufa-core-color-feedback-success-border: #15803d;
  --lufa-core-color-feedback-success-hover: #86efac;
  --lufa-core-color-feedback-success-active: #bbf7d0;
  --lufa-core-color-feedback-success-on-background: #111827;
  --lufa-core-color-feedback-error-default: #f87171;
  --lufa-core-color-feedback-error-subtle: #7f1d1d;
  --lufa-core-color-feedback-error-border: #b91c1c;
  --lufa-core-color-feedback-error-hover: #fca5a5;
  --lufa-core-color-feedback-error-active: #fecaca;
  --lufa-core-color-feedback-error-on-background: #111827;
  --lufa-core-color-feedback-warning-default: #facc15;
  --lufa-core-color-feedback-warning-subtle: #713f12;
  --lufa-core-color-feedback-warning-border: #a16207;
  --lufa-core-color-feedback-warning-hover: #fde047;
  --lufa-core-color-feedback-warning-active: #fef08a;
  --lufa-core-color-feedback-warning-on-background: #111827;
  --lufa-core-color-feedback-info-default: #93c5fd;
  --lufa-core-color-feedback-info-subtle: #1e3a8a;
  --lufa-core-color-feedback-info-border: #1d4ed8;
  --lufa-core-color-feedback-info-hover: #93c5fd;
  --lufa-core-color-feedback-info-active: #bfdbfe;
  --lufa-core-color-feedback-info-on-background: #111827;
  --lufa-core-color-neutral-background: #111827;
  --lufa-core-color-neutral-surface-default: #1f2937;
  --lufa-core-color-neutral-surface-raised: #374151;
  --lufa-core-color-neutral-surface-hover: #374151;
  --lufa-core-color-neutral-surface-active: #4b5563;
  --lufa-core-color-neutral-border-default: #374151;
  --lufa-core-color-neutral-border-strong: #4b5563;
  --lufa-core-color-neutral-text-primary: #f9fafb;
  --lufa-core-color-neutral-text-secondary: #9ca3af;
  --lufa-core-color-neutral-text-tertiary: #6b7280;
  --lufa-core-color-neutral-text-disabled: #4b5563;
  --lufa-semantic-interactive-transform-scale-hover: 1.05;
  --lufa-semantic-interactive-transform-translate-hover: -2px;
  --lufa-semantic-ui-backdrop-blur: blur(8px);
  --lufa-semantic-ui-backdrop-brightness: 0.7;
  --lufa-semantic-ui-overlay-backdrop: rgba(0, 0, 0, 0.8);
  --lufa-semantic-ui-overlay-hover: rgba(255, 255, 255, 0.08);
  --lufa-semantic-ui-overlay-pressed: rgba(255, 255, 255, 0.16);
  --lufa-semantic-ui-overlay-selected: rgba(255, 255, 255, 0.16);
  --lufa-semantic-ui-overlay-scrim: rgba(0, 0, 0, 0.6);
}

[data-theme][data-mode='high-contrast'] {
  --lufa-core-color-brand-primary-default: #0000ff;
  --lufa-core-color-brand-primary-hover: #0000ff;
  --lufa-core-color-brand-primary-active: #0000ff;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #9333ea;
  --lufa-core-color-brand-secondary-hover: #7e22ce;
  --lufa-core-color-brand-secondary-active: #6b21a8;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #9900ff;
  --lufa-core-color-feedback-success-default: #00ff00;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #00ff00;
  --lufa-core-color-feedback-success-hover: #00ff00;
  --lufa-core-color-feedback-success-active: #00ff00;
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-default: #ff0000;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #ff0000;
  --lufa-core-color-feedback-error-hover: #ff0000;
  --lufa-core-color-feedback-error-active: #ff0000;
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-default: #ffff00;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ffff00;
  --lufa-core-color-feedback-warning-hover: #ffff00;
  --lufa-core-color-feedback-warning-active: #ffff00;
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-default: #0000ff;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #0000ff;
  --lufa-core-color-feedback-info-hover: #0000ff;
  --lufa-core-color-feedback-info-active: #0000ff;
  --lufa-core-color-feedback-info-on-background: #ffffff;
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #111827;
  --lufa-core-color-neutral-surface-raised: #1f2937;
  --lufa-core-color-neutral-surface-hover: #1f2937;
  --lufa-core-color-neutral-surface-active: #374151;
  --lufa-core-color-neutral-border-default: #ffffff;
  --lufa-core-color-neutral-border-strong: #ffffff;
  --lufa-core-color-neutral-text-primary: #ffffff;
  --lufa-core-color-neutral-text-secondary: #e5e7eb;
  --lufa-core-color-neutral-text-tertiary: #9ca3af;
  --lufa-core-color-neutral-text-disabled: #4b5563;
  --lufa-semantic-interactive-transform-scale-hover: 1.02;
  --lufa-semantic-interactive-transform-translate-hover: 0;
  --lufa-semantic-ui-backdrop-blur: blur(2px);
  --lufa-semantic-ui-backdrop-brightness: 0.5;
  --lufa-semantic-ui-overlay-backdrop: rgba(0, 0, 0, 0.9);
  --lufa-semantic-ui-overlay-hover: rgba(255, 255, 255, 0.16);
  --lufa-semantic-ui-overlay-pressed: rgba(255, 255, 255, 0.16);
  --lufa-semantic-ui-overlay-selected: rgba(255, 255, 255, 0.16);
  --lufa-semantic-ui-overlay-scrim: rgba(0, 0, 0, 0.8);
}

/* ============================================================================
   DEFAULT THEME
   ============================================================================ */

/**
 * Default Theme
 *
 * Color overrides for the default theme are provided by the token package
 * via tokens.css (--lufa-core-*, --lufa-semantic-*, --lufa-component-*).
 *
 * Theme-specific overrides (e.g., ocean, nordic) are defined in the
 * @lufa/themes package using the --lufa-core-* token layer.
 *
 * This file is intentionally empty. It was previously used to define
 * --lufa-token-* custom properties which have been removed in favor
 * of the standard token hierarchy.
 */

/* ============================================================================
   THEME SYSTEM
   ============================================================================ */

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/**
 * Responsive Visibility Utilities
 *
 * CSS utility classes for controlling element visibility at different breakpoints.
 * Used by the responsive visibility pattern (show/hide props).
 *
 * Implementation:
 * - CSS-only (no JavaScript required)
 * - SSR-safe (no hydration mismatch)
 * - Mobile-first approach (min-width media queries)
 * - Accessibility: Uses display:none (removes from accessibility tree)
 *
 * Breakpoints (from tokens/primitives/breakpoint.json):
 * - xs: 320px
 * - sm: 640px
 * - md: 768px
 * - lg: 1024px
 * - xl: 1280px
 * - 2xl: 1536px
 */

/* ============================================================================
   BASE VISIBILITY CLASSES
   ============================================================================ */

/**
 * Simple hide class
 * Used for: hide={true} or show={false}
 */
.lufa-hide {
  display: none !important;
}

/**
 * Simple show class (explicit, rarely needed)
 * Used for: show={true} or hide={false}
 */
.lufa-show {
  display: block !important;
}

/* ============================================================================
   HIDE FROM BREAKPOINT AND UP
   ============================================================================ */

/**
 * hideFrom="xs" - Hidden from xs (320px) and up
 */
@media (min-width: 320px) {
  .lufa-hide-from-xs {
    display: none !important;
  }
}

/**
 * hideFrom="sm" - Hidden from sm (640px) and up
 */
@media (min-width: 640px) {
  .lufa-hide-from-sm {
    display: none !important;
  }
}

/**
 * hideFrom="md" - Hidden from md (768px) and up
 */
@media (min-width: 768px) {
  .lufa-hide-from-md {
    display: none !important;
  }
}

/**
 * hideFrom="lg" - Hidden from lg (1024px) and up
 */
@media (min-width: 1024px) {
  .lufa-hide-from-lg {
    display: none !important;
  }
}

/**
 * hideFrom="xl" - Hidden from xl (1280px) and up
 */
@media (min-width: 1280px) {
  .lufa-hide-from-xl {
    display: none !important;
  }
}

/**
 * hideFrom="2xl" - Hidden from 2xl (1536px) and up
 */
@media (min-width: 1536px) {
  .lufa-hide-from-2xl {
    display: none !important;
  }
}

/* ============================================================================
   SHOW FROM BREAKPOINT AND UP (Hidden below, visible at and above)
   ============================================================================ */

/**
 * showFrom="xs" - Hidden below xs, visible from xs (320px) and up
 */
.lufa-show-from-xs {
  display: none !important;
}

@media (min-width: 320px) {
  .lufa-show-from-xs {
    display: block !important;
  }
}

/**
 * showFrom="sm" - Hidden below sm, visible from sm (640px) and up
 */
.lufa-show-from-sm {
  display: none !important;
}

@media (min-width: 640px) {
  .lufa-show-from-sm {
    display: block !important;
  }
}

/**
 * showFrom="md" - Hidden below md, visible from md (768px) and up
 */
.lufa-show-from-md {
  display: none !important;
}

@media (min-width: 768px) {
  .lufa-show-from-md {
    display: block !important;
  }
}

/**
 * showFrom="lg" - Hidden below lg, visible from lg (1024px) and up
 */
.lufa-show-from-lg {
  display: none !important;
}

@media (min-width: 1024px) {
  .lufa-show-from-lg {
    display: block !important;
  }
}

/**
 * showFrom="xl" - Hidden below xl, visible from xl (1280px) and up
 */
.lufa-show-from-xl {
  display: none !important;
}

@media (min-width: 1280px) {
  .lufa-show-from-xl {
    display: block !important;
  }
}

/**
 * showFrom="2xl" - Hidden below 2xl, visible from 2xl (1536px) and up
 */
.lufa-show-from-2xl {
  display: none !important;
}

@media (min-width: 1536px) {
  .lufa-show-from-2xl {
    display: block !important;
  }
}

/* ============================================================================
   HIDE AT SPECIFIC BREAKPOINT
   ============================================================================ */

/**
 * hide={{ xs: true }} - Hidden only at xs breakpoint
 */
@media (min-width: 320px) and (max-width: 639px) {
  .lufa-hide-at-xs {
    display: none !important;
  }
}

/**
 * hide={{ sm: true }} - Hidden only at sm breakpoint
 */
@media (min-width: 640px) and (max-width: 767px) {
  .lufa-hide-at-sm {
    display: none !important;
  }
}

/**
 * hide={{ md: true }} - Hidden only at md breakpoint
 */
@media (min-width: 768px) and (max-width: 1023px) {
  .lufa-hide-at-md {
    display: none !important;
  }
}

/**
 * hide={{ lg: true }} - Hidden only at lg breakpoint
 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .lufa-hide-at-lg {
    display: none !important;
  }
}

/**
 * hide={{ xl: true }} - Hidden only at xl breakpoint
 */
@media (min-width: 1280px) and (max-width: 1535px) {
  .lufa-hide-at-xl {
    display: none !important;
  }
}

/**
 * hide={{ '2xl': true }} - Hidden only at 2xl breakpoint
 */
@media (min-width: 1536px) {
  .lufa-hide-at-2xl {
    display: none !important;
  }
}

/* ============================================================================
   SHOW AT SPECIFIC BREAKPOINT
   ============================================================================ */

/**
 * show={{ xs: true }} - Visible only at xs breakpoint
 */
.lufa-show-at-xs {
  display: none !important;
}

@media (min-width: 320px) and (max-width: 639px) {
  .lufa-show-at-xs {
    display: block !important;
  }
}

/**
 * show={{ sm: true }} - Visible only at sm breakpoint
 */
.lufa-show-at-sm {
  display: none !important;
}

@media (min-width: 640px) and (max-width: 767px) {
  .lufa-show-at-sm {
    display: block !important;
  }
}

/**
 * show={{ md: true }} - Visible only at md breakpoint
 */
.lufa-show-at-md {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .lufa-show-at-md {
    display: block !important;
  }
}

/**
 * show={{ lg: true }} - Visible only at lg breakpoint
 */
.lufa-show-at-lg {
  display: none !important;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .lufa-show-at-lg {
    display: block !important;
  }
}

/**
 * show={{ xl: true }} - Visible only at xl breakpoint
 */
.lufa-show-at-xl {
  display: none !important;
}

@media (min-width: 1280px) and (max-width: 1535px) {
  .lufa-show-at-xl {
    display: block !important;
  }
}

/**
 * show={{ '2xl': true }} - Visible only at 2xl breakpoint
 */
.lufa-show-at-2xl {
  display: none !important;
}

@media (min-width: 1536px) {
  .lufa-show-at-2xl {
    display: block !important;
  }
}

/* ============================================================================
   SHOW FROM BREAKPOINT (OVERRIDE VARIANT)
   Used when combined with hide-from to create complex responsive patterns
   These classes only add visibility at the breakpoint without hiding below
   ============================================================================ */

/**
 * Override hide rules and show from xs onwards
 */
@media (min-width: 320px) {
  .lufa-show-from-xs-override {
    display: block !important;
  }
}

/**
 * Override hide rules and show from sm onwards
 */
@media (min-width: 640px) {
  .lufa-show-from-sm-override {
    display: block !important;
  }
}

/**
 * Override hide rules and show from md onwards
 */
@media (min-width: 768px) {
  .lufa-show-from-md-override {
    display: block !important;
  }
}

/**
 * Override hide rules and show from lg onwards
 */
@media (min-width: 1024px) {
  .lufa-show-from-lg-override {
    display: block !important;
  }
}

/**
 * Override hide rules and show from xl onwards
 */
@media (min-width: 1280px) {
  .lufa-show-from-xl-override {
    display: block !important;
  }
}

/**
 * Override hide rules and show from 2xl onwards
 */
@media (min-width: 1536px) {
  .lufa-show-from-2xl-override {
    display: block !important;
  }
}
/* ============================================================================
   COMPONENT STYLES
   ============================================================================ */
/**
 * Box Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for box.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Box
 */

/* ========================================== */
/* PADDING */
/* ========================================== */

._padding-none_1g833_16 {
  padding: var(--lufa-primitive-spacing-0);
}

._padding-tight_1g833_20 {
  padding: var(--lufa-semantic-ui-spacing-tight);
}

._padding-compact_1g833_24 {
  padding: var(--lufa-semantic-ui-spacing-compact);
}

._padding-default_1g833_28 {
  padding: var(--lufa-semantic-ui-spacing-default);
}

._padding-comfortable_1g833_32 {
  padding: var(--lufa-semantic-ui-spacing-comfortable);
}

._padding-spacious_1g833_36 {
  padding: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGX */
/* ========================================== */

._paddingX-none_1g833_44 {
  padding-left: var(--lufa-primitive-spacing-0);
  padding-right: var(--lufa-primitive-spacing-0);
}

._paddingX-tight_1g833_49 {
  padding-left: var(--lufa-semantic-ui-spacing-tight);
  padding-right: var(--lufa-semantic-ui-spacing-tight);
}

._paddingX-compact_1g833_54 {
  padding-left: var(--lufa-semantic-ui-spacing-compact);
  padding-right: var(--lufa-semantic-ui-spacing-compact);
}

._paddingX-default_1g833_59 {
  padding-left: var(--lufa-semantic-ui-spacing-default);
  padding-right: var(--lufa-semantic-ui-spacing-default);
}

._paddingX-comfortable_1g833_64 {
  padding-left: var(--lufa-semantic-ui-spacing-comfortable);
  padding-right: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingX-spacious_1g833_69 {
  padding-left: var(--lufa-semantic-ui-spacing-spacious);
  padding-right: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGY */
/* ========================================== */

._paddingY-none_1g833_78 {
  padding-top: var(--lufa-primitive-spacing-0);
  padding-bottom: var(--lufa-primitive-spacing-0);
}

._paddingY-tight_1g833_83 {
  padding-top: var(--lufa-semantic-ui-spacing-tight);
  padding-bottom: var(--lufa-semantic-ui-spacing-tight);
}

._paddingY-compact_1g833_88 {
  padding-top: var(--lufa-semantic-ui-spacing-compact);
  padding-bottom: var(--lufa-semantic-ui-spacing-compact);
}

._paddingY-default_1g833_93 {
  padding-top: var(--lufa-semantic-ui-spacing-default);
  padding-bottom: var(--lufa-semantic-ui-spacing-default);
}

._paddingY-comfortable_1g833_98 {
  padding-top: var(--lufa-semantic-ui-spacing-comfortable);
  padding-bottom: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingY-spacious_1g833_103 {
  padding-top: var(--lufa-semantic-ui-spacing-spacious);
  padding-bottom: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGTOP */
/* ========================================== */

._paddingTop-none_1g833_112 {
  padding-top: var(--lufa-primitive-spacing-0);
}

._paddingTop-tight_1g833_116 {
  padding-top: var(--lufa-semantic-ui-spacing-tight);
}

._paddingTop-compact_1g833_120 {
  padding-top: var(--lufa-semantic-ui-spacing-compact);
}

._paddingTop-default_1g833_124 {
  padding-top: var(--lufa-semantic-ui-spacing-default);
}

._paddingTop-comfortable_1g833_128 {
  padding-top: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingTop-spacious_1g833_132 {
  padding-top: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGRIGHT */
/* ========================================== */

._paddingRight-none_1g833_140 {
  padding-right: var(--lufa-primitive-spacing-0);
}

._paddingRight-tight_1g833_144 {
  padding-right: var(--lufa-semantic-ui-spacing-tight);
}

._paddingRight-compact_1g833_148 {
  padding-right: var(--lufa-semantic-ui-spacing-compact);
}

._paddingRight-default_1g833_152 {
  padding-right: var(--lufa-semantic-ui-spacing-default);
}

._paddingRight-comfortable_1g833_156 {
  padding-right: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingRight-spacious_1g833_160 {
  padding-right: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGBOTTOM */
/* ========================================== */

._paddingBottom-none_1g833_168 {
  padding-bottom: var(--lufa-primitive-spacing-0);
}

._paddingBottom-tight_1g833_172 {
  padding-bottom: var(--lufa-semantic-ui-spacing-tight);
}

._paddingBottom-compact_1g833_176 {
  padding-bottom: var(--lufa-semantic-ui-spacing-compact);
}

._paddingBottom-default_1g833_180 {
  padding-bottom: var(--lufa-semantic-ui-spacing-default);
}

._paddingBottom-comfortable_1g833_184 {
  padding-bottom: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingBottom-spacious_1g833_188 {
  padding-bottom: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGLEFT */
/* ========================================== */

._paddingLeft-none_1g833_196 {
  padding-left: var(--lufa-primitive-spacing-0);
}

._paddingLeft-tight_1g833_200 {
  padding-left: var(--lufa-semantic-ui-spacing-tight);
}

._paddingLeft-compact_1g833_204 {
  padding-left: var(--lufa-semantic-ui-spacing-compact);
}

._paddingLeft-default_1g833_208 {
  padding-left: var(--lufa-semantic-ui-spacing-default);
}

._paddingLeft-comfortable_1g833_212 {
  padding-left: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingLeft-spacious_1g833_216 {
  padding-left: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGIN */
/* ========================================== */

._margin-none_1g833_224 {
  margin: var(--lufa-primitive-spacing-0);
}

._margin-tight_1g833_228 {
  margin: var(--lufa-semantic-ui-spacing-tight);
}

._margin-compact_1g833_232 {
  margin: var(--lufa-semantic-ui-spacing-compact);
}

._margin-default_1g833_236 {
  margin: var(--lufa-semantic-ui-spacing-default);
}

._margin-comfortable_1g833_240 {
  margin: var(--lufa-semantic-ui-spacing-comfortable);
}

._margin-spacious_1g833_244 {
  margin: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINX */
/* ========================================== */

._marginX-none_1g833_252 {
  margin-left: var(--lufa-primitive-spacing-0);
  margin-right: var(--lufa-primitive-spacing-0);
}

._marginX-tight_1g833_257 {
  margin-left: var(--lufa-semantic-ui-spacing-tight);
  margin-right: var(--lufa-semantic-ui-spacing-tight);
}

._marginX-compact_1g833_262 {
  margin-left: var(--lufa-semantic-ui-spacing-compact);
  margin-right: var(--lufa-semantic-ui-spacing-compact);
}

._marginX-default_1g833_267 {
  margin-left: var(--lufa-semantic-ui-spacing-default);
  margin-right: var(--lufa-semantic-ui-spacing-default);
}

._marginX-comfortable_1g833_272 {
  margin-left: var(--lufa-semantic-ui-spacing-comfortable);
  margin-right: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginX-spacious_1g833_277 {
  margin-left: var(--lufa-semantic-ui-spacing-spacious);
  margin-right: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINY */
/* ========================================== */

._marginY-none_1g833_286 {
  margin-top: var(--lufa-primitive-spacing-0);
  margin-bottom: var(--lufa-primitive-spacing-0);
}

._marginY-tight_1g833_291 {
  margin-top: var(--lufa-semantic-ui-spacing-tight);
  margin-bottom: var(--lufa-semantic-ui-spacing-tight);
}

._marginY-compact_1g833_296 {
  margin-top: var(--lufa-semantic-ui-spacing-compact);
  margin-bottom: var(--lufa-semantic-ui-spacing-compact);
}

._marginY-default_1g833_301 {
  margin-top: var(--lufa-semantic-ui-spacing-default);
  margin-bottom: var(--lufa-semantic-ui-spacing-default);
}

._marginY-comfortable_1g833_306 {
  margin-top: var(--lufa-semantic-ui-spacing-comfortable);
  margin-bottom: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginY-spacious_1g833_311 {
  margin-top: var(--lufa-semantic-ui-spacing-spacious);
  margin-bottom: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINTOP */
/* ========================================== */

._marginTop-none_1g833_320 {
  margin-top: var(--lufa-primitive-spacing-0);
}

._marginTop-tight_1g833_324 {
  margin-top: var(--lufa-semantic-ui-spacing-tight);
}

._marginTop-compact_1g833_328 {
  margin-top: var(--lufa-semantic-ui-spacing-compact);
}

._marginTop-default_1g833_332 {
  margin-top: var(--lufa-semantic-ui-spacing-default);
}

._marginTop-comfortable_1g833_336 {
  margin-top: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginTop-spacious_1g833_340 {
  margin-top: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINRIGHT */
/* ========================================== */

._marginRight-none_1g833_348 {
  margin-right: var(--lufa-primitive-spacing-0);
}

._marginRight-tight_1g833_352 {
  margin-right: var(--lufa-semantic-ui-spacing-tight);
}

._marginRight-compact_1g833_356 {
  margin-right: var(--lufa-semantic-ui-spacing-compact);
}

._marginRight-default_1g833_360 {
  margin-right: var(--lufa-semantic-ui-spacing-default);
}

._marginRight-comfortable_1g833_364 {
  margin-right: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginRight-spacious_1g833_368 {
  margin-right: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINBOTTOM */
/* ========================================== */

._marginBottom-none_1g833_376 {
  margin-bottom: var(--lufa-primitive-spacing-0);
}

._marginBottom-tight_1g833_380 {
  margin-bottom: var(--lufa-semantic-ui-spacing-tight);
}

._marginBottom-compact_1g833_384 {
  margin-bottom: var(--lufa-semantic-ui-spacing-compact);
}

._marginBottom-default_1g833_388 {
  margin-bottom: var(--lufa-semantic-ui-spacing-default);
}

._marginBottom-comfortable_1g833_392 {
  margin-bottom: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginBottom-spacious_1g833_396 {
  margin-bottom: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINLEFT */
/* ========================================== */

._marginLeft-none_1g833_404 {
  margin-left: var(--lufa-primitive-spacing-0);
}

._marginLeft-tight_1g833_408 {
  margin-left: var(--lufa-semantic-ui-spacing-tight);
}

._marginLeft-compact_1g833_412 {
  margin-left: var(--lufa-semantic-ui-spacing-compact);
}

._marginLeft-default_1g833_416 {
  margin-left: var(--lufa-semantic-ui-spacing-default);
}

._marginLeft-comfortable_1g833_420 {
  margin-left: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginLeft-spacious_1g833_424 {
  margin-left: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* BACKGROUND */
/* ========================================== */

._background-page_1g833_432 {
  background-color: var(--lufa-semantic-ui-background-page);
}

._background-surface_1g833_436 {
  background-color: var(--lufa-semantic-ui-background-surface-default);
}

._background-success_1g833_440 {
  background-color: var(--lufa-semantic-ui-background-success);
}

._background-error_1g833_444 {
  background-color: var(--lufa-semantic-ui-background-error);
}

._background-warning_1g833_448 {
  background-color: var(--lufa-semantic-ui-background-warning);
}

._background-info_1g833_452 {
  background-color: var(--lufa-semantic-ui-background-info);
}

._background-overlay_1g833_456 {
  background-color: var(--lufa-semantic-ui-overlay-backdrop);
}

._background-on-primary_1g833_460 {
  background-color: var(--lufa-semantic-ui-background-on-primary);
}

._background-on-secondary_1g833_464 {
  background-color: var(--lufa-semantic-ui-background-on-secondary);
}

._background-on-success_1g833_468 {
  background-color: var(--lufa-semantic-ui-background-on-success);
}

._background-on-error_1g833_472 {
  background-color: var(--lufa-semantic-ui-background-on-error);
}

._background-on-warning_1g833_476 {
  background-color: var(--lufa-semantic-ui-background-on-warning);
}

._background-on-info_1g833_480 {
  background-color: var(--lufa-semantic-ui-background-on-info);
}

/* ========================================== */
/* BORDERRADIUS */
/* ========================================== */

._borderRadius-none_1g833_488 {
  border-radius: 0;
}

._borderRadius-small_1g833_492 {
  border-radius: var(--lufa-semantic-ui-border-radius-small);
}

._borderRadius-default_1g833_496 {
  border-radius: var(--lufa-semantic-ui-border-radius-default);
}

._borderRadius-medium_1g833_500 {
  border-radius: var(--lufa-semantic-ui-border-radius-medium);
}

._borderRadius-large_1g833_504 {
  border-radius: var(--lufa-semantic-ui-border-radius-large);
}

._borderRadius-full_1g833_508 {
  border-radius: var(--lufa-semantic-ui-border-radius-full);
}

/* ========================================== */
/* BORDERWIDTH */
/* ========================================== */

._borderWidth-none_1g833_516 {
  border-width: 0;
  border-style: none;
}

._borderWidth-thin_1g833_521 {
  border-width: var(--lufa-semantic-ui-border-width-thin);
  border-style: solid;
}

._borderWidth-medium_1g833_526 {
  border-width: var(--lufa-semantic-ui-border-width-medium);
  border-style: solid;
}

._borderWidth-thick_1g833_531 {
  border-width: var(--lufa-semantic-ui-border-width-thick);
  border-style: solid;
}

/* ========================================== */
/* BORDERCOLOR */
/* ========================================== */

._borderColor-default_1g833_540 {
  border-color: var(--lufa-semantic-ui-border-default);
}

._borderColor-strong_1g833_544 {
  border-color: var(--lufa-semantic-ui-border-strong);
}

._borderColor-success_1g833_548 {
  border-color: var(--lufa-semantic-ui-border-success);
}

._borderColor-error_1g833_552 {
  border-color: var(--lufa-semantic-ui-border-error);
}

._borderColor-warning_1g833_556 {
  border-color: var(--lufa-semantic-ui-border-warning);
}

._borderColor-info_1g833_560 {
  border-color: var(--lufa-semantic-ui-border-info);
}

/* ========================================== */
/* GROW */
/* ========================================== */

._grow_1g833_568 {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

/* ========================================== */
/* DISPLAY */
/* ========================================== */

._display-block_1g833_579 {
  display: block;
}

._display-inline-block_1g833_583 {
  display: inline-block;
}

._display-flex_1g833_587 {
  display: flex;
}

._display-inline-flex_1g833_591 {
  display: inline-flex;
}

._display-grid_1g833_595 {
  display: grid;
}

._display-none_1g833_599 {
  display: none;
}
/**
 * Stack Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for stack.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Stack
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Stack class */
._stack_rzp51_17 {
  display: flex;
}

/* ========================================== */
/* DIRECTION */
/* ========================================== */

._direction-vertical_rzp51_25 {
  flex-direction: column;
}

._direction-horizontal_rzp51_29 {
  flex-direction: row;
}

/* ========================================== */
/* SPACING */
/* ========================================== */

._spacing-none_rzp51_37 {
  gap: 0;
}

._spacing-tight_rzp51_41 {
  gap: var(--lufa-semantic-ui-spacing-tight);
}

._spacing-compact_rzp51_45 {
  gap: var(--lufa-semantic-ui-spacing-compact);
}

._spacing-default_rzp51_49 {
  gap: var(--lufa-semantic-ui-spacing-default);
}

._spacing-comfortable_rzp51_53 {
  gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._spacing-spacious_rzp51_57 {
  gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* ALIGN */
/* ========================================== */

._align-start_rzp51_65 {
  align-items: flex-start;
}

._align-center_rzp51_69 {
  align-items: center;
}

._align-end_rzp51_73 {
  align-items: flex-end;
}

._align-stretch_rzp51_77 {
  align-items: stretch;
}

._align-baseline_rzp51_81 {
  align-items: baseline;
}

/* ========================================== */
/* JUSTIFY */
/* ========================================== */

._justify-start_rzp51_89 {
  justify-content: flex-start;
}

._justify-center_rzp51_93 {
  justify-content: center;
}

._justify-end_rzp51_97 {
  justify-content: flex-end;
}

._justify-space-between_rzp51_101 {
  justify-content: space-between;
}

._justify-space-around_rzp51_105 {
  justify-content: space-around;
}

._justify-space-evenly_rzp51_109 {
  justify-content: space-evenly;
}

/* ========================================== */
/* WRAP */
/* ========================================== */

._wrap-nowrap_rzp51_117 {
  flex-wrap: nowrap;
}

._wrap-wrap_rzp51_121 {
  flex-wrap: wrap;
}

._wrap-wrap-reverse_rzp51_125 {
  flex-wrap: wrap-reverse;
}

/* ========================================== */
/* GROW */
/* ========================================== */

._grow_rzp51_133 {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
}
/**
 * Cluster Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for cluster.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Cluster
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Cluster class */
._cluster_18g1l_17 {
  display: flex;
  flex-wrap: wrap;
}

/* ========================================== */
/* SPACING */
/* ========================================== */

._spacing-tight_18g1l_26 {
  gap: var(--lufa-semantic-ui-spacing-tight);
}

._spacing-compact_18g1l_30 {
  gap: var(--lufa-semantic-ui-spacing-compact);
}

._spacing-default_18g1l_34 {
  gap: var(--lufa-semantic-ui-spacing-default);
}

._spacing-comfortable_18g1l_38 {
  gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._spacing-spacious_18g1l_42 {
  gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* ALIGN */
/* ========================================== */

._align-flex-start_18g1l_50 {
  align-items: flex-start;
}

._align-center_18g1l_54 {
  align-items: center;
}

._align-flex-end_18g1l_58 {
  align-items: flex-end;
}

._align-baseline_18g1l_62 {
  align-items: baseline;
}

._align-stretch_18g1l_66 {
  align-items: stretch;
}

/* ========================================== */
/* JUSTIFY */
/* ========================================== */

._justify-flex-start_18g1l_74 {
  justify-content: flex-start;
}

._justify-center_18g1l_78 {
  justify-content: center;
}

._justify-flex-end_18g1l_82 {
  justify-content: flex-end;
}

._justify-space-between_18g1l_86 {
  justify-content: space-between;
}

._justify-space-around_18g1l_90 {
  justify-content: space-around;
}

/* ========================================== */
/* GROW */
/* ========================================== */

._grow_18g1l_98 {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
}
/**
 * Flex Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for flex.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Flex
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Flex class */
._flex_1q50n_17 {
  display: flex;
}

/* ========================================== */
/* DIRECTION */
/* ========================================== */

._direction-row_1q50n_25 {
  flex-direction: row;
}

._direction-column_1q50n_29 {
  flex-direction: column;
}

._direction-row-reverse_1q50n_33 {
  flex-direction: row-reverse;
}

._direction-column-reverse_1q50n_37 {
  flex-direction: column-reverse;
}

/* ========================================== */
/* WRAP */
/* ========================================== */

._wrap-nowrap_1q50n_45 {
  flex-wrap: nowrap;
}

._wrap-wrap_1q50n_49 {
  flex-wrap: wrap;
}

._wrap-wrap-reverse_1q50n_53 {
  flex-wrap: wrap-reverse;
}

/* ========================================== */
/* JUSTIFY */
/* ========================================== */

._justify-start_1q50n_61 {
  justify-content: flex-start;
}

._justify-end_1q50n_65 {
  justify-content: flex-end;
}

._justify-center_1q50n_69 {
  justify-content: center;
}

._justify-between_1q50n_73 {
  justify-content: space-between;
}

._justify-around_1q50n_77 {
  justify-content: space-around;
}

._justify-evenly_1q50n_81 {
  justify-content: space-evenly;
}

/* ========================================== */
/* ALIGN */
/* ========================================== */

._align-start_1q50n_89 {
  align-items: flex-start;
}

._align-end_1q50n_93 {
  align-items: flex-end;
}

._align-center_1q50n_97 {
  align-items: center;
}

._align-baseline_1q50n_101 {
  align-items: baseline;
}

._align-stretch_1q50n_105 {
  align-items: stretch;
}

/* ========================================== */
/* GAP */
/* ========================================== */

._gap-none_1q50n_113 {
  gap: 0;
}

._gap-tight_1q50n_117 {
  gap: var(--lufa-semantic-ui-spacing-tight);
}

._gap-compact_1q50n_121 {
  gap: var(--lufa-semantic-ui-spacing-compact);
}

._gap-default_1q50n_125 {
  gap: var(--lufa-semantic-ui-spacing-default);
}

._gap-comfortable_1q50n_129 {
  gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._gap-spacious_1q50n_133 {
  gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* INLINE */
/* ========================================== */

._inline_1q50n_141 {
  display: inline-flex;
}
/**
 * Grid Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for grid.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Grid
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Grid class */
._grid_1sg8o_17 {
  display: grid;
}

/* ========================================== */
/* COLUMNS */
/* ========================================== */

._columns-1_1sg8o_25 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

._columns-2_1sg8o_29 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

._columns-3_1sg8o_33 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

._columns-4_1sg8o_37 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

._columns-5_1sg8o_41 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

._columns-6_1sg8o_45 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

._columns-12_1sg8o_49 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* ========================================== */
/* GAP */
/* ========================================== */

._gap-none_1sg8o_57 {
  gap: 0;
}

._gap-tight_1sg8o_61 {
  gap: var(--lufa-semantic-ui-spacing-tight);
}

._gap-compact_1sg8o_65 {
  gap: var(--lufa-semantic-ui-spacing-compact);
}

._gap-default_1sg8o_69 {
  gap: var(--lufa-semantic-ui-spacing-default);
}

._gap-comfortable_1sg8o_73 {
  gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._gap-spacious_1sg8o_77 {
  gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* GAPX */
/* ========================================== */

._gapX-none_1sg8o_85 {
  -moz-column-gap: 0;
       column-gap: 0;
}

._gapX-tight_1sg8o_89 {
  -moz-column-gap: var(--lufa-semantic-ui-spacing-tight);
       column-gap: var(--lufa-semantic-ui-spacing-tight);
}

._gapX-compact_1sg8o_93 {
  -moz-column-gap: var(--lufa-semantic-ui-spacing-compact);
       column-gap: var(--lufa-semantic-ui-spacing-compact);
}

._gapX-default_1sg8o_97 {
  -moz-column-gap: var(--lufa-semantic-ui-spacing-default);
       column-gap: var(--lufa-semantic-ui-spacing-default);
}

._gapX-comfortable_1sg8o_101 {
  -moz-column-gap: var(--lufa-semantic-ui-spacing-comfortable);
       column-gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._gapX-spacious_1sg8o_105 {
  -moz-column-gap: var(--lufa-semantic-ui-spacing-spacious);
       column-gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* GAPY */
/* ========================================== */

._gapY-none_1sg8o_113 {
  row-gap: 0;
}

._gapY-tight_1sg8o_117 {
  row-gap: var(--lufa-semantic-ui-spacing-tight);
}

._gapY-compact_1sg8o_121 {
  row-gap: var(--lufa-semantic-ui-spacing-compact);
}

._gapY-default_1sg8o_125 {
  row-gap: var(--lufa-semantic-ui-spacing-default);
}

._gapY-comfortable_1sg8o_129 {
  row-gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._gapY-spacious_1sg8o_133 {
  row-gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* ALIGN */
/* ========================================== */

._align-start_1sg8o_141 {
  align-items: start;
}

._align-end_1sg8o_145 {
  align-items: end;
}

._align-center_1sg8o_149 {
  align-items: center;
}

._align-stretch_1sg8o_153 {
  align-items: stretch;
}

._align-baseline_1sg8o_157 {
  align-items: baseline;
}

/* ========================================== */
/* JUSTIFY */
/* ========================================== */

._justify-start_1sg8o_165 {
  justify-items: start;
}

._justify-end_1sg8o_169 {
  justify-items: end;
}

._justify-center_1sg8o_173 {
  justify-items: center;
}

._justify-stretch_1sg8o_177 {
  justify-items: stretch;
}

/* ========================================== */
/* INLINE */
/* ========================================== */

._inline_1sg8o_185 {
  display: inline-grid;
}
/**
 * Container Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for container.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Container
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Container class */
._container_1wtq9_17 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--lufa-component-container-padding-default);
  padding-right: var(--lufa-component-container-padding-default);
}

/* ========================================== */
/* FLUID */
/* ========================================== */

._fluid_1wtq9_29 {
  max-width: 100%;
}

/* ========================================== */
/* SIZE */
/* ========================================== */

._size-xs_1wtq9_37 {
  max-width: var(--lufa-component-container-max-width-xs);
}

._size-sm_1wtq9_41 {
  max-width: var(--lufa-component-container-max-width-sm);
}

._size-md_1wtq9_45 {
  max-width: var(--lufa-component-container-max-width-md);
}

._size-lg_1wtq9_49 {
  max-width: var(--lufa-component-container-max-width-lg);
}

._size-xl_1wtq9_53 {
  max-width: var(--lufa-component-container-max-width-xl);
}

._size-2xl_1wtq9_57 {
  max-width: var(--lufa-component-container-max-width-2xl);
}

/* ========================================== */
/* PADDINGBLOCK */
/* ========================================== */

._paddingBlock-none_1wtq9_65 {
  padding-top: var(--lufa-primitive-spacing-0);
  padding-bottom: var(--lufa-primitive-spacing-0);
}

._paddingBlock-tight_1wtq9_70 {
  padding-top: var(--lufa-semantic-ui-spacing-tight);
  padding-bottom: var(--lufa-semantic-ui-spacing-tight);
}

._paddingBlock-compact_1wtq9_75 {
  padding-top: var(--lufa-semantic-ui-spacing-compact);
  padding-bottom: var(--lufa-semantic-ui-spacing-compact);
}

._paddingBlock-default_1wtq9_80 {
  padding-top: var(--lufa-semantic-ui-spacing-default);
  padding-bottom: var(--lufa-semantic-ui-spacing-default);
}

._paddingBlock-comfortable_1wtq9_85 {
  padding-top: var(--lufa-semantic-ui-spacing-comfortable);
  padding-bottom: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingBlock-spacious_1wtq9_90 {
  padding-top: var(--lufa-semantic-ui-spacing-spacious);
  padding-bottom: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGINLINE */
/* ========================================== */

._paddingInline-none_1wtq9_99 {
  padding-left: var(--lufa-primitive-spacing-0);
  padding-right: var(--lufa-primitive-spacing-0);
}

._paddingInline-tight_1wtq9_104 {
  padding-left: var(--lufa-semantic-ui-spacing-tight);
  padding-right: var(--lufa-semantic-ui-spacing-tight);
}

._paddingInline-compact_1wtq9_109 {
  padding-left: var(--lufa-semantic-ui-spacing-compact);
  padding-right: var(--lufa-semantic-ui-spacing-compact);
}

._paddingInline-default_1wtq9_114 {
  padding-left: var(--lufa-semantic-ui-spacing-default);
  padding-right: var(--lufa-semantic-ui-spacing-default);
}

._paddingInline-comfortable_1wtq9_119 {
  padding-left: var(--lufa-semantic-ui-spacing-comfortable);
  padding-right: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingInline-spacious_1wtq9_124 {
  padding-left: var(--lufa-semantic-ui-spacing-spacious);
  padding-right: var(--lufa-semantic-ui-spacing-spacious);
}
/**
 * Center Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for center.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Center
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Center class */
._center_1sq8b_17 {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================== */
/* INLINE */
/* ========================================== */

._inline_1sq8b_27 {
  display: inline-flex;
}
/**
 * Bleed Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for bleed.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Bleed
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Bleed class */
._bleed_fdlu3_17 {
  display: block;
}

/* ========================================== */
/* INLINE */
/* ========================================== */

._inline-0_fdlu3_25 {
  margin-inline: 0;
}

._inline-4_fdlu3_29 {
  margin-inline: calc(var(--lufa-primitive-spacing-4) * -1);
}

._inline-8_fdlu3_33 {
  margin-inline: calc(var(--lufa-primitive-spacing-8) * -1);
}

._inline-12_fdlu3_37 {
  margin-inline: calc(var(--lufa-primitive-spacing-12) * -1);
}

._inline-16_fdlu3_41 {
  margin-inline: calc(var(--lufa-primitive-spacing-16) * -1);
}

._inline-24_fdlu3_45 {
  margin-inline: calc(var(--lufa-primitive-spacing-24) * -1);
}

._inline-32_fdlu3_49 {
  margin-inline: calc(var(--lufa-primitive-spacing-32) * -1);
}

._inline-40_fdlu3_53 {
  margin-inline: calc(var(--lufa-primitive-spacing-40) * -1);
}

._inline-48_fdlu3_57 {
  margin-inline: calc(var(--lufa-primitive-spacing-48) * -1);
}

._inline-64_fdlu3_61 {
  margin-inline: calc(var(--lufa-primitive-spacing-64) * -1);
}

._inline-80_fdlu3_65 {
  margin-inline: calc(var(--lufa-primitive-spacing-80) * -1);
}

._inline-96_fdlu3_69 {
  margin-inline: calc(var(--lufa-primitive-spacing-96) * -1);
}

/* ========================================== */
/* BLOCK */
/* ========================================== */

._block-0_fdlu3_77 {
  margin-block: 0;
}

._block-4_fdlu3_81 {
  margin-block: calc(var(--lufa-primitive-spacing-4) * -1);
}

._block-8_fdlu3_85 {
  margin-block: calc(var(--lufa-primitive-spacing-8) * -1);
}

._block-12_fdlu3_89 {
  margin-block: calc(var(--lufa-primitive-spacing-12) * -1);
}

._block-16_fdlu3_93 {
  margin-block: calc(var(--lufa-primitive-spacing-16) * -1);
}

._block-24_fdlu3_97 {
  margin-block: calc(var(--lufa-primitive-spacing-24) * -1);
}

._block-32_fdlu3_101 {
  margin-block: calc(var(--lufa-primitive-spacing-32) * -1);
}

._block-40_fdlu3_105 {
  margin-block: calc(var(--lufa-primitive-spacing-40) * -1);
}

._block-48_fdlu3_109 {
  margin-block: calc(var(--lufa-primitive-spacing-48) * -1);
}

._block-64_fdlu3_113 {
  margin-block: calc(var(--lufa-primitive-spacing-64) * -1);
}

._block-80_fdlu3_117 {
  margin-block: calc(var(--lufa-primitive-spacing-80) * -1);
}

._block-96_fdlu3_121 {
  margin-block: calc(var(--lufa-primitive-spacing-96) * -1);
}

/* ========================================== */
/* CUSTOM CLASSES */
/* ========================================== */

._inline-full-base_fdlu3_129 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

._inline-full-sm_fdlu3_135 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

._inline-full-md_fdlu3_141 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

._inline-full-lg_fdlu3_147 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

._inline-full-xl_fdlu3_153 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

._inline-full-2xl_fdlu3_159 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/**
 * Divider Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for divider.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Divider
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Divider class */
._divider_1w52u_17 {
  border: 0;
  margin: 0;
  --divider-color: var(--lufa-component-divider-emphasis-default-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-default-thickness);
}

/* ========================================== */
/* ORIENTATION */
/* ========================================== */

._orientation-horizontal_1w52u_28 {
  width: 100%;
  height: var(--divider-thickness);
  display: block;
}

._orientation-vertical_1w52u_34 {
  width: var(--divider-thickness);
  height: 100%;
  display: inline-block;
}

/* ========================================== */
/* EMPHASIS */
/* ========================================== */

._emphasis-subtle_1w52u_44 {
  --divider-color: var(--lufa-component-divider-emphasis-subtle-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-subtle-thickness);
}

._emphasis-default_1w52u_49 {
  --divider-color: var(--lufa-component-divider-emphasis-default-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-default-thickness);
}

._emphasis-moderate_1w52u_54 {
  --divider-color: var(--lufa-component-divider-emphasis-moderate-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-moderate-thickness);
}

._emphasis-strong_1w52u_59 {
  --divider-color: var(--lufa-component-divider-emphasis-strong-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-strong-thickness);
}

._emphasis-bold_1w52u_64 {
  --divider-color: var(--lufa-component-divider-emphasis-bold-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-bold-thickness);
}

/* ========================================== */
/* SPACING */
/* ========================================== */

._spacing-compact_1w52u_73 {
  margin-top: var(--lufa-component-divider-spacing-compact);
  margin-bottom: var(--lufa-component-divider-spacing-compact);
  margin-left: var(--lufa-component-divider-spacing-compact);
  margin-right: var(--lufa-component-divider-spacing-compact);
}

._spacing-default_1w52u_80 {
  margin-top: var(--lufa-component-divider-spacing-default);
  margin-bottom: var(--lufa-component-divider-spacing-default);
  margin-left: var(--lufa-component-divider-spacing-default);
  margin-right: var(--lufa-component-divider-spacing-default);
}

._spacing-comfortable_1w52u_87 {
  margin-top: var(--lufa-component-divider-spacing-comfortable);
  margin-bottom: var(--lufa-component-divider-spacing-comfortable);
  margin-left: var(--lufa-component-divider-spacing-comfortable);
  margin-right: var(--lufa-component-divider-spacing-comfortable);
}

/* ========================================== */
/* LINE-STYLE */
/* ========================================== */

._line-style-solid_1w52u_98 {
  background-color: var(--divider-color);
}

._line-style-dashed_1w52u_102 {
  background-color: transparent;
}

/* ========================================== */
/* CUSTOM CLASSES */
/* ========================================== */

._orientation-horizontal_1w52u_28._line-style-dashed_1w52u_102 {
  background-image: repeating-linear-gradient(
    to right,
    var(--divider-color) 0,
    var(--divider-color) var(--lufa-component-divider-dash-size),
    transparent var(--lufa-component-divider-dash-size),
    transparent var(--lufa-component-divider-dash-gap)
  );
}

._orientation-vertical_1w52u_34._line-style-dashed_1w52u_102 {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--divider-color) 0,
    var(--divider-color) var(--lufa-component-divider-dash-size),
    transparent var(--lufa-component-divider-dash-size),
    transparent var(--lufa-component-divider-dash-gap)
  );
}
/**
 * AspectRatio Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for aspectratio.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities AspectRatio
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base AspectRatio class */
._aspectratio_yfrex_17 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ========================================== */
/* RATIO */
/* ========================================== */

._ratio-16-9_yfrex_27 {
  padding-top: 56.25%;
}

._ratio-4-3_yfrex_31 {
  padding-top: 75%;
}

._ratio-21-9_yfrex_35 {
  padding-top: 42.857%;
}

._ratio-3-2_yfrex_39 {
  padding-top: 66.667%;
}

._ratio-1-1_yfrex_43 {
  padding-top: 100%;
}

._ratio-9-16_yfrex_47 {
  padding-top: 177.778%;
}

._ratio-3-4_yfrex_51 {
  padding-top: 133.333%;
}

/* ========================================== */
/* CUSTOM CLASSES */
/* ========================================== */

._aspect-ratio_yfrex_59 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

._aspect-ratio-content_yfrex_65 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._aspect-ratio_yfrex_59:has([style*='--aspect-ratio-padding']) {
  padding-top: var(--aspect-ratio-padding);
}
/**
 * Text Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for text.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Text
 */

/* ========================================== */
/* VARIANT */
/* ========================================== */

._variant-h1_19xx8_16 {
  font-size: var(--lufa-semantic-typography-heading-h1);
}

._variant-h2_19xx8_20 {
  font-size: var(--lufa-semantic-typography-heading-h2);
}

._variant-h3_19xx8_24 {
  font-size: var(--lufa-semantic-typography-heading-h3);
}

._variant-h4_19xx8_28 {
  font-size: var(--lufa-semantic-typography-heading-h4);
}

._variant-h5_19xx8_32 {
  font-size: var(--lufa-semantic-typography-heading-h5);
}

._variant-h6_19xx8_36 {
  font-size: var(--lufa-semantic-typography-heading-h6);
}

._variant-body-large_19xx8_40 {
  font-size: var(--lufa-semantic-typography-body-large);
}

._variant-body_19xx8_40 {
  font-size: var(--lufa-semantic-typography-body-default);
}

._variant-body-small_19xx8_48 {
  font-size: var(--lufa-semantic-typography-body-small);
}

._variant-caption_19xx8_52 {
  font-size: var(--lufa-semantic-typography-caption);
}

._variant-label_19xx8_56 {
  font-size: var(--lufa-semantic-typography-label);
}

/* ========================================== */
/* COLOR */
/* ========================================== */

._color-primary_19xx8_64 {
  color: var(--lufa-semantic-ui-text-primary);
}

._color-secondary_19xx8_68 {
  color: var(--lufa-semantic-ui-text-secondary);
}

._color-tertiary_19xx8_72 {
  color: var(--lufa-semantic-ui-text-tertiary);
}

._color-success_19xx8_76 {
  color: var(--lufa-semantic-ui-text-success);
}

._color-error_19xx8_80 {
  color: var(--lufa-semantic-ui-text-error);
}

._color-warning_19xx8_84 {
  color: var(--lufa-semantic-ui-text-warning);
}

._color-info_19xx8_88 {
  color: var(--lufa-semantic-ui-text-info);
}

._color-inverse_19xx8_92 {
  color: var(--lufa-semantic-ui-background-on-primary);
}

/* ========================================== */
/* WEIGHT */
/* ========================================== */

._weight-normal_19xx8_100 {
  font-weight: var(--lufa-core-typography-body-font-weight);
}

._weight-medium_19xx8_104 {
  font-weight: var(--lufa-core-typography-medium-font-weight);
}

._weight-semibold_19xx8_108 {
  font-weight: var(--lufa-core-typography-strong-font-weight);
}

._weight-bold_19xx8_112 {
  font-weight: var(--lufa-core-typography-heading-font-weight);
}

/* ========================================== */
/* ALIGN */
/* ========================================== */

._align-left_19xx8_120 {
  text-align: left;
}

._align-center_19xx8_124 {
  text-align: center;
}

._align-right_19xx8_128 {
  text-align: right;
}

._align-justify_19xx8_132 {
  text-align: justify;
}

/* ========================================== */
/* TRANSFORM */
/* ========================================== */

._transform-none_19xx8_140 {
  text-transform: none;
}

._transform-uppercase_19xx8_144 {
  text-transform: uppercase;
}

._transform-lowercase_19xx8_148 {
  text-transform: lowercase;
}

._transform-capitalize_19xx8_152 {
  text-transform: capitalize;
}
/**
 * Icon Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for icon.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Icon
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Icon class */
._icon_1f805_17 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ========================================== */
/* SIZE */
/* ========================================== */

._size-xs_1f805_28 {
  width: var(--lufa-component-shared-icon-size-xs);
  height: var(--lufa-component-shared-icon-size-xs);
}

._size-sm_1f805_33 {
  width: var(--lufa-component-shared-icon-size-sm);
  height: var(--lufa-component-shared-icon-size-sm);
}

._size-md_1f805_38 {
  width: var(--lufa-component-shared-icon-size-md);
  height: var(--lufa-component-shared-icon-size-md);
}

._size-lg_1f805_43 {
  width: var(--lufa-component-shared-icon-size-lg);
  height: var(--lufa-component-shared-icon-size-lg);
}

._size-xl_1f805_48 {
  width: var(--lufa-component-shared-icon-size-xl);
  height: var(--lufa-component-shared-icon-size-xl);
}

/* ========================================== */
/* COLOR */
/* ========================================== */

._color-currentColor_1f805_57 {
  color: currentColor;
}

._color-primary_1f805_61 {
  color: var(--lufa-semantic-ui-text-primary);
}

._color-secondary_1f805_65 {
  color: var(--lufa-semantic-ui-text-secondary);
}

._color-success_1f805_69 {
  color: var(--lufa-semantic-ui-text-success);
}

._color-error_1f805_73 {
  color: var(--lufa-semantic-ui-text-error);
}

._color-warning_1f805_77 {
  color: var(--lufa-semantic-ui-text-warning);
}

._color-info_1f805_81 {
  color: var(--lufa-semantic-ui-text-info);
}

._color-muted_1f805_85 {
  color: var(--lufa-semantic-ui-text-tertiary);
}

/* ========================================== */
/* STANDALONE SELECTORS */
/* ========================================== */

._visually-hidden_1f805_93 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/**
 * Badge Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for badge.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Badge
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Badge class */
._badge_1h7vh_17 {
  display: inline-flex;
  align-items: center;
  gap: var(--lufa-semantic-ui-spacing-tight);
  font-family: inherit;
  font-weight: var(--lufa-primitive-typography-font-weight-medium);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--lufa-component-badge-border-radius);
  border: 1px solid transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* ========================================== */
/* VARIANT */
/* ========================================== */

._variant-default_1h7vh_35 {
  background-color: var(--lufa-component-badge-variant-default-background);
  color: var(--lufa-component-badge-variant-default-text);
  border-color: var(--lufa-component-badge-variant-default-border);
}

._variant-success_1h7vh_41 {
  background-color: var(--lufa-component-badge-variant-success-background);
  color: var(--lufa-component-badge-variant-success-text);
  border-color: var(--lufa-component-badge-variant-success-border);
}

._variant-danger_1h7vh_47 {
  background-color: var(--lufa-component-badge-variant-error-background);
  color: var(--lufa-component-badge-variant-error-text);
  border-color: var(--lufa-component-badge-variant-error-border);
}

._variant-warning_1h7vh_53 {
  background-color: var(--lufa-component-badge-variant-warning-background);
  color: var(--lufa-component-badge-variant-warning-text);
  border-color: var(--lufa-component-badge-variant-warning-border);
}

._variant-info_1h7vh_59 {
  background-color: var(--lufa-component-badge-variant-info-background);
  color: var(--lufa-component-badge-variant-info-text);
  border-color: var(--lufa-component-badge-variant-info-border);
}

/* ========================================== */
/* SIZE */
/* ========================================== */

._size-sm_1h7vh_69 {
  padding-block: var(--lufa-component-badge-padding-compact-block);
  padding-inline: var(--lufa-component-badge-padding-compact-inline);
  font-size: var(--lufa-component-badge-font-size-compact);
}

._size-md_1h7vh_75 {
  padding-block: var(--lufa-component-badge-padding-default-block);
  padding-inline: var(--lufa-component-badge-padding-default-inline);
  font-size: var(--lufa-component-badge-font-size-default);
}

._size-lg_1h7vh_81 {
  padding-block: var(--lufa-component-badge-padding-large-block);
  padding-inline: var(--lufa-component-badge-padding-large-inline);
  font-size: var(--lufa-component-badge-font-size-large);
}

/* ========================================== */
/* CUSTOM CLASSES */
/* ========================================== */

._badge-content_1h7vh_91 {
  display: inline-block;
}

._badge-dot_1h7vh_95 {
  display: inline-block;
  width: var(--lufa-component-badge-dot-size);
  height: var(--lufa-component-badge-dot-size);
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

._badge-with-dot_1h7vh_104 {
  padding-left: var(--lufa-semantic-ui-spacing-tight);
}
/**
 * Link Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for link.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Link
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Link class */
._link_jwna5_17 {
  display: inline;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition:
    border-color var(--lufa-semantic-ui-transition-duration-fast)
      var(--lufa-semantic-ui-transition-timing-function-default),
    color var(--lufa-semantic-ui-transition-duration-fast) var(--lufa-semantic-ui-transition-timing-function-default);
}

/* ========================================== */
/* VARIANT */
/* ========================================== */

._variant-underline_jwna5_34 {
  border-bottom-width: var(--lufa-semantic-ui-border-width-thin);
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

._variant-plain_jwna5_40 {
  border-bottom-width: 0;
  border-bottom-style: none;
  border-bottom-color: transparent;
}

/* ========================================== */
/* COLOR */
/* ========================================== */

._color-primary_jwna5_50 {
  color: var(--lufa-semantic-interactive-link-default);
}

._color-secondary_jwna5_54 {
  color: var(--lufa-semantic-ui-text-secondary);
}

._color-tertiary_jwna5_58 {
  color: var(--lufa-semantic-ui-text-tertiary);
}

._color-inverse_jwna5_62 {
  color: var(--lufa-semantic-ui-background-on-primary);
}

/* ========================================== */
/* STANDALONE SELECTORS */
/* ========================================== */

/* Primary color - darken on hover */
._link_jwna5_17._color-primary_jwna5_50:hover {
  color: var(--lufa-semantic-interactive-link-hover);
}

/* Default variant - border appears on hover */
._link_jwna5_17._variant-underline_jwna5_34:hover {
  border-bottom-color: currentColor;
}

/* Accessible focus ring (matches Button pattern) */
._link_jwna5_17:focus-visible {
  outline: var(--lufa-component-shared-focus-outline-width) solid var(--lufa-component-shared-focus-outline-color);
  outline-offset: var(--lufa-component-shared-focus-outline-offset);
  border-radius: var(--lufa-semantic-ui-border-radius-small);
}
/**
 * Button Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for button.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Button
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Button class */
._button_oh3b2_17 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lufa-semantic-ui-spacing-compact);
  cursor: var(--lufa-component-button-state-default-cursor);
  font-family: inherit;
  font-weight: var(--lufa-primitive-typography-font-weight-semibold);
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: var(--lufa-semantic-ui-border-radius-default);
  transition: all var(--lufa-semantic-ui-transition-duration-fast)
    var(--lufa-semantic-ui-transition-timing-function-default);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  box-shadow: var(--lufa-component-button-effect-glow-default);
  text-shadow: var(--lufa-component-button-effect-text-glow-default);
}

/* ========================================== */
/* TYPE */
/* ========================================== */

._type-solid_oh3b2_39 {
  border-width: 0;
  border-style: none;
}

._type-outline_oh3b2_44 {
  border-width: 1px;
  border-style: solid;
}

._type-ghost_oh3b2_49 {
  border-width: 0;
  border-style: none;
}

/* ========================================== */
/* VARIANT */
/* ========================================== */

._variant-primary_oh3b2_58 {
  content: '';
}

._variant-secondary_oh3b2_62 {
  content: '';
}

._variant-success_oh3b2_66 {
  content: '';
}

._variant-danger_oh3b2_70 {
  content: '';
}

._variant-warning_oh3b2_74 {
  content: '';
}

._variant-info_oh3b2_78 {
  content: '';
}

._variant-neutral_oh3b2_82 {
  content: '';
}

/* ========================================== */
/* SIZE */
/* ========================================== */

._size-sm_oh3b2_90 {
  height: var(--lufa-semantic-ui-height-sm);
  padding-left: var(--lufa-semantic-ui-spacing-compact);
  padding-right: var(--lufa-semantic-ui-spacing-compact);
  font-size: var(--lufa-semantic-typography-body-small);
}

._size-md_oh3b2_97 {
  height: var(--lufa-semantic-ui-height-md);
  padding-left: var(--lufa-semantic-ui-spacing-default);
  padding-right: var(--lufa-semantic-ui-spacing-default);
  font-size: var(--lufa-semantic-typography-button);
}

._size-lg_oh3b2_104 {
  height: var(--lufa-semantic-ui-height-lg);
  padding-left: var(--lufa-semantic-ui-spacing-comfortable);
  padding-right: var(--lufa-semantic-ui-spacing-comfortable);
  font-size: var(--lufa-semantic-typography-body-large);
}

/* ========================================== */
/* RADIUS */
/* ========================================== */

._radius-none_oh3b2_115 {
  border-radius: 0px;
}

._radius-sm_oh3b2_119 {
  border-radius: var(--lufa-semantic-ui-border-radius-small);
}

._radius-base_oh3b2_123 {
  border-radius: var(--lufa-semantic-ui-border-radius-default);
}

._radius-md_oh3b2_127 {
  border-radius: var(--lufa-semantic-ui-border-radius-medium);
}

._radius-full_oh3b2_131 {
  border-radius: var(--lufa-semantic-ui-border-radius-full);
}

/* ========================================== */
/* FULLWIDTH */
/* ========================================== */

._fullWidth_oh3b2_139 {
  width: 100%;
}

/* ========================================== */
/* DISABLED */
/* ========================================== */

._disabled_oh3b2_147 {
  opacity: var(--lufa-component-button-state-disabled-opacity);
  cursor: var(--lufa-component-button-state-disabled-cursor);
  pointer-events: none;
}

/* ========================================== */
/* LOADING */
/* ========================================== */

._loading_oh3b2_157 {
  opacity: var(--lufa-semantic-interactive-opacity-loading);
  cursor: var(--lufa-component-button-state-loading-cursor);
}

/* ========================================== */
/* COMPOUND SELECTORS (type + variant combinations) */
/* ========================================== */

/* Solid + Primary (Blue) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-primary_oh3b2_58 {
  background-color: var(--lufa-component-button-type-solid-variant-primary-background-default);
  color: var(--lufa-component-button-type-solid-variant-primary-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-primary_oh3b2_58:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-primary-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-primary_oh3b2_58:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-primary-background-active);
}

/* Solid + Secondary (Purple) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-secondary_oh3b2_62 {
  background-color: var(--lufa-component-button-type-solid-variant-secondary-background-default);
  color: var(--lufa-component-button-type-solid-variant-secondary-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-secondary_oh3b2_62:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-secondary-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-secondary_oh3b2_62:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-secondary-background-active);
}

/* Solid + Success (Green) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-success_oh3b2_66 {
  background-color: var(--lufa-component-button-type-solid-variant-success-background-default);
  color: var(--lufa-component-button-type-solid-variant-success-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-success_oh3b2_66:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-success-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-success_oh3b2_66:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-success-background-active);
}

/* Solid + Danger (Red) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-danger_oh3b2_70 {
  background-color: var(--lufa-component-button-type-solid-variant-destructive-background-default);
  color: var(--lufa-component-button-type-solid-variant-destructive-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-danger_oh3b2_70:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-destructive-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-danger_oh3b2_70:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-destructive-background-active);
}

/* Solid + Warning (Orange/Yellow-600) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-warning_oh3b2_74 {
  background-color: var(--lufa-component-button-type-solid-variant-warning-background-default);
  color: var(--lufa-component-button-type-solid-variant-warning-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-warning_oh3b2_74:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-warning-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-warning_oh3b2_74:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-warning-background-active);
}

/* Solid + Info (Blue-500) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-info_oh3b2_78 {
  background-color: var(--lufa-component-button-type-solid-variant-info-background-default);
  color: var(--lufa-component-button-type-solid-variant-info-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-info_oh3b2_78:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-info-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-info_oh3b2_78:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-info-background-active);
}

/* Solid + Neutral (Gray) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-neutral_oh3b2_82 {
  background-color: var(--lufa-component-button-type-solid-variant-neutral-background-default);
  color: var(--lufa-component-button-type-solid-variant-neutral-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-neutral_oh3b2_82:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-neutral-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-neutral_oh3b2_82:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-neutral-background-active);
}

/* Outline + Primary (Blue) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-primary_oh3b2_58 {
  background-color: var(--lufa-component-button-type-outline-background-default);
  color: var(--lufa-component-button-type-outline-text-default);
  border-color: var(--lufa-component-button-type-outline-border-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-primary_oh3b2_58:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-background-hover);
  color: var(--lufa-component-button-type-outline-text-hover);
  border-color: var(--lufa-component-button-type-outline-border-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-primary_oh3b2_58:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-primary-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-primary-border-active);
}

/* Outline + Secondary (Purple) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-secondary_oh3b2_62 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-secondary-default);
  border-color: var(--lufa-semantic-interactive-action-secondary-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-secondary_oh3b2_62:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-action-secondary-default);
  color: var(--lufa-semantic-ui-background-on-secondary);
  border-color: var(--lufa-semantic-interactive-action-secondary-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-secondary_oh3b2_62:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-secondary-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-secondary-border-active);
}

/* Outline + Success (Green) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-success_oh3b2_66 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-success-default);
  border-color: var(--lufa-semantic-interactive-action-success-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-success_oh3b2_66:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-action-success-default);
  color: var(--lufa-component-button-type-outline-text-hover);
  border-color: var(--lufa-semantic-interactive-action-success-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-success_oh3b2_66:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-success-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-success-border-active);
}

/* Outline + Danger (Red) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-danger_oh3b2_70 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-destructive-default);
  border-color: var(--lufa-semantic-interactive-action-destructive-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-danger_oh3b2_70:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-action-destructive-default);
  color: var(--lufa-component-button-type-outline-text-hover);
  border-color: var(--lufa-semantic-interactive-action-destructive-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-danger_oh3b2_70:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-destructive-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-destructive-border-active);
}

/* Outline + Warning (Orange/Yellow-600) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-warning_oh3b2_74 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-warning-default);
  border-color: var(--lufa-semantic-interactive-action-warning-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-warning_oh3b2_74:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-action-warning-default);
  color: var(--lufa-component-button-type-outline-text-hover);
  border-color: var(--lufa-semantic-interactive-action-warning-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-warning_oh3b2_74:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-warning-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-warning-border-active);
}

/* Outline + Info (Blue-500) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-info_oh3b2_78 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-info-default);
  border-color: var(--lufa-semantic-interactive-action-info-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-info_oh3b2_78:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-action-info-default);
  color: var(--lufa-component-button-type-outline-text-hover);
  border-color: var(--lufa-semantic-interactive-action-info-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-info_oh3b2_78:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-info-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-info-border-active);
}

/* Outline + Neutral (Gray) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-neutral_oh3b2_82 {
  background-color: transparent;
  color: var(--lufa-semantic-ui-text-secondary);
  border-color: var(--lufa-semantic-interactive-border-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-neutral_oh3b2_82:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-background-hover);
  border-color: var(--lufa-semantic-interactive-border-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-neutral_oh3b2_82:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-neutral-background-active);
  border-color: var(--lufa-semantic-interactive-border-hover);
}

/* Ghost + Primary (Blue) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-primary_oh3b2_58 {
  background-color: var(--lufa-component-button-type-ghost-background-default);
  color: var(--lufa-component-button-type-ghost-text-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-primary_oh3b2_58:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-component-button-type-ghost-text-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-primary_oh3b2_58:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-primary-text-active);
}

/* Ghost + Secondary (Purple) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-secondary_oh3b2_62 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-secondary-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-secondary_oh3b2_62:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-interactive-action-secondary-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-secondary_oh3b2_62:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-secondary-text-active);
}

/* Ghost + Success (Green) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-success_oh3b2_66 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-success-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-success_oh3b2_66:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-interactive-action-success-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-success_oh3b2_66:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-success-text-active);
}

/* Ghost + Danger (Red) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-danger_oh3b2_70 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-destructive-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-danger_oh3b2_70:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-interactive-action-destructive-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-danger_oh3b2_70:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-destructive-text-active);
}

/* Ghost + Warning (Orange/Yellow-600) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-warning_oh3b2_74 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-warning-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-warning_oh3b2_74:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-interactive-action-warning-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-warning_oh3b2_74:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-warning-text-active);
}

/* Ghost + Info (Blue-500) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-info_oh3b2_78 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-info-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-info_oh3b2_78:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-interactive-action-info-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-info_oh3b2_78:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-info-text-active);
}

/* Ghost + Neutral (Gray) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-neutral_oh3b2_82 {
  background-color: transparent;
  color: var(--lufa-semantic-ui-text-secondary);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-neutral_oh3b2_82:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-ui-text-primary);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-neutral_oh3b2_82:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-neutral-text-active);
}

/* ========================================== */
/* STANDALONE SELECTORS */
/* ========================================== */

/* Focus ring (keyboard navigation) */
._button_oh3b2_17:focus-visible {
  outline: var(--lufa-component-shared-focus-outline-width) solid var(--lufa-component-shared-focus-outline-color);
  outline-offset: var(--lufa-component-shared-focus-outline-offset);
}

/* Glow hover state — enhanced box-shadow and text-shadow on hover (themeable) */
._button_oh3b2_17:hover:not(:disabled):not(._disabled_oh3b2_147) {
  box-shadow: var(--lufa-component-button-effect-glow-hover);
  text-shadow: var(--lufa-component-button-effect-text-glow-hover);
}

/* Loading spinner — animates first child icon */
._button_oh3b2_17._loading_oh3b2_157 > :first-child svg {
  animation: _spin_oh3b2_1 1s linear infinite;
}

/* Visually hidden — for screen readers (e.g. icon-only loading label) */
._visually-hidden_oh3b2_544 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================== */
/* KEYFRAMES */
/* ========================================== */

@keyframes _spin_oh3b2_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/**
 * Input Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for input.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Input
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Input class */
._input_7uvw4_17 {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding-block: var(--lufa-component-input-padding-md-block);
  padding-inline: var(--lufa-component-input-padding-md-inline);
  font-family: inherit;
  font-size: var(--lufa-component-input-font-size-md);
  line-height: var(--lufa-core-typography-body-line-height);
  color: var(--lufa-component-input-text-default);
  background-color: var(--lufa-component-input-background-default);
  border: var(--lufa-component-input-border-width) solid var(--lufa-component-input-border-default);
  border-radius: var(--lufa-component-input-border-radius);
  transition:
    border-color var(--lufa-semantic-ui-transition-duration-fast),
    box-shadow var(--lufa-semantic-ui-transition-duration-fast);
  outline: none;
}

/* ========================================== */
/* ERROR */
/* ========================================== */

._error_7uvw4_40 {
  border-color: var(--lufa-component-input-border-error);
}

/* ========================================== */
/* DISABLED */
/* ========================================== */

._disabled_7uvw4_48 {
  background-color: var(--lufa-component-input-background-disabled);
  color: var(--lufa-component-input-text-disabled);
  border-color: var(--lufa-component-input-border-disabled);
  cursor: var(--lufa-component-input-state-disabled-cursor);
}

/* ========================================== */
/* FULLWIDTH */
/* ========================================== */

._fullWidth_7uvw4_59 {
  width: 100%;
  display: block;
}

/* ========================================== */
/* STANDALONE SELECTORS */
/* ========================================== */

/* Placeholder text color */
._input_7uvw4_17::-moz-placeholder {
  color: var(--lufa-component-input-text-placeholder);
}
._input_7uvw4_17::placeholder {
  color: var(--lufa-component-input-text-placeholder);
}

/* Focus ring (keyboard navigation) */
._input_7uvw4_17:focus-visible {
  border-color: var(--lufa-component-input-border-focus);
  box-shadow: 0 0 0 var(--lufa-component-shared-focus-outline-width) var(--lufa-component-shared-focus-outline-color);
}

/* Error + Focus — red focus ring */
._input_7uvw4_17._error_7uvw4_40:focus-visible {
  box-shadow: 0 0 0 var(--lufa-component-shared-focus-outline-width) var(--lufa-component-input-border-error);
}
/**
 * Label Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for label.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Label
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Label class */
._label_xspry_17 {
  display: block;
  font-family: inherit;
  font-size: var(--lufa-component-input-label-font-size);
  font-weight: var(--lufa-primitive-typography-font-weight-medium);
  color: var(--lufa-component-input-label-color);
  margin-bottom: var(--lufa-component-input-label-spacing);
  line-height: var(--lufa-primitive-typography-line-height-tight);
}
._field_ad25w_1 {
  display: grid;
  gap: var(--lufa-semantic-ui-spacing-tight);
}

._description_ad25w_6,
._error_ad25w_7 {
  margin: 0;
  font-size: var(--lufa-semantic-ui-typography-caption);
}

._description_ad25w_6 {
  color: var(--lufa-semantic-ui-text-secondary);
}

._error_ad25w_7 {
  color: var(--lufa-semantic-ui-text-error);
}
._card_1vguz_1 {
  background-color: var(--lufa-component-card-background);
  border: 1px solid var(--lufa-component-card-border);
  border-radius: var(--lufa-component-card-border-radius-sm);
  box-shadow: var(--lufa-component-card-shadow-sm);
  padding: var(--lufa-component-card-padding-md);
  color: var(--lufa-semantic-ui-text-primary);
  overflow: hidden; /* Ensures content respects border-radius */
}
._dot-nav_11qgu_1 {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--lufa-semantic-ui-spacing-spacious);
  z-index: var(--lufa-semantic-z-index-fixed);
}

._dot-nav--right_11qgu_11 {
  right: var(--lufa-semantic-ui-spacing-comfortable);
}

._dot-nav--left_11qgu_15 {
  left: var(--lufa-semantic-ui-spacing-comfortable);
}

/* ========================================== */
/* ITEM */
/* ========================================== */

._dot-nav-item_11qgu_23 {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

._dot-nav-item--active_11qgu_31 {
  z-index: 1;
}

._dot-nav-item_11qgu_23:hover,
._dot-nav-item_11qgu_23:focus-within {
  z-index: 2;
}

/* ========================================== */
/* DOT */
/* ========================================== */

._dot-nav-dot_11qgu_44 {
  position: relative;
  width: var(--lufa-semantic-ui-spacing-compact);
  height: var(--lufa-semantic-ui-spacing-compact);
  border-radius: var(--lufa-semantic-ui-border-radius-full);
  background: var(--lufa-semantic-ui-border-default);
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background var(--lufa-semantic-ui-transition-duration-fast)
      var(--lufa-semantic-ui-transition-timing-function-default),
    transform var(--lufa-semantic-ui-transition-duration-fast)
      var(--lufa-semantic-ui-transition-timing-function-default);
}

/* Expanded invisible hit area for accessible pointer/touch targets */
._dot-nav-dot_11qgu_44::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--lufa-semantic-ui-spacing-default));
}

._dot-nav-dot_11qgu_44:hover,
._dot-nav-dot--active_11qgu_69 {
  background: var(--lufa-semantic-interactive-action-primary-default);
  transform: scale(1.6);
}

._dot-nav-dot_11qgu_44:focus-visible {
  outline: var(--lufa-component-shared-focus-outline-width) solid var(--lufa-component-shared-focus-outline-color);
  outline-offset: var(--lufa-component-shared-focus-outline-offset);
}

/* ========================================== */
/* LABEL */
/* ========================================== */

/*
 * The label is absolutely positioned so it never shifts the dot alignment.
 * By default it is hidden (opacity: 0).
 * It becomes visible when:
 *   1. The parent item is hovered (.dot-nav-item:hover)
 *   2. The item is the active section (.dot-nav-item--active)
 */
._dot-nav-label_11qgu_90 {
  position: absolute;
  right: calc(100% + var(--lufa-semantic-ui-spacing-compact));
  font-size: var(--lufa-semantic-ui-typography-caption);
  font-weight: var(--lufa-primitive-typography-font-weight-medium);
  color: var(--lufa-semantic-ui-text-primary);
  background: var(--lufa-semantic-ui-background-page);
  border: var(--lufa-semantic-ui-border-width-thin) solid var(--lufa-semantic-ui-border-default);
  border-radius: var(--lufa-semantic-ui-border-radius-small);
  padding: var(--lufa-semantic-ui-spacing-tight) var(--lufa-semantic-ui-spacing-compact);
  box-shadow: var(--lufa-semantic-ui-shadow-medium);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(var(--lufa-semantic-ui-spacing-tight));
  transition:
    opacity var(--lufa-semantic-ui-transition-duration-fast) var(--lufa-semantic-ui-transition-timing-function-default),
    transform var(--lufa-semantic-ui-transition-duration-fast)
      var(--lufa-semantic-ui-transition-timing-function-default);
}

/* Label on the left side */
._dot-nav--left_11qgu_15 ._dot-nav-label_11qgu_90 {
  right: auto;
  left: calc(100% + var(--lufa-semantic-ui-spacing-compact));
  transform: translateX(calc(-1 * var(--lufa-semantic-ui-spacing-tight)));
}

/* Label visible on hover or keyboard focus (all items) */
._dot-nav-item_11qgu_23:hover ._dot-nav-label_11qgu_90,
._dot-nav-item_11qgu_23:focus-within ._dot-nav-label_11qgu_90 {
  opacity: 1;
  transform: translateX(0);
}

/* Label always visible for the active section */
._dot-nav-item--active_11qgu_31 ._dot-nav-label_11qgu_90 {
  opacity: 1;
  transform: translateX(0);
}

/* ========================================== */
/* REDUCED MOTION */
/* ========================================== */

@media (prefers-reduced-motion: reduce) {
  ._dot-nav-dot_11qgu_44,
  ._dot-nav-label_11qgu_90 {
    transition: none;
  }
}
._root_584t1_1 {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  word-wrap: normal;
}
/*$vite$:1*/
/* Ocean Theme — Lufa Design System */

/* Structural tokens — apply to all modes */
[data-theme='ocean'] {
  /* Shape — very rounded, fluid */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-lg);
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-2xl);
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-full);
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-full);

  /* Motion — slow, wave-like */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-normal);
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-slow);
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-ease-out);

  /* Shadows — tinted cyan-blue */
  --lufa-semantic-ui-shadow-small: 0px 1px 2px 0px rgba(14, 116, 144, 0.15);
  --lufa-semantic-ui-shadow-medium: 0px 2px 4px 0px rgba(14, 116, 144, 0.18);
  --lufa-semantic-ui-shadow-large: 0px 8px 16px 0px rgba(14, 116, 144, 0.22);
  --lufa-semantic-ui-shadow-extra-large: 0px 12px 24px 0px rgba(14, 116, 144, 0.28);

  /* Background pattern — subtle wave grid */
  --lufa-semantic-ui-background-pattern: radial-gradient(circle at 1px 1px, rgba(14, 116, 144, 0.08) 1px, transparent 0)
    0 0 / 28px 28px;
}

[data-theme='ocean'],
[data-theme='ocean'][data-mode='light'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #0e7490;
  --lufa-core-color-brand-primary-hover: #0c2236;
  --lufa-core-color-brand-primary-active: #155e75;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #0f766e;
  --lufa-core-color-brand-secondary-hover: #115e59;
  --lufa-core-color-brand-secondary-active: #134e4a;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #7c3aed;

  /* Neutral */
  --lufa-core-color-neutral-background: #f0f9ff;
  --lufa-core-color-neutral-surface-default: #e0f2fe;
  --lufa-core-color-neutral-surface-hover: #bae6fd;
  --lufa-core-color-neutral-surface-active: #f0f9ff;
  --lufa-core-color-neutral-surface-raised: #bae6fd;
  --lufa-core-color-neutral-border-default: #0891b2;
  --lufa-core-color-neutral-border-strong: #0369a1;
  --lufa-core-color-neutral-text-primary: #0c4a6e;
  --lufa-core-color-neutral-text-secondary: #0369a1;
  --lufa-core-color-neutral-text-tertiary: #075985;
  --lufa-core-color-neutral-text-disabled: #93c5fd;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #047857;
  --lufa-core-color-feedback-success-subtle: #d1fae5;
  --lufa-core-color-feedback-success-border: #047857;
  --lufa-core-color-feedback-success-hover: #065f46;
  --lufa-core-color-feedback-success-active: #065f46;
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-default: #be123c;
  --lufa-core-color-feedback-error-subtle: #fff1f2;
  --lufa-core-color-feedback-error-border: #be123c;
  --lufa-core-color-feedback-error-hover: #b91c1c;
  --lufa-core-color-feedback-error-active: #881337;
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-default: #b45309;
  --lufa-core-color-feedback-warning-subtle: #fef3c7;
  --lufa-core-color-feedback-warning-border: #b45309;
  --lufa-core-color-feedback-warning-hover: #92400e;
  --lufa-core-color-feedback-warning-active: #78350f;
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-default: #0369a1;
  --lufa-core-color-feedback-info-subtle: #e0f2fe;
  --lufa-core-color-feedback-info-border: #0369a1;
  --lufa-core-color-feedback-info-hover: #075985;
  --lufa-core-color-feedback-info-active: #075985;
  --lufa-core-color-feedback-info-on-background: #ffffff;

  /* Semantic overrides — fix background-active contamination */
  --lufa-semantic-interactive-background-active: #f0f9ff;

  /* Component overrides — outline button active state (bg must differ from border) */
  --lufa-component-button-type-outline-variant-primary-background-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-secondary-background-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-success-background-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-destructive-background-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-warning-background-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-info-background-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-primary-border-active: #0c4a6e;
  --lufa-component-button-type-outline-variant-secondary-border-active: #0c4a6e;
  --lufa-component-button-type-outline-variant-success-border-active: #0c4a6e;
  --lufa-component-button-type-outline-variant-destructive-border-active: #0c4a6e;
  --lufa-component-button-type-outline-variant-warning-border-active: #0c4a6e;
  --lufa-component-button-type-outline-variant-info-border-active: #0c4a6e;
  --lufa-component-button-type-outline-variant-neutral-border-active: #0c4a6e; /* neutral-text-primary on #f0f9ff = 8.87:1 */

  /* Glow — subtle blue (light mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 8px rgba(14, 165, 233, 0.2);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 16px rgba(14, 165, 233, 0.4);
}

[data-theme='ocean'][data-mode='dark'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #22d3ee;
  --lufa-core-color-brand-primary-hover: #67e8f9;
  --lufa-core-color-brand-primary-active: #22d3ee;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #2dd4bf;
  --lufa-core-color-brand-secondary-hover: #5eead4;
  --lufa-core-color-brand-secondary-active: #14b8a6;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #a78bfa;

  /* Neutral */
  --lufa-core-color-neutral-background: #082f49;
  --lufa-core-color-neutral-surface-default: #0c4a6e;
  --lufa-core-color-neutral-surface-hover: #075985;
  --lufa-core-color-neutral-surface-active: #082f49;
  --lufa-core-color-neutral-surface-raised: #082f49;
  --lufa-core-color-neutral-border-default: #22d3ee;
  --lufa-core-color-neutral-border-strong: #7dd3fc;
  --lufa-core-color-neutral-text-primary: #f0f9ff;
  --lufa-core-color-neutral-text-secondary: #bae6fd;
  --lufa-core-color-neutral-text-tertiary: #7dd3fc;
  --lufa-core-color-neutral-text-disabled: #0c4a6e;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #34d399;
  --lufa-core-color-feedback-success-subtle: #064e3b;
  --lufa-core-color-feedback-success-border: #34d399;
  --lufa-core-color-feedback-success-hover: #6ee7b7;
  --lufa-core-color-feedback-success-active: #34d399;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #fb7185;
  --lufa-core-color-feedback-error-subtle: #4c0519;
  --lufa-core-color-feedback-error-border: #fb7185;
  --lufa-core-color-feedback-error-hover: #fda4af;
  --lufa-core-color-feedback-error-active: #fb7185;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #fbbf24;
  --lufa-core-color-feedback-warning-subtle: #451a03;
  --lufa-core-color-feedback-warning-border: #fbbf24;
  --lufa-core-color-feedback-warning-hover: #fcd34d;
  --lufa-core-color-feedback-warning-active: #fbbf24;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #38bdf8;
  --lufa-core-color-feedback-info-subtle: #082f49;
  --lufa-core-color-feedback-info-border: #38bdf8;
  --lufa-core-color-feedback-info-hover: #7dd3fc;
  --lufa-core-color-feedback-info-active: #38bdf8;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Semantic overrides — fix background-active contamination */
  --lufa-semantic-interactive-background-active: #082f49;

  /* Component overrides — outline button hover (brand-primary-default is light, need dark bg for outline) */
  --lufa-component-button-type-outline-background-hover: #082f49;
  --lufa-component-button-type-outline-text-hover: #ffffff;

  /* Component overrides — outline button active state */
  --lufa-component-button-type-outline-variant-primary-background-active: #082f49;
  --lufa-component-button-type-outline-variant-secondary-background-active: #082f49;
  --lufa-component-button-type-outline-variant-success-background-active: #082f49;
  --lufa-component-button-type-outline-variant-destructive-background-active: #082f49;
  --lufa-component-button-type-outline-variant-warning-background-active: #082f49;
  --lufa-component-button-type-outline-variant-info-background-active: #082f49;
  --lufa-component-button-type-outline-variant-primary-border-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-secondary-border-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-success-border-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-destructive-border-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-warning-border-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-info-border-active: #f0f9ff;
  --lufa-component-button-type-outline-variant-neutral-border-active: #f0f9ff; /* neutral-text-primary on #082f49 = 13.02:1 */

  /* Component overrides — solid primary button hover/active (on-background = #000000, need light bg) */
  --lufa-component-button-type-solid-variant-primary-background-hover: #67e8f9;
  --lufa-component-button-type-solid-variant-primary-background-active: #a5f3fc;

  /* Glow — blue glow (dark mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 12px rgba(14, 165, 233, 0.4);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 24px rgba(14, 165, 233, 0.7);
}

[data-theme='ocean'][data-mode='high-contrast'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #00ffff;
  --lufa-core-color-brand-primary-hover: #33ffff;
  --lufa-core-color-brand-primary-active: #00cccc;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #00ffcc;
  --lufa-core-color-brand-secondary-hover: #33ffd6;
  --lufa-core-color-brand-secondary-active: #00ccaa;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #bf00ff;

  /* Neutral */
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #000000;
  --lufa-core-color-neutral-surface-hover: #001122;
  --lufa-core-color-neutral-surface-active: #000000;
  --lufa-core-color-neutral-surface-raised: #000000;
  --lufa-core-color-neutral-border-default: #00ffff;
  --lufa-core-color-neutral-border-strong: #00ffff;
  --lufa-core-color-neutral-text-primary: #ffffff;
  --lufa-core-color-neutral-text-secondary: #ffffff;
  --lufa-core-color-neutral-text-tertiary: #00ffff;
  --lufa-core-color-neutral-text-disabled: #004488;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #00ff7f;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #00ff7f;
  --lufa-core-color-feedback-success-hover: #7fffd4;
  --lufa-core-color-feedback-success-active: #00ff7f;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #ff1744;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #ff1744;
  --lufa-core-color-feedback-error-hover: #ff5252;
  --lufa-core-color-feedback-error-active: #ff1744;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #ffd700;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ffd700;
  --lufa-core-color-feedback-warning-hover: #ffed4e;
  --lufa-core-color-feedback-warning-active: #ffd700;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #00bfff;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #00bfff;
  --lufa-core-color-feedback-info-hover: #87ceeb;
  --lufa-core-color-feedback-info-active: #00bfff;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Semantic overrides — fix background-active contamination */
  --lufa-semantic-interactive-background-active: #000000;

  /* Component overrides — outline button hover (brand-primary-default is light, need dark bg for outline) */
  --lufa-component-button-type-outline-background-hover: #000000;
  --lufa-component-button-type-outline-text-hover: #ffffff;

  /* Component overrides — outline button active state */
  --lufa-component-button-type-outline-variant-primary-background-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-background-active: #000000;
  --lufa-component-button-type-outline-variant-success-background-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-background-active: #000000;
  --lufa-component-button-type-outline-variant-warning-background-active: #000000;
  --lufa-component-button-type-outline-variant-info-background-active: #000000;
  --lufa-component-button-type-outline-variant-primary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-secondary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-success-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-destructive-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-warning-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-info-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-neutral-border-active: #ffffff; /* neutral-text-primary on #000000 = 21:1 */

  /* Component overrides — solid primary button hover/active (on-background = #000000, need light bg) */
  --lufa-component-button-type-solid-variant-primary-background-hover: #00aacc;
  --lufa-component-button-type-solid-variant-primary-background-active: #008899;

  /* Glow — disabled for accessibility */
  --lufa-semantic-effect-glow-box-primary-default: none;
  --lufa-semantic-effect-glow-box-primary-hover: none;
}

/* Forest Theme — Lufa Design System */

/* Structural tokens — apply to all modes */
[data-theme='forest'] {
  /* Shape — organic, medium rounded */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-md);
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-xl);
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-2xl);
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-full);

  /* Motion — natural, breathing */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-fast);
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-normal);
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-ease-in-out);

  /* Shadows — tinted emerald-green */
  --lufa-semantic-ui-shadow-small: 0px 1px 2px 0px rgba(4, 120, 87, 0.15);
  --lufa-semantic-ui-shadow-medium: 0px 2px 4px 0px rgba(4, 120, 87, 0.18);
  --lufa-semantic-ui-shadow-large: 0px 8px 16px 0px rgba(4, 120, 87, 0.22);
  --lufa-semantic-ui-shadow-extra-large: 0px 12px 24px 0px rgba(4, 120, 87, 0.28);

  /* Background pattern — organic dot pattern */
  --lufa-semantic-ui-background-pattern: radial-gradient(circle at 2px 2px, rgba(4, 120, 87, 0.1) 2px, transparent 0) 0
    0 / 40px 40px;
}

[data-theme='forest'],
[data-theme='forest'][data-mode='light'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #047857;
  --lufa-core-color-brand-primary-hover: #047857;
  --lufa-core-color-brand-primary-active: #065f46;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #15803d;
  --lufa-core-color-brand-secondary-hover: #166534;
  --lufa-core-color-brand-secondary-active: #14532d;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #7c3aed;

  /* Neutral */
  --lufa-core-color-neutral-background: #f0fdf4;
  --lufa-core-color-neutral-surface-default: #dcfce7;
  --lufa-core-color-neutral-surface-hover: #bbf7d0;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #f0fdf4;
  --lufa-core-color-neutral-border-default: #059669;
  --lufa-core-color-neutral-border-strong: #059669;
  --lufa-core-color-neutral-text-primary: #064e3b;
  --lufa-core-color-neutral-text-secondary: #065f46;
  --lufa-core-color-neutral-text-tertiary: #14532d;
  --lufa-core-color-neutral-text-disabled: #86efac;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #15803d;
  --lufa-core-color-feedback-success-subtle: #f0fdf4;
  --lufa-core-color-feedback-success-border: #059669;
  --lufa-core-color-feedback-success-hover: #166534;
  --lufa-core-color-feedback-success-active: #14532d;
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-default: #be123c;
  --lufa-core-color-feedback-error-subtle: #fff1f2;
  --lufa-core-color-feedback-error-border: #be123c;
  --lufa-core-color-feedback-error-hover: #b91c1c;
  --lufa-core-color-feedback-error-active: #881337;
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-default: #b45309;
  --lufa-core-color-feedback-warning-subtle: #fef3c7;
  --lufa-core-color-feedback-warning-border: #b45309;
  --lufa-core-color-feedback-warning-hover: #92400e;
  --lufa-core-color-feedback-warning-active: #78350f;
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-default: #0369a1;
  --lufa-core-color-feedback-info-subtle: #e0f2fe;
  --lufa-core-color-feedback-info-border: #0369a1;
  --lufa-core-color-feedback-info-hover: #075985;
  --lufa-core-color-feedback-info-active: #075985;
  --lufa-core-color-feedback-info-on-background: #ffffff;

  /* Semantic overrides — interactive background active uses a light surface so dark text contrasts */
  --lufa-semantic-interactive-background-active: #ecfdf5;

  /* Component overrides — outline button borders must contrast with their backgrounds */
  --lufa-component-button-type-outline-border-hover: #ecfdf5;
  --lufa-component-button-type-outline-variant-primary-border-active: #ecfdf5;
  --lufa-component-button-type-outline-variant-secondary-border-active: #ecfdf5;
  --lufa-component-button-type-outline-variant-success-border-active: #ecfdf5;
  --lufa-component-button-type-outline-variant-destructive-border-active: #ecfdf5;
  --lufa-component-button-type-outline-variant-warning-border-active: #ecfdf5;
  --lufa-component-button-type-outline-variant-info-border-active: #ecfdf5;
  --lufa-component-button-type-outline-variant-neutral-border-active: #064e3b; /* neutral-text-primary on #f0fdf4 = 9.28:1 */
}

[data-theme='forest'][data-mode='dark'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #34d399;
  --lufa-core-color-brand-primary-hover: #6ee7b7;
  --lufa-core-color-brand-primary-active: #a7f3d0;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #4ade80;
  --lufa-core-color-brand-secondary-hover: #86efac;
  --lufa-core-color-brand-secondary-active: #22c55e;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #a78bfa;

  /* Neutral */
  --lufa-core-color-neutral-background: #022c22;
  --lufa-core-color-neutral-surface-default: #064e3b;
  --lufa-core-color-neutral-surface-hover: #065f46;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #022c22;
  --lufa-core-color-neutral-border-default: #34d399;
  --lufa-core-color-neutral-border-strong: #10b981;
  --lufa-core-color-neutral-text-primary: #ecfdf5;
  --lufa-core-color-neutral-text-secondary: #a7f3d0;
  --lufa-core-color-neutral-text-tertiary: #6ee7b7;
  --lufa-core-color-neutral-text-disabled: #064e3b;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #22c55e;
  --lufa-core-color-feedback-success-subtle: #022c22;
  --lufa-core-color-feedback-success-border: #10b981;
  --lufa-core-color-feedback-success-hover: #4ade80;
  --lufa-core-color-feedback-success-active: #16a34a;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #fda4af;
  --lufa-core-color-feedback-error-subtle: #4c0519;
  --lufa-core-color-feedback-error-border: #fda4af;
  --lufa-core-color-feedback-error-hover: #fecdd3;
  --lufa-core-color-feedback-error-active: #ff8282;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #fbbf24;
  --lufa-core-color-feedback-warning-subtle: #451a03;
  --lufa-core-color-feedback-warning-border: #fbbf24;
  --lufa-core-color-feedback-warning-hover: #fcd34d;
  --lufa-core-color-feedback-warning-active: #d97706;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #38bdf8;
  --lufa-core-color-feedback-info-subtle: #082f49;
  --lufa-core-color-feedback-info-border: #38bdf8;
  --lufa-core-color-feedback-info-hover: #7dd3fc;
  --lufa-core-color-feedback-info-active: #0ea5e9;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Semantic overrides — interactive background active uses a dark surface so light text contrasts */
  --lufa-semantic-interactive-background-active: #064e3b;

  /* Component overrides — outline button borders must contrast with their backgrounds */
  --lufa-component-button-type-outline-border-hover: #022c22;
  --lufa-component-button-type-outline-variant-primary-border-active: #022c22;
  --lufa-component-button-type-outline-variant-secondary-border-active: #022c22;
  --lufa-component-button-type-outline-variant-success-border-active: #022c22;
  --lufa-component-button-type-outline-variant-destructive-border-active: #022c22;
  --lufa-component-button-type-outline-variant-warning-border-active: #022c22;
  --lufa-component-button-type-outline-variant-info-border-active: #022c22;
  --lufa-component-button-type-outline-variant-neutral-border-active: #ecfdf5; /* neutral-text-primary on #022c22 = 14.38:1 */
}

[data-theme='forest'][data-mode='high-contrast'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #00ff00;
  --lufa-core-color-brand-primary-hover: #33ff33;
  --lufa-core-color-brand-primary-active: #00cc00;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #00ff66;
  --lufa-core-color-brand-secondary-hover: #33ff88;
  --lufa-core-color-brand-secondary-active: #00cc55;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #bf00ff;

  /* Neutral */
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #000000;
  --lufa-core-color-neutral-surface-hover: #002200;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #000000;
  --lufa-core-color-neutral-border-default: #00ff00;
  --lufa-core-color-neutral-border-strong: #00ff00;
  --lufa-core-color-neutral-text-primary: #ffffff;
  --lufa-core-color-neutral-text-secondary: #ffffff;
  --lufa-core-color-neutral-text-tertiary: #00ff00;
  --lufa-core-color-neutral-text-disabled: #004400;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #00ff00;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #00ff00;
  --lufa-core-color-feedback-success-hover: #7fff00;
  --lufa-core-color-feedback-success-active: #00cc00;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #ff4500;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #ff4500;
  --lufa-core-color-feedback-error-hover: #ff6347;
  --lufa-core-color-feedback-error-active: #ff0000;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #ffa500;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ffa500;
  --lufa-core-color-feedback-warning-hover: #ffd700;
  --lufa-core-color-feedback-warning-active: #ffa500;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #00ced1;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #00ced1;
  --lufa-core-color-feedback-info-hover: #48d1cc;
  --lufa-core-color-feedback-info-active: #00ced1;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Semantic overrides — interactive background active uses a bright green so white text contrasts */
  --lufa-semantic-interactive-background-active: #004400;

  /* Component overrides — outline button borders must contrast with their backgrounds */
  --lufa-component-button-type-outline-border-hover: #000000;
  --lufa-component-button-type-outline-variant-primary-border-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-border-active: #000000;
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #ffffff; /* neutral-text-primary on #000000 = 21:1 */
}

/* Matrix Theme — Lufa Design System */

/* Structural tokens — apply to all modes */
[data-theme='matrix'] {
  /* Shape — terminal sharp, pure rectangles */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-none);
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-none);
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-none);
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-sm);

  /* Motion — instant, linear — like terminal output */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-instant);
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-fast);
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-linear);

  /* Typography — full mono — headings AND body text (terminal feel) */
  --lufa-core-typography-heading-font-family: var(--lufa-primitive-typography-font-family-mono);
  --lufa-core-typography-body-font-family: var(--lufa-primitive-typography-font-family-mono);
  --lufa-core-typography-heading-letter-spacing: var(--lufa-primitive-typography-letter-spacing-wider);

  /* Shadows — tinted matrix-green */
  --lufa-semantic-ui-shadow-small: 0px 1px 2px 0px rgba(0, 120, 0, 0.2);
  --lufa-semantic-ui-shadow-medium: 0px 2px 4px 0px rgba(0, 120, 0, 0.25);
  --lufa-semantic-ui-shadow-large: 0px 8px 16px 0px rgba(0, 120, 0, 0.32);
  --lufa-semantic-ui-shadow-extra-large: 0px 12px 24px 0px rgba(0, 120, 0, 0.42);

  /* Background pattern — terminal scan lines */
  --lufa-semantic-ui-background-pattern: repeating-linear-gradient(
    0deg,
    rgba(0, 120, 0, 0.06) 0px,
    rgba(0, 120, 0, 0.06) 1px,
    transparent 1px,
    transparent 4px
  );
}

[data-theme='matrix'],
[data-theme='matrix'][data-mode='light'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #007800;
  --lufa-core-color-brand-primary-hover: #006400;
  --lufa-core-color-brand-primary-active: #003b00;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #006400;
  --lufa-core-color-brand-secondary-hover: #004d00;
  --lufa-core-color-brand-secondary-active: #003b00;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #006633;

  /* Neutral */
  --lufa-core-color-neutral-background: #e6ffe6;
  --lufa-core-color-neutral-surface-default: #d9ffd9;
  --lufa-core-color-neutral-surface-hover: #c6f7c6;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  /* FIX: darken border-default — #007800 on #e6ffe6 = 5.37:1, on #d9ffd9 = 5.23:1 ✓ */
  --lufa-core-color-neutral-border-default: #007800;
  --lufa-core-color-neutral-border-strong: #008f11;
  --lufa-core-color-neutral-text-primary: #001a00;
  --lufa-core-color-neutral-text-secondary: #003b00;
  --lufa-core-color-neutral-text-tertiary: #006800;
  --lufa-core-color-neutral-text-disabled: #99d699;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #006400;
  --lufa-core-color-feedback-success-subtle: #e8ffe8;
  /* FIX: darken success-border — #006400 on #e8ffe8 = 7.05:1 ✓ */
  --lufa-core-color-feedback-success-border: #006400;
  --lufa-core-color-feedback-success-hover: #003b00;
  --lufa-core-color-feedback-error-default: #b91c1c;
  --lufa-core-color-feedback-error-subtle: #fee2e2;
  /* FIX: darken error-border — #b91c1c on #fee2e2 = 5.30:1 ✓ */
  --lufa-core-color-feedback-error-border: #b91c1c;
  --lufa-core-color-feedback-error-hover: #991b1b;
  --lufa-core-color-feedback-warning-default: #b45309;
  --lufa-core-color-feedback-warning-subtle: #fef3c7;
  /* FIX: darken warning-border — #b45309 on #fef3c7 = 4.51:1 ✓ */
  --lufa-core-color-feedback-warning-border: #b45309;
  --lufa-core-color-feedback-warning-hover: #92400e;
  --lufa-core-color-feedback-info-default: #0369a1;
  --lufa-core-color-feedback-info-subtle: #e0f2fe;
  /* FIX: darken info-border — #0369a1 on #e0f2fe = 5.17:1 ✓ */
  --lufa-core-color-feedback-info-border: #0369a1;
  --lufa-core-color-feedback-info-hover: #075985;

  /* FIX: Override feedback-*-active so white on-background achieves ≥4.5:1 */
  --lufa-core-color-feedback-success-active: #003b00;
  --lufa-core-color-feedback-error-active: #991b1b;
  --lufa-core-color-feedback-warning-active: #92400e;
  --lufa-core-color-feedback-info-active: #075985;
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-on-background: #ffffff;

  /* FIX: Override neutral-surface-active (#c6f7c6) — ghost text-active (#003b00) = 8.7:1 ✓ */
  --lufa-core-color-neutral-surface-active: #c6f7c6;

  /* Glow effects */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 15px rgba(0, 181, 21, 0.3), 0 0 22px rgba(0, 143, 17, 0.15);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 20px rgba(0, 181, 21, 0.3), 0 0 28px rgba(0, 143, 17, 0.15);
  --lufa-semantic-effect-glow-text-primary-default: 0 0 6px rgba(0, 181, 21, 0.3);
  --lufa-semantic-effect-glow-text-primary-hover: 0 0 10px rgba(0, 181, 21, 0.3), 0 0 15px rgba(0, 143, 17, 0.15);
  --lufa-semantic-effect-glow-border-focus: 0 0 0 2px rgba(0, 181, 21, 0.5);
  --lufa-semantic-effect-glow-box-focus: 0 0 0 4px rgba(0, 181, 21, 0.2), 0 0 10px rgba(0, 181, 21, 0.15);

  /* Component button overrides */
  --lufa-component-button-type-solid-variant-primary-background-default: var(--lufa-core-color-brand-primary-default);
  --lufa-component-button-type-solid-variant-primary-background-hover: var(--lufa-core-color-brand-primary-hover);
  --lufa-component-button-type-solid-variant-primary-background-active: var(--lufa-core-color-brand-primary-active);
  --lufa-component-button-type-solid-variant-primary-text: #ffffff;

  /* FIX: interactive-bg-active needs to be light enough so neutral-text-primary (#001a00) achieves ≥4.5:1 */
  /* #001a00 on #c6f7c6 = 15.27:1 ✓; also on bg-page (#e6ffe6) = 17.26:1 ✓ */
  --lufa-semantic-interactive-background-active: #c6f7c6;

  /* FIX: outline-border-hover vs outline-background-hover — white on #007800 = 5.70:1 ✓ */
  --lufa-component-button-type-outline-border-hover: #ffffff;

  /* FIX: outline variant border-active = same token as background-active (1:1) — override each */
  --lufa-component-button-type-outline-variant-primary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-secondary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-destructive-border-active: #ffffff;
  /* FIX: neutral-border-active — #ffffff on #c6f7c6 = 1.2:1 FAIL; use #001a00 (neutral-text-primary) = 15.27:1 ✓ */
  --lufa-component-button-type-outline-variant-neutral-border-active: #001a00;
  --lufa-component-button-type-outline-variant-success-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-warning-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-info-border-active: #ffffff;
}

[data-theme='matrix'][data-mode='dark'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #00ff41;
  --lufa-core-color-brand-primary-hover: #39ff14;
  /* FIX: darken brand-primary-active so #00ff41 text achieves ≥4.5:1 — #00ff41 on #001a00 = 13.40:1 ✓ */
  --lufa-core-color-brand-primary-active: #001a00;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #008f11;
  --lufa-core-color-brand-secondary-hover: #00ff41;
  --lufa-core-color-brand-secondary-active: #003b00;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #33ff66;

  /* Neutral */
  --lufa-core-color-neutral-background: #0d0208;
  --lufa-core-color-neutral-surface-default: #001100;
  --lufa-core-color-neutral-surface-hover: #002200;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-border-default: #007800;
  --lufa-core-color-neutral-border-strong: #008f11;
  --lufa-core-color-neutral-text-primary: #00ff41;
  --lufa-core-color-neutral-text-secondary: #008f11;
  --lufa-core-color-neutral-text-tertiary: #009a00;
  --lufa-core-color-neutral-text-disabled: #002200;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #00ff41;
  --lufa-core-color-feedback-success-subtle: #001100;
  --lufa-core-color-feedback-success-border: #008f11;
  --lufa-core-color-feedback-success-hover: #39ff14;
  --lufa-core-color-feedback-error-default: #ff0000;
  --lufa-core-color-feedback-error-subtle: #200000;
  /* FIX: brighten error-border — #ff0000 on #200000 = 4.86:1 ✓ (≥3:1 UI requirement) */
  --lufa-core-color-feedback-error-border: #ff0000;
  --lufa-core-color-feedback-error-hover: #ff3333;
  --lufa-core-color-feedback-warning-default: #ffff00;
  --lufa-core-color-feedback-warning-subtle: #202000;
  --lufa-core-color-feedback-warning-border: #808000;
  --lufa-core-color-feedback-warning-hover: #ffff33;
  --lufa-core-color-feedback-info-default: #00ffff;
  --lufa-core-color-feedback-info-subtle: #003030;
  --lufa-core-color-feedback-info-border: #00a0a0;
  --lufa-core-color-feedback-info-hover: #66ffff;

  /* FIX: on-background tokens — black achieves ≥4.5:1 on vivid active colors */
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* FIX: info-active — use #00ffff: black on #00ffff = 16.75:1 ✓; #00ffff on ghost-bg #001100 = 15.50:1 ✓ */
  --lufa-core-color-feedback-info-active: #00ffff;

  /* FIX: neutral-surface-active (#001100) — #00ff41 on #001100 = 14.24:1 ✓ */
  --lufa-core-color-neutral-surface-active: #001100;

  /* Glow effects */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 20px rgba(0, 255, 65, 0.4), 0 0 40px rgba(0, 255, 65, 0.2);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 30px rgba(0, 255, 65, 0.4), 0 0 50px rgba(0, 255, 65, 0.2);
  --lufa-semantic-effect-glow-text-primary-default: 0 0 10px rgba(0, 255, 65, 0.4);
  --lufa-semantic-effect-glow-text-primary-hover: 0 0 15px rgba(0, 255, 65, 0.4), 0 0 25px rgba(0, 255, 65, 0.2);
  --lufa-semantic-effect-glow-border-focus: 0 0 0 2px rgba(0, 255, 65, 0.6);
  --lufa-semantic-effect-glow-box-focus: 0 0 0 4px rgba(0, 255, 65, 0.3), 0 0 10px rgba(0, 255, 65, 0.2);

  /* Component button overrides */
  --lufa-semantic-interactive-background-active: #001100;
  --lufa-semantic-interactive-text-active: #00ff41;
  --lufa-component-button-type-solid-variant-primary-background-default: var(--lufa-core-color-brand-primary-default);
  --lufa-component-button-type-solid-variant-primary-background-hover: var(--lufa-core-color-brand-primary-hover);
  /* FIX: override active bg to bright green so #000000 text works on all 3 states */
  --lufa-component-button-type-solid-variant-primary-background-active: #00ff41;
  /* FIX: primary text = #000000 — on #00ff41(default) = 15.38:1, on #39ff14(hover) = 15.49:1, on #00ff41(active) = 15.38:1 ✓ */
  --lufa-component-button-type-solid-variant-primary-text: #000000;

  /* FIX: solid-secondary-text — use #000000: black on #008f11 = 4.94:1 ✓, on #00ff41 = 15.38:1 ✓ */
  --lufa-component-button-type-solid-variant-secondary-text: #000000;
  /* FIX: solid-secondary-bg-active — #003b00 fails with black text; use #00ff41 = 15.38:1 ✓ */
  --lufa-component-button-type-solid-variant-secondary-background-active: #00ff41;
  --lufa-component-button-type-solid-variant-success-background-active: #00ff41;
  --lufa-component-button-type-solid-variant-destructive-background-active: #ff3333;
  --lufa-component-button-type-solid-variant-warning-background-active: #ffff00;

  /* FIX: ghost variant text-active — override to #00ff41 (bright) for contrast on #001100 bg */
  --lufa-component-button-type-ghost-variant-primary-text-active: #00ff41;
  --lufa-component-button-type-ghost-variant-secondary-text-active: #00ff41;
  --lufa-component-button-type-ghost-variant-success-text-active: #00ff41;
  --lufa-component-button-type-ghost-variant-destructive-text-active: #ff3333;
  --lufa-component-button-type-ghost-variant-warning-text-active: #ffff00;

  /* FIX: outline-border-hover — black on bright green #00ff41 = 15.38:1 ✓ */
  --lufa-component-button-type-outline-border-hover: #000000;

  /* FIX: outline variant border-active — use #00ff41 since bg-active is dark (#001a00, #003b00) */
  --lufa-component-button-type-outline-variant-primary-border-active: #00ff41;
  --lufa-component-button-type-outline-variant-secondary-border-active: #00ff41;
  /* FIX: destructive-bg-active = error-active = #ff0000 — use #000000 border (5.25:1 ✓) */
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #00ff41;
  --lufa-component-button-type-outline-variant-success-background-active: #00ff41;
  --lufa-component-button-type-outline-variant-destructive-background-active: #ff3333;
  --lufa-component-button-type-outline-variant-warning-background-active: #ffff00;
  /* success-active (#00ff00) and warning-active (#ffff00) are vivid — use black border */
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  /* info-active now #00ffff — use black border */
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
}

[data-theme='matrix'][data-mode='high-contrast'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #00ff41;
  --lufa-core-color-brand-primary-hover: #39ff14;
  /* FIX: darken brand-primary-active — #00ff41 on #001100 = 14.24:1 ✓ */
  --lufa-core-color-brand-primary-active: #001100;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #00ff00;
  --lufa-core-color-brand-secondary-hover: #33ff33;
  --lufa-core-color-brand-secondary-active: #00cc00;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #00ff00;

  /* Neutral */
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #000000;
  --lufa-core-color-neutral-surface-hover: #002200;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-border-default: #00ff41;
  --lufa-core-color-neutral-border-strong: #00ff41;
  --lufa-core-color-neutral-text-primary: #00ff41;
  --lufa-core-color-neutral-text-secondary: #00ff41;
  --lufa-core-color-neutral-text-tertiary: #008f11;
  --lufa-core-color-neutral-text-disabled: #003b00;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #00ff00;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #00ff00;
  --lufa-core-color-feedback-success-hover: #7fff00;
  --lufa-core-color-feedback-error-default: #ff0000;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #ff0000;
  --lufa-core-color-feedback-error-hover: #ff4444;
  --lufa-core-color-feedback-warning-default: #ffff00;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ffff00;
  --lufa-core-color-feedback-warning-hover: #ffff88;
  --lufa-core-color-feedback-info-default: #00ffff;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #00ffff;
  --lufa-core-color-feedback-info-hover: #88ffff;

  /* FIX: on-background tokens — black achieves ≥4.5:1 on vivid active colors */
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* FIX: info-active — use #00ffff: black on #00ffff = 16.75:1 ✓; #00ffff on ghost-bg #000000 = 16.75:1 ✓ */
  --lufa-core-color-feedback-info-active: #00ffff;

  /* FIX: neutral-surface-active (#000000) — ghost text-active uses brand-primary-active (#001100) which is
     essentially black-on-black. Must override ghost text-active via component tokens below. */
  --lufa-core-color-neutral-surface-active: #000000;

  /* Glow effects */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 20px rgba(0, 255, 65, 0.5), 0 0 40px rgba(0, 255, 65, 0.3);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 30px rgba(0, 255, 65, 0.5), 0 0 50px rgba(0, 255, 65, 0.3);
  --lufa-semantic-effect-glow-text-primary-default: 0 0 10px rgba(0, 255, 65, 0.5);
  --lufa-semantic-effect-glow-text-primary-hover: 0 0 15px rgba(0, 255, 65, 0.5), 0 0 25px rgba(0, 255, 65, 0.3);
  --lufa-semantic-effect-glow-border-focus: 0 0 0 2px rgba(0, 255, 65, 0.8);
  --lufa-semantic-effect-glow-box-focus: 0 0 0 4px rgba(0, 255, 65, 0.4), 0 0 10px rgba(0, 255, 65, 0.3);

  /* FIX: solid-primary-text — need #000000 on all 3 states; override bg-active to bright green */
  --lufa-semantic-interactive-background-active: #000000;
  --lufa-semantic-interactive-text-active: #00ff41;
  /* bg-default = #00ff41, bg-hover = #39ff14 — black on both ✓; bg-active override = #00ff41 */
  --lufa-component-button-type-solid-variant-primary-background-active: #00ff41;
  --lufa-component-button-type-solid-variant-primary-text: #000000;
  --lufa-component-button-type-solid-variant-success-background-active: #00ff41;
  --lufa-component-button-type-solid-variant-destructive-background-active: #ff3333;
  --lufa-component-button-type-solid-variant-warning-background-active: #ffff00;

  /* FIX: ghost variant text-active — override to #00ff41 on ghost-bg #000000 = 15.38:1 ✓ */
  --lufa-component-button-type-ghost-variant-primary-text-active: #00ff41;
  --lufa-component-button-type-ghost-variant-success-text-active: #00ff41;
  --lufa-component-button-type-ghost-variant-destructive-text-active: #ff3333;
  --lufa-component-button-type-ghost-variant-warning-text-active: #ffff00;
  /* info-active = #00ffff on ghost-bg #000000 = 16.75:1 ✓ (no override needed, resolved by token) */

  /* FIX: outline-border-hover — black on bright green #00ff41 = 15.38:1 ✓ */
  --lufa-component-button-type-outline-border-hover: #000000;

  /* FIX: outline variant border-active — primary bg-active = #001100 → use #00ff41 */
  --lufa-component-button-type-outline-variant-primary-border-active: #00ff41;
  /* FIX: secondary-bg-active = #00cc00 — #00ff41 border = 1.60:1 FAIL; use #000000 (9.64:1 ✓) */
  --lufa-component-button-type-outline-variant-secondary-border-active: #000000;
  /* FIX: destructive-bg-active = error-active = #ff0000 — use #000000 border (5.25:1 ✓) */
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #00ff41;
  --lufa-component-button-type-outline-variant-success-background-active: #00ff41;
  --lufa-component-button-type-outline-variant-destructive-background-active: #ff3333;
  --lufa-component-button-type-outline-variant-warning-background-active: #ffff00;
  /* success-active (#00ff00) and warning-active (#ffff00) are vivid — use black border */
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  /* info-active now #00ffff — use black border */
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
}

/* Cyberpunk Theme — Lufa Design System */

/* Structural tokens — apply to all modes */
[data-theme='cyberpunk'] {
  /* Shape — sharp, cyber, no softness */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-none);
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-none);
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-sm);
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-base);

  /* Motion — fast, cyber-aggressive */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-instant);
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-fast);
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-ease-in);

  /* Typography — mono headings for tech interface feel */
  --lufa-core-typography-heading-font-family: var(--lufa-primitive-typography-font-family-mono);
  --lufa-core-typography-heading-letter-spacing: var(--lufa-primitive-typography-letter-spacing-wider);

  /* Shadows — tinted magenta-neon */
  --lufa-semantic-ui-shadow-small: 0px 1px 2px 0px rgba(179, 0, 179, 0.18);
  --lufa-semantic-ui-shadow-medium: 0px 2px 4px 0px rgba(179, 0, 179, 0.22);
  --lufa-semantic-ui-shadow-large: 0px 8px 16px 0px rgba(179, 0, 179, 0.28);
  --lufa-semantic-ui-shadow-extra-large: 0px 12px 24px 0px rgba(179, 0, 179, 0.38);

  /* Background pattern — fine neon grid */
  --lufa-semantic-ui-background-pattern:
    linear-gradient(rgba(179, 0, 179, 0.06) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(0, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 20px 20px;
}

[data-theme='cyberpunk'],
[data-theme='cyberpunk'][data-mode='light'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #b300b3;
  --lufa-core-color-brand-primary-hover: #880088;
  --lufa-core-color-brand-primary-active: #b300b3;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #006666;
  --lufa-core-color-brand-secondary-hover: #005555;
  --lufa-core-color-brand-secondary-active: #004444;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #b300d9;

  /* Neutral */
  --lufa-core-color-neutral-background: #fff5ff;
  --lufa-core-color-neutral-surface-default: #ffe6ff;
  --lufa-core-color-neutral-surface-hover: #ffccff;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #ff99ff; /* Explicit override — prevents HC-leaked value (#374151 post-PR) causing contrast failure: #330033 on #ff99ff = 9.47:1 */
  --lufa-core-color-neutral-border-default: #aa00aa;
  --lufa-core-color-neutral-border-strong: #880088;
  --lufa-core-color-neutral-text-primary: #330033;
  --lufa-core-color-neutral-text-secondary: #660066;
  --lufa-core-color-neutral-text-tertiary: #990099;
  --lufa-core-color-neutral-text-disabled: #ffccff;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #008052;
  --lufa-core-color-feedback-success-subtle: #e6fff6;
  --lufa-core-color-feedback-success-active: #006400;
  --lufa-core-color-feedback-success-border: #008052;
  --lufa-core-color-feedback-success-hover: #006642;
  --lufa-core-color-feedback-error-default: #cc003e;
  --lufa-core-color-feedback-error-subtle: #fff0f5;
  --lufa-core-color-feedback-error-active: #990030;
  --lufa-core-color-feedback-error-border: #cc003e;
  --lufa-core-color-feedback-error-hover: #b30036;
  --lufa-core-color-feedback-warning-default: #6a7500;
  --lufa-core-color-feedback-warning-subtle: #fdffe6;
  --lufa-core-color-feedback-warning-active: #4a5200;
  --lufa-core-color-feedback-warning-border: #6a7500;
  --lufa-core-color-feedback-warning-hover: #545d00;
  --lufa-core-color-feedback-info-default: #006b99;
  --lufa-core-color-feedback-info-subtle: #e6f7ff;
  --lufa-core-color-feedback-info-active: #004f73;
  --lufa-core-color-feedback-info-border: #006b99;
  --lufa-core-color-feedback-info-hover: #005577;
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-on-background: #ffffff;

  /* Glow effects */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 20px rgba(179, 0, 179, 0.2), 0 0 40px rgba(0, 255, 255, 0.15);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 30px rgba(179, 0, 179, 0.2), 0 0 50px rgba(0, 255, 255, 0.15);
  --lufa-semantic-effect-glow-text-primary-default: 0 0 10px rgba(179, 0, 179, 0.2);
  --lufa-semantic-effect-glow-text-primary-hover: 0 0 15px rgba(179, 0, 179, 0.2), 0 0 25px rgba(0, 255, 255, 0.15);
  --lufa-semantic-effect-glow-border-focus: 0 0 0 2px rgba(179, 0, 179, 0.4);
  --lufa-semantic-effect-glow-box-focus: 0 0 0 4px rgba(179, 0, 179, 0.2), 0 0 10px rgba(179, 0, 179, 0.15);

  /* Component overrides — WCAG AA fixes */
  /* Ghost: fix text-hover contrast (b300b3 was 4.30 on ffccff — insufficient) */
  --lufa-component-button-type-ghost-text-hover: #6b006b;
  /* Ghost active: use surface-default as background instead of neutral_surface_active (HC leak = #d1d5db) */
  --lufa-component-button-type-ghost-background-active: #ffe6ff;
  /* Ghost active text: each variant keeps its core color which is fine on #ffe6ff */
  --lufa-component-button-type-ghost-variant-primary-text-active: #b300b3;
  --lufa-component-button-type-ghost-variant-success-text-active: #006640;
  --lufa-component-button-type-ghost-variant-destructive-text-active: #cc003e;
  --lufa-component-button-type-ghost-variant-warning-text-active: #545d00;
  /* Outline: fix border-hover (was hover color on hover bg — 1.39:1) */
  --lufa-component-button-type-outline-border-hover: #ffffff;
  /* Outline active: border must differ from background — use white */
  --lufa-component-button-type-outline-variant-primary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-secondary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-success-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-destructive-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-warning-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-info-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-neutral-border-active: #330033; /* #330033 on #ff99ff = 9.47:1 */
  /* Interactive: fix text-active (#330033 on #b300b3 = 3.0:1) and page-bg check */
  --lufa-semantic-interactive-background-active: #ff66ff;
  --lufa-semantic-interactive-text-active: #330033;
}

[data-theme='cyberpunk'][data-mode='dark'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #ff00ff;
  --lufa-core-color-brand-primary-hover: #ff33ff;
  --lufa-core-color-brand-primary-active: #dd00dd;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #00ffff;
  --lufa-core-color-brand-secondary-hover: #33ffff;
  --lufa-core-color-brand-secondary-active: #00cccc;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #f0abfc;

  /* Neutral */
  --lufa-core-color-neutral-background: #0d001a;
  --lufa-core-color-neutral-surface-default: #1a0033;
  --lufa-core-color-neutral-surface-hover: #26004d;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-border-default: #cc00ff;
  --lufa-core-color-neutral-border-strong: #ff00ff;
  --lufa-core-color-neutral-text-primary: #00ffff;
  --lufa-core-color-neutral-text-secondary: #ff00ff;
  --lufa-core-color-neutral-text-tertiary: #b366ff;
  --lufa-core-color-neutral-text-disabled: #1a0033;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #00ff9f;
  --lufa-core-color-feedback-success-subtle: #001a10;
  --lufa-core-color-feedback-success-active: #00ff00;
  --lufa-core-color-feedback-success-border: #00cc7a;
  --lufa-core-color-feedback-success-hover: #33ffb2;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #ff0055;
  --lufa-core-color-feedback-error-subtle: #1a0009;
  --lufa-core-color-feedback-error-active: #ff0000;
  --lufa-core-color-feedback-error-border: #ff0055;
  --lufa-core-color-feedback-error-hover: #ff3377;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #f2ff00;
  --lufa-core-color-feedback-warning-subtle: #1a1a00;
  --lufa-core-color-feedback-warning-active: #ffff00;
  --lufa-core-color-feedback-warning-border: #cccc00;
  --lufa-core-color-feedback-warning-hover: #f5ff33;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #00b3ff;
  --lufa-core-color-feedback-info-subtle: #00121a;
  --lufa-core-color-feedback-info-active: #00ddff;
  --lufa-core-color-feedback-info-border: #00b3ff;
  --lufa-core-color-feedback-info-hover: #33c2ff;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Glow effects */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 20px rgba(255, 0, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.3);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 30px rgba(255, 0, 255, 0.4), 0 0 50px rgba(0, 255, 255, 0.3);
  --lufa-semantic-effect-glow-text-primary-default: 0 0 10px rgba(255, 0, 255, 0.4);
  --lufa-semantic-effect-glow-text-primary-hover: 0 0 15px rgba(255, 0, 255, 0.4), 0 0 25px rgba(0, 255, 255, 0.3);
  --lufa-semantic-effect-glow-border-focus: 0 0 0 2px rgba(255, 0, 255, 0.6);
  --lufa-semantic-effect-glow-box-focus: 0 0 0 4px rgba(255, 0, 255, 0.3), 0 0 10px rgba(255, 0, 255, 0.2);

  /* Component overrides — WCAG AA fixes */
  /* Ghost active: override bg to dark surface instead of neutral_surface_active (HC leak = #d1d5db) */
  --lufa-component-button-type-ghost-background-active: #0d001a;
  --lufa-component-button-type-ghost-text-hover: #00ffff;
  --lufa-component-button-type-ghost-variant-primary-text-active: #ff66ff;
  --lufa-component-button-type-ghost-variant-success-text-active: #00ff9f;
  --lufa-component-button-type-ghost-variant-destructive-text-active: #ff6699;
  --lufa-component-button-type-ghost-variant-warning-text-active: #f2ff00;
  /* Solid neutral: override bg-active to fix #00ffff text on #d1d5db (HC leak) */
  --lufa-component-button-type-solid-variant-neutral-background-active: #1a0033;
  /* Outline: fix border-hover (#ff33ff on #ff00ff = 1.07:1) */
  --lufa-component-button-type-outline-border-hover: #000000;
  /* Outline active: border must differ from background — use black */
  --lufa-component-button-type-outline-variant-primary-border-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-border-active: #000000;
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #00ffff; /* neutral-text-primary on #4b5563 = 6.03:1 */
  --lufa-component-button-type-outline-variant-neutral-background-active: #1a0033; /* override HC gray-300 fallback; #00ffff on #1a0033 = 15.34:1 */
  /* Interactive: fix text-active (#00ffff on #dd00dd = 3.77) — use dark bg + white text (both pairs pass) */
  --lufa-semantic-interactive-background-active: #660066;
  --lufa-semantic-interactive-text-active: #ffffff;
  /* Input border-error: was #660022 on #1a0033 = 1.45:1 → use #ff0055 */
  --lufa-component-input-border-error: #ff0055;
}

[data-theme='cyberpunk'][data-mode='high-contrast'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #ff00ff;
  --lufa-core-color-brand-primary-hover: #ff66ff;
  --lufa-core-color-brand-primary-active: #cc00cc;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #00ffff;
  --lufa-core-color-brand-secondary-hover: #66ffff;
  --lufa-core-color-brand-secondary-active: #00cccc;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #ff00ff;

  /* Neutral */
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #000000;
  --lufa-core-color-neutral-surface-hover: #1a0033;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #000000; /* Explicit override — dark HC background prevents HC-leaked value causing contrast failure */
  --lufa-core-color-neutral-border-default: #00ffff;
  --lufa-core-color-neutral-border-strong: #ff00ff;
  --lufa-core-color-neutral-text-primary: #ffffff;
  --lufa-core-color-neutral-text-secondary: #00ffff;
  --lufa-core-color-neutral-text-tertiary: #ff00ff;
  --lufa-core-color-neutral-text-disabled: #330066;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #00ff9f;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #00ff9f;
  --lufa-core-color-feedback-success-hover: #7fffbf;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #ff006e;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #ff006e;
  --lufa-core-color-feedback-error-hover: #ff4499;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #ffd700;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ffd700;
  --lufa-core-color-feedback-warning-hover: #ffe44d;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #00f5ff;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #00f5ff;
  --lufa-core-color-feedback-info-hover: #66f9ff;
  --lufa-core-color-feedback-info-on-background: #000000;
  --lufa-core-color-feedback-info-active: #00f5ff;

  /* Glow effects */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.4);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 30px rgba(255, 0, 255, 0.5), 0 0 50px rgba(0, 255, 255, 0.4);
  --lufa-semantic-effect-glow-text-primary-default: 0 0 10px rgba(255, 0, 255, 0.5);
  --lufa-semantic-effect-glow-text-primary-hover: 0 0 15px rgba(255, 0, 255, 0.5), 0 0 25px rgba(0, 255, 255, 0.4);
  --lufa-semantic-effect-glow-border-focus: 0 0 0 2px rgba(255, 0, 255, 0.8);
  --lufa-semantic-effect-glow-box-focus: 0 0 0 4px rgba(255, 0, 255, 0.4), 0 0 10px rgba(255, 0, 255, 0.3);

  /* Component overrides — WCAG AA fixes */
  --lufa-semantic-interactive-background-active: #660066;
  --lufa-semantic-interactive-text-active: #ffffff;
  --lufa-component-button-type-solid-variant-success-background-active: #00ff9f;
  --lufa-component-button-type-solid-variant-destructive-background-active: #ff006e;
  --lufa-component-button-type-solid-variant-warning-background-active: #ffd700;
  /* Solid primary: bg-active = #cc00cc, black text = 4.44:1 — fix by upgrading bg-active */
  --lufa-component-button-type-solid-variant-primary-background-active: #ff00ff;
  /* Solid neutral: override bg-active to fix #ffffff text on #d1d5db (HC leak) */
  --lufa-component-button-type-solid-variant-neutral-background-active: #000000;
  /* Ghost active: override bg to dark page surface instead of neutral_surface_active (HC leak = #d1d5db) */
  --lufa-component-button-type-ghost-background-active: #000000;
  --lufa-component-button-type-ghost-text-hover: #00ffff;
  /* Ghost primary text-active = brand_primary_active = #cc00cc on #000000 = 4.44 (just under 4.5) — use #ff00ff */
  --lufa-component-button-type-ghost-variant-primary-text-active: #ff00ff;
  --lufa-component-button-type-ghost-variant-success-text-active: #00ff9f;
  --lufa-component-button-type-ghost-variant-destructive-text-active: #ff006e;
  --lufa-component-button-type-ghost-variant-warning-text-active: #ffd700;
  /* Outline: fix border-hover (#ff66ff on #ff00ff = 1.28:1) */
  --lufa-component-button-type-outline-border-hover: #000000;
  /* Outline active: border must differ from background — use black for all (info-bg-active = #00f5ff) */
  --lufa-component-button-type-outline-variant-primary-border-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-border-active: #000000;
  --lufa-component-button-type-outline-variant-success-background-active: #00ff9f;
  --lufa-component-button-type-outline-variant-destructive-background-active: #ff006e;
  --lufa-component-button-type-outline-variant-warning-background-active: #ffd700;
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #00ffff; /* #00ffff on #000000 = 16.75:1 — consistent with neutral-border-default in HC */
  --lufa-component-button-type-outline-variant-neutral-background-active: #000000;
}

/* Sunset Theme — Lufa Design System */

/* Structural tokens — apply to all modes */
[data-theme='sunset'] {
  /* Shape — pill-shaped, warm and playful */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-xl);
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-full);
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-full);
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-full);

  /* Motion — bouncy, playful */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-fast);
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-normal);
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-ease-bounce);

  /* Shadows — tinted warm-orange */
  --lufa-semantic-ui-shadow-small: 0px 1px 2px 0px rgba(194, 65, 12, 0.15);
  --lufa-semantic-ui-shadow-medium: 0px 2px 4px 0px rgba(194, 65, 12, 0.18);
  --lufa-semantic-ui-shadow-large: 0px 8px 16px 0px rgba(194, 65, 12, 0.22);
  --lufa-semantic-ui-shadow-extra-large: 0px 12px 24px 0px rgba(194, 65, 12, 0.28);

  /* Background pattern — diagonal warm stripe */
  --lufa-semantic-ui-background-pattern: repeating-linear-gradient(
    45deg,
    rgba(194, 65, 12, 0.04) 0px,
    rgba(194, 65, 12, 0.04) 1px,
    transparent 1px,
    transparent 20px
  );
}

[data-theme='sunset'],
[data-theme='sunset'][data-mode='light'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #c2410c;
  --lufa-core-color-brand-primary-hover: #9a3412;
  --lufa-core-color-brand-primary-active: #c2410c;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #be123c;
  --lufa-core-color-brand-secondary-hover: #9f1239;
  --lufa-core-color-brand-secondary-active: #881337;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #9333ea;

  /* Neutral */
  --lufa-core-color-neutral-background: #fff7ed;
  --lufa-core-color-neutral-surface-default: #ffedd5;
  --lufa-core-color-neutral-surface-hover: #fed7aa;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #fff7ed;
  --lufa-core-color-neutral-border-default: #9a3412;
  --lufa-core-color-neutral-border-strong: #9a3412;
  --lufa-core-color-neutral-text-primary: #431407;
  --lufa-core-color-neutral-text-secondary: #7c2d12;
  --lufa-core-color-neutral-text-tertiary: #9a3412;
  --lufa-core-color-neutral-text-disabled: #fed7aa;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #047857;
  --lufa-core-color-feedback-success-subtle: #ecfdf5;
  --lufa-core-color-feedback-success-border: #047857;
  --lufa-core-color-feedback-success-hover: #065f46;
  --lufa-core-color-feedback-success-active: #047857;
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-default: #be123c;
  --lufa-core-color-feedback-error-subtle: #fff1f2;
  --lufa-core-color-feedback-error-border: #be123c;
  --lufa-core-color-feedback-error-hover: #9f1239;
  --lufa-core-color-feedback-error-active: #9f1239;
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-default: #a16207;
  --lufa-core-color-feedback-warning-subtle: #fffbeb;
  --lufa-core-color-feedback-warning-border: #a16207;
  --lufa-core-color-feedback-warning-hover: #92400e;
  --lufa-core-color-feedback-warning-active: #92400e;
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-default: #4f46e5;
  --lufa-core-color-feedback-info-subtle: #eef2ff;
  --lufa-core-color-feedback-info-border: #4338ca;
  --lufa-core-color-feedback-info-hover: #4338ca;
  --lufa-core-color-feedback-info-active: #4338ca;
  --lufa-core-color-feedback-info-on-background: #ffffff;

  /* Light mode: override semantic-interactive-background-active for text contrast */
  --lufa-semantic-interactive-background-active: #fed7aa;

  /* Light mode: outline button hover — bg should contrast with border (brand-primary-hover=#9a3412) */
  --lufa-component-button-type-outline-background-hover: #fff7ed;
  /* Light mode: outline text-hover is white by default (on-background), override to dark for light bg */
  --lufa-component-button-type-outline-text-hover: #431407;

  /* Light mode: outline variant active — split border/bg so they contrast >= 3:1 */
  --lufa-component-button-type-outline-variant-primary-background-active: #fff7ed;
  --lufa-component-button-type-outline-variant-secondary-background-active: #fff7ed;
  --lufa-component-button-type-outline-variant-success-background-active: #fff7ed;
  --lufa-component-button-type-outline-variant-destructive-background-active: #fff7ed;
  --lufa-component-button-type-outline-variant-warning-background-active: #fff7ed;
  --lufa-component-button-type-outline-variant-info-background-active: #fff7ed;
  --lufa-component-button-type-outline-variant-primary-border-active: #431407;
  --lufa-component-button-type-outline-variant-secondary-border-active: #431407;
  --lufa-component-button-type-outline-variant-success-border-active: #431407;
  --lufa-component-button-type-outline-variant-destructive-border-active: #431407;
  --lufa-component-button-type-outline-variant-warning-border-active: #431407;
  --lufa-component-button-type-outline-variant-info-border-active: #431407;
  --lufa-component-button-type-outline-variant-neutral-border-active: #431407; /* neutral-text-primary on #fff7ed = 14.74:1 */

  /* Glow — warm orange (light mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 10px rgba(249, 115, 22, 0.25);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 20px rgba(249, 115, 22, 0.5);
}

[data-theme='sunset'][data-mode='dark'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #fb923c;
  --lufa-core-color-brand-primary-hover: #fdba74;
  --lufa-core-color-brand-primary-active: #f97316;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #fb7185;
  --lufa-core-color-brand-secondary-hover: #fda4af;
  --lufa-core-color-brand-secondary-active: #f43f5e;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #c084fc;

  /* Neutral */
  --lufa-core-color-neutral-background: #1c0c08;
  --lufa-core-color-neutral-surface-default: #2d1610;
  --lufa-core-color-neutral-surface-hover: #432018;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #1c0c08;
  --lufa-core-color-neutral-border-default: #c2410c;
  --lufa-core-color-neutral-border-strong: #f97316;
  --lufa-core-color-neutral-text-primary: #fff7ed;
  --lufa-core-color-neutral-text-secondary: #fdba74;
  --lufa-core-color-neutral-text-tertiary: #fb923c;
  --lufa-core-color-neutral-text-disabled: #2d1610;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #34d399;
  --lufa-core-color-feedback-success-subtle: #064e3b;
  --lufa-core-color-feedback-success-border: #34d399;
  --lufa-core-color-feedback-success-hover: #6ee7b7;
  --lufa-core-color-feedback-success-active: #34d399;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #fb7185;
  --lufa-core-color-feedback-error-subtle: #4c0519;
  --lufa-core-color-feedback-error-border: #fb7185;
  --lufa-core-color-feedback-error-hover: #fda4af;
  --lufa-core-color-feedback-error-active: #f43f5e;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #fbbf24;
  --lufa-core-color-feedback-warning-subtle: #451a03;
  --lufa-core-color-feedback-warning-border: #fbbf24;
  --lufa-core-color-feedback-warning-hover: #fcd34d;
  --lufa-core-color-feedback-warning-active: #f59e0b;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #818cf8;
  --lufa-core-color-feedback-info-subtle: #1e1b4b;
  --lufa-core-color-feedback-info-border: #818cf8;
  --lufa-core-color-feedback-info-hover: #a5b4fc;
  --lufa-core-color-feedback-info-active: #818cf8;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Dark mode: override semantic-interactive-background-active for text contrast */
  --lufa-semantic-interactive-background-active: #7c2d12;

  /* Dark mode: outline button hover — bg must contrast with border (brand-primary-hover=#fdba74) */
  --lufa-component-button-type-outline-background-hover: #2d1610;
  /* Dark mode: outline text-hover is black by default (on-background), override to light for dark bg */
  --lufa-component-button-type-outline-text-hover: #fff7ed;

  /* Dark mode: outline variant active — split border/bg so they contrast >= 3:1 */
  --lufa-component-button-type-outline-variant-primary-background-active: #1c0c08;
  --lufa-component-button-type-outline-variant-secondary-background-active: #1c0c08;
  --lufa-component-button-type-outline-variant-success-background-active: #064e3b;
  --lufa-component-button-type-outline-variant-destructive-background-active: #4c0519;
  --lufa-component-button-type-outline-variant-warning-background-active: #451a03;
  --lufa-component-button-type-outline-variant-info-background-active: #1e1b4b;
  --lufa-component-button-type-outline-variant-primary-border-active: #fff7ed;
  --lufa-component-button-type-outline-variant-secondary-border-active: #fff7ed;
  --lufa-component-button-type-outline-variant-success-border-active: #fff7ed;
  --lufa-component-button-type-outline-variant-destructive-border-active: #fff7ed;
  --lufa-component-button-type-outline-variant-warning-border-active: #fff7ed;
  --lufa-component-button-type-outline-variant-info-border-active: #fff7ed;
  --lufa-component-button-type-outline-variant-neutral-border-active: #fff7ed; /* neutral-text-primary on #1c0c08 = 17.89:1 */

  /* Glow — warm orange (dark mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 14px rgba(249, 115, 22, 0.45);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 28px rgba(249, 115, 22, 0.75);
}

[data-theme='sunset'][data-mode='high-contrast'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #ff8000;
  --lufa-core-color-brand-primary-hover: #ffa040;
  --lufa-core-color-brand-primary-active: #cc6600;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #ff0066;
  --lufa-core-color-brand-secondary-hover: #ff4d88;
  --lufa-core-color-brand-secondary-active: #ff0066;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #bf00ff;

  /* Neutral */
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #000000;
  --lufa-core-color-neutral-surface-hover: #221100;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #000000;
  --lufa-core-color-neutral-border-default: #ff8000;
  --lufa-core-color-neutral-border-strong: #ff8000;
  --lufa-core-color-neutral-text-primary: #ffffff;
  --lufa-core-color-neutral-text-secondary: #ffffff;
  --lufa-core-color-neutral-text-tertiary: #ff8000;
  --lufa-core-color-neutral-text-disabled: #442200;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #32cd32;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #32cd32;
  --lufa-core-color-feedback-success-hover: #7fff00;
  --lufa-core-color-feedback-success-active: #32cd32;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #ff4500;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #ff4500;
  --lufa-core-color-feedback-error-hover: #ff6347;
  --lufa-core-color-feedback-error-active: #ff4500;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #ffa500;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ffa500;
  --lufa-core-color-feedback-warning-hover: #ffb74d;
  --lufa-core-color-feedback-warning-active: #ffa500;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #5c85ff;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #5c85ff;
  --lufa-core-color-feedback-info-hover: #7ea0ff;
  --lufa-core-color-feedback-info-active: #5c85ff;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* HC: override semantic-interactive-background-active for text contrast */
  --lufa-semantic-interactive-background-active: #110800;

  /* HC: outline button hover — bg must contrast with border (brand-primary-hover=#ffa040) */
  --lufa-component-button-type-outline-background-hover: #000000;
  /* HC: outline text-hover is black by default (on-background), override to white for black bg */
  --lufa-component-button-type-outline-text-hover: #ffffff;

  /* HC: outline variant active — split border/bg so they contrast >= 3:1 */
  --lufa-component-button-type-outline-variant-primary-background-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-background-active: #000000;
  --lufa-component-button-type-outline-variant-success-background-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-background-active: #000000;
  --lufa-component-button-type-outline-variant-warning-background-active: #000000;
  --lufa-component-button-type-outline-variant-info-background-active: #000000;
  --lufa-component-button-type-outline-variant-primary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-secondary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-success-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-destructive-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-warning-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-info-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-neutral-border-active: #ffffff; /* neutral-text-primary on #000000 = 21:1 */

  /* HC: ghost secondary active — override to use brighter secondary color for text legibility */
  --lufa-component-button-type-ghost-variant-secondary-text-active: #ff0066;

  /* Glow — disabled for accessibility */
  --lufa-semantic-effect-glow-box-primary-default: none;
  --lufa-semantic-effect-glow-box-primary-hover: none;
}

/* Nordic Theme — Lufa Design System */

/* Structural tokens — apply to all modes */
[data-theme='nordic'] {
  /* Shape — minimal, barely rounded */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-sm);
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-base);
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-md);
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-lg);

  /* Motion — fast, efficient, clean */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-instant);
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-fast);
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-linear);

  /* Typography — spaced headings for clean nordic feel */
  --lufa-core-typography-heading-letter-spacing: var(--lufa-primitive-typography-letter-spacing-wide);

  /* Shadows — tinted cool steel-blue */
  --lufa-semantic-ui-shadow-small: 0px 1px 2px 0px rgba(3, 105, 161, 0.12);
  --lufa-semantic-ui-shadow-medium: 0px 2px 4px 0px rgba(3, 105, 161, 0.15);
  --lufa-semantic-ui-shadow-large: 0px 8px 16px 0px rgba(3, 105, 161, 0.18);
  --lufa-semantic-ui-shadow-extra-large: 0px 12px 24px 0px rgba(3, 105, 161, 0.22);

  /* Background pattern — fine grid */
  --lufa-semantic-ui-background-pattern:
    linear-gradient(rgba(3, 105, 161, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(3, 105, 161, 0.05) 1px, transparent 1px) 0 0 / 24px 24px;
}

[data-theme='nordic'],
[data-theme='nordic'][data-mode='light'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #0369a1;
  --lufa-core-color-brand-primary-hover: #026795; /* darkened: white on #026795 = 6.22:1 ≥ 4.5 */
  --lufa-core-color-brand-primary-active: #0369a1;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #475569;
  --lufa-core-color-brand-secondary-hover: #475569;
  --lufa-core-color-brand-secondary-active: #334155;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #7c3aed;

  /* Neutral */
  --lufa-core-color-neutral-background: #f8fafc;
  --lufa-core-color-neutral-surface-default: #f1f5f9;
  --lufa-core-color-neutral-surface-hover: #e2e8f0;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #cbd5e1; /* explicit: prevents HC gray-300 fallback */
  --lufa-core-color-neutral-border-default: #64748b;
  --lufa-core-color-neutral-border-strong: #0284c7;
  --lufa-core-color-neutral-text-primary: #0f172a;
  --lufa-core-color-neutral-text-secondary: #334155;
  --lufa-core-color-neutral-text-tertiary: #475569; /* was #64748b = 4.34:1 on surface; now 6.92:1 */
  --lufa-core-color-neutral-text-disabled: #e2e8f0;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #047857;
  --lufa-core-color-feedback-success-subtle: #ecfdf5;
  --lufa-core-color-feedback-success-border: #059669; /* was #a7f3d0 = 1.22:1 on subtle; now 3.58:1 */
  --lufa-core-color-feedback-success-hover: #065f46;
  --lufa-core-color-feedback-success-active: #065f46; /* explicit: prevents HC #00ff00 fallback */
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-default: #be123c;
  --lufa-core-color-feedback-error-subtle: #fef2f2;
  --lufa-core-color-feedback-error-border: #ef4444; /* was #fecaca = 1.32:1 on subtle; now 3.44:1 */
  --lufa-core-color-feedback-error-hover: #9f1239;
  --lufa-core-color-feedback-error-active: #9f1239; /* explicit: prevents HC #ff0000 fallback */
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-default: #a16207;
  --lufa-core-color-feedback-warning-subtle: #fffbeb;
  --lufa-core-color-feedback-warning-border: #d97706; /* was #fde68a = 1.20:1 on subtle; now 3.07:1 */
  --lufa-core-color-feedback-warning-hover: #92400e;
  --lufa-core-color-feedback-warning-active: #92400e; /* explicit: prevents HC #ffff00 fallback */
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-default: #2563eb;
  --lufa-core-color-feedback-info-subtle: #eff6ff;
  --lufa-core-color-feedback-info-border: #3b82f6; /* was #bfdbfe = 1.31:1 on subtle; now 3.38:1 */
  --lufa-core-color-feedback-info-hover: #1d4ed8;
  --lufa-core-color-feedback-info-active: #1d4ed8; /* explicit: prevents HC #0000ff fallback */
  --lufa-core-color-feedback-info-on-background: #ffffff;

  /* Interactive overrides
     semantic-interactive-text-active must pass 4.5:1 on BOTH:
     - semantic-interactive-background-active (pressed state bg)
     - semantic-ui-background-page (page bg)
     No single text color works on both #0369a1 (primary-active) and #f8fafc (page).
     Solution: override interactive-background-active to a lighter blue so #0f172a passes both. */
  --lufa-semantic-interactive-background-active: #3b82f6; /* #0f172a on #3b82f6 = 4.85:1 ✓ */
  --lufa-semantic-interactive-text-active: #0f172a; /* 4.85:1 on bg-active, 17.06:1 on page */

  /* Ghost primary text-active override: primary-active (#0369a1) only gives 4.03:1 on ghost-bg (#cbd5e1) */
  --lufa-component-button-type-ghost-variant-primary-text-active: #025485; /* 5.42:1 on #cbd5e1 */

  /* Outline button border-active — fix 1:1 ratio (border and bg reference same token in base) */
  --lufa-component-button-type-outline-variant-primary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-secondary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-success-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-destructive-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-warning-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-info-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-neutral-border-active: #0f172a; /* neutral-text-primary on #cbd5e1 = 12.02:1 */

  /* Outline button hover — fix border-hover on bg-hover (primary-hover on primary-default = low contrast) */
  --lufa-component-button-type-outline-border-hover: #ffffff; /* 5.93:1 on bg-hover #0369a1 */
}

[data-theme='nordic'][data-mode='dark'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #38bdf8;
  --lufa-core-color-brand-primary-hover: #7dd3fc;
  --lufa-core-color-brand-primary-active: #0ea5e9;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #7dd3fc;
  --lufa-core-color-brand-secondary-hover: #cbd5e1;
  --lufa-core-color-brand-secondary-active: #708090; /* was #64748b; black on #64748b = 4.41 (fails); #708090 = 5.18 */
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #a78bfa;

  /* Neutral */
  --lufa-core-color-neutral-background: #0f172a;
  --lufa-core-color-neutral-surface-default: #1e293b;
  --lufa-core-color-neutral-surface-hover: #334155;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #1e293b; /* ghost-bg-active; dark enough for all ghost text-active */
  --lufa-core-color-neutral-border-default: #64748b;
  --lufa-core-color-neutral-border-strong: #38bdf8;
  --lufa-core-color-neutral-text-primary: #f8fafc;
  --lufa-core-color-neutral-text-secondary: #cbd5e1;
  --lufa-core-color-neutral-text-tertiary: #94a3b8;
  --lufa-core-color-neutral-text-disabled: #1e293b;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #34d399;
  --lufa-core-color-feedback-success-subtle: #064e3b;
  --lufa-core-color-feedback-success-border: #34d399; /* was #065f46 = 1.26:1 on #064e3b; now 5.06:1 */
  --lufa-core-color-feedback-success-hover: #6ee7b7;
  --lufa-core-color-feedback-success-active: #34d399; /* explicit: prevents HC fallback; black on #34d399 = 10.92:1 */
  --lufa-core-color-feedback-success-on-background: #000000; /* white on #34d399 = 1.92 (fails); black = 10.92 */
  --lufa-core-color-feedback-error-default: #f87171;
  --lufa-core-color-feedback-error-subtle: #450a0a;
  --lufa-core-color-feedback-error-border: #f87171; /* was #7f1d1d = 1.61:1 on #450a0a; now 5.84:1 */
  --lufa-core-color-feedback-error-hover: #fca5a5;
  --lufa-core-color-feedback-error-active: #f87171; /* explicit: prevents HC fallback; black on #f87171 = 7.59:1 */
  --lufa-core-color-feedback-error-on-background: #000000; /* white on #f87171 = 2.77 (fails); black = 7.59 */
  --lufa-core-color-feedback-warning-default: #fbbf24;
  --lufa-core-color-feedback-warning-subtle: #451a03;
  --lufa-core-color-feedback-warning-border: #fbbf24; /* was #78350f = 1.65:1 on #451a03; now 8.97:1 */
  --lufa-core-color-feedback-warning-hover: #fcd34d;
  --lufa-core-color-feedback-warning-active: #fbbf24; /* explicit: prevents HC fallback; black on #fbbf24 = 12.58:1 */
  --lufa-core-color-feedback-warning-on-background: #000000; /* white on #fbbf24 = 1.67 (fails); black = 12.58 */
  --lufa-core-color-feedback-info-default: #7eb8f7;
  --lufa-core-color-feedback-info-subtle: #1e3a8a;
  --lufa-core-color-feedback-info-border: #93c5fd; /* was #1e40af = 1.19:1 on #1e3a8a; now 5.74:1 */
  --lufa-core-color-feedback-info-hover: #a5caff;
  --lufa-core-color-feedback-info-active: #7eb8f7; /* explicit: prevents HC fallback; black on #7eb8f7 = 10.09:1 */
  --lufa-core-color-feedback-info-on-background: #000000; /* white on #7eb8f7 = 2.08 (fails); black = 10.09 */

  /* Interactive overrides
     Same dual-constraint as light: text-active must pass on both bg-active and page.
     Override bg-active to neutral-surface-active (#1e293b): text (#f8fafc) passes on both. */
  --lufa-semantic-interactive-background-active: #1e293b; /* #f8fafc on #1e293b = 13.98:1 ✓ */
  --lufa-semantic-interactive-text-active: #f8fafc; /* 13.98:1 on bg-active, 17.06:1 on page */

  /* Ghost secondary text-active: secondary-active (#708090) on ghost-bg (#1e293b) = 3.66 (fails) */
  --lufa-component-button-type-ghost-variant-primary-text-active: #7dd3fc;
  --lufa-component-button-type-ghost-variant-secondary-text-active: #94a3b8; /* 5.71:1 on #1e293b */

  /* Outline button border-active — fix 1:1 ratio */
  --lufa-component-button-type-outline-variant-primary-border-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #f8fafc; /* neutral-text-primary on #1e293b = 13.98:1 */

  /* Outline button hover — fix border-hover on bg-hover */
  --lufa-component-button-type-outline-border-hover: #000000; /* 9.80:1 on #38bdf8 */
}

[data-theme='nordic'][data-mode='high-contrast'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #00ccff;
  --lufa-core-color-brand-primary-hover: #33ddff;
  --lufa-core-color-brand-primary-active: #0099cc;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #ffffff;
  --lufa-core-color-brand-secondary-hover: #ffffff;
  --lufa-core-color-brand-secondary-active: #cccccc;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #bf00ff;

  /* Neutral */
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #000000;
  --lufa-core-color-neutral-surface-hover: #112233;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #0a1929; /* ghost-bg-active; #ff1744 on #0a1929 = 4.61:1 ✓ */
  --lufa-core-color-neutral-border-default: #00ccff;
  --lufa-core-color-neutral-border-strong: #00ccff;
  --lufa-core-color-neutral-text-primary: #ffffff;
  --lufa-core-color-neutral-text-secondary: #ffffff;
  --lufa-core-color-neutral-text-tertiary: #00ccff;
  --lufa-core-color-neutral-text-disabled: #002244;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #00e676;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #00e676;
  --lufa-core-color-feedback-success-hover: #69f0ae;
  --lufa-core-color-feedback-success-active: #00c853; /* explicit; black on #00c853 = 9.39:1 ✓ */
  --lufa-core-color-feedback-success-on-background: #000000; /* white on #00e676 = 1.67 (fails); black = 12.58 */
  --lufa-core-color-feedback-error-default: #ff1744;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #ff1744;
  --lufa-core-color-feedback-error-hover: #ff5252;
  --lufa-core-color-feedback-error-active: #ff1744; /* explicit; black on #ff1744 = 5.46:1 ✓ */
  --lufa-core-color-feedback-error-on-background: #000000; /* white on #ff1744 = 3.85 (fails); black = 5.46 */
  --lufa-core-color-feedback-warning-default: #ffc400;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ffc400;
  --lufa-core-color-feedback-warning-hover: #ffd740;
  --lufa-core-color-feedback-warning-active: #ffab00; /* explicit; black on #ffab00 = 11.08:1 ✓ */
  --lufa-core-color-feedback-warning-on-background: #000000; /* white on #ffc400 = 1.60 (fails); black = 13.15 */
  --lufa-core-color-feedback-info-default: #00b8ff;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #00b0ff;
  --lufa-core-color-feedback-info-hover: #40c4ff;
  --lufa-core-color-feedback-info-active: #0091ea; /* explicit; black on #0091ea = 6.24:1 ✓ */
  --lufa-core-color-feedback-info-on-background: #000000; /* white on #00b8ff = 2.26 (fails); black = 9.30 */

  /* Interactive overrides
     HC page bg = #000000. Any text readable on page is also fine on dark bg-active.
     Override bg-active to #000000 so text (#ffffff) passes 21:1 on both. */
  --lufa-semantic-interactive-background-active: #000000; /* #ffffff on #000000 = 21:1 ✓ */
  --lufa-semantic-interactive-text-active: #ffffff; /* 21:1 on bg-active and page */
  --lufa-component-button-type-ghost-variant-primary-text-active: #00ccff;

  /* Outline button border-active — fix 1:1 ratio */
  --lufa-component-button-type-outline-variant-primary-border-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-border-active: #000000;
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #ffffff; /* neutral-text-primary on #0a1929 = 17.74:1 */

  /* Outline button hover — fix border-hover on bg-hover */
  --lufa-component-button-type-outline-border-hover: #000000; /* 11.08:1 on #00ccff */
}

/* Volcano Theme — Lufa Design System */

/* Structural tokens — apply to all modes */
[data-theme='volcano'] {
  /* Shape — sharp, brutal, volcanic */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-none);
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-sm);
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-base);
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-md);

  /* Motion — fast, aggressive */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-instant);
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-fast);
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-ease-in);

  /* Typography — tightly compressed headings for brutal feel */
  --lufa-core-typography-heading-letter-spacing: var(--lufa-primitive-typography-letter-spacing-tighter);

  /* Shadows — tinted deep-red */
  --lufa-semantic-ui-shadow-small: 0px 1px 2px 0px rgba(220, 38, 38, 0.15);
  --lufa-semantic-ui-shadow-medium: 0px 2px 4px 0px rgba(220, 38, 38, 0.18);
  --lufa-semantic-ui-shadow-large: 0px 8px 16px 0px rgba(220, 38, 38, 0.22);
  --lufa-semantic-ui-shadow-extra-large: 0px 12px 24px 0px rgba(220, 38, 38, 0.28);

  /* Background pattern — diagonal crack pattern */
  --lufa-semantic-ui-background-pattern:
    repeating-linear-gradient(
      -60deg,
      rgba(220, 38, 38, 0.05) 0px,
      rgba(220, 38, 38, 0.05) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      60deg,
      rgba(220, 38, 38, 0.04) 0px,
      rgba(220, 38, 38, 0.04) 1px,
      transparent 1px,
      transparent 12px
    );
}

[data-theme='volcano'],
[data-theme='volcano'][data-mode='light'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #dc2626;
  --lufa-core-color-brand-primary-hover: #450a0a;
  --lufa-core-color-brand-primary-active: #991b1b;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #9a3412;
  --lufa-core-color-brand-secondary-hover: #7c2d12;
  --lufa-core-color-brand-secondary-active: #431407;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #9333ea;

  /* Neutral */
  --lufa-core-color-neutral-background: #fffafa;
  --lufa-core-color-neutral-surface-default: #fef2f2;
  --lufa-core-color-neutral-surface-hover: #fee2e2;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #fef2f2;
  --lufa-core-color-neutral-border-default: #ef4444;
  --lufa-core-color-neutral-border-strong: #dc2626;
  --lufa-core-color-neutral-text-primary: #450a0a;
  --lufa-core-color-neutral-text-secondary: #7f1d1d;
  --lufa-core-color-neutral-text-tertiary: #991b1b;
  --lufa-core-color-neutral-text-disabled: #fecaca;

  /* Feedback — active states (dark so white text passes 4.5:1) */
  --lufa-core-color-feedback-success-default: #15803d;
  --lufa-core-color-feedback-success-subtle: #f0fdf4;
  --lufa-core-color-feedback-success-border: #15803d;
  --lufa-core-color-feedback-success-hover: #166534;
  --lufa-core-color-feedback-success-active: #14532d;
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-default: #b91c1c;
  --lufa-core-color-feedback-error-subtle: #fef2f2;
  --lufa-core-color-feedback-error-border: #b91c1c;
  --lufa-core-color-feedback-error-hover: #991b1b;
  --lufa-core-color-feedback-error-active: #991b1b;
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-default: #b45309;
  --lufa-core-color-feedback-warning-subtle: #fffbeb;
  --lufa-core-color-feedback-warning-border: #b45309;
  --lufa-core-color-feedback-warning-hover: #92400e;
  --lufa-core-color-feedback-warning-active: #92400e;
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-default: #2563eb;
  --lufa-core-color-feedback-info-subtle: #eff6ff;
  --lufa-core-color-feedback-info-border: #2563eb;
  --lufa-core-color-feedback-info-hover: #1d4ed8;
  --lufa-core-color-feedback-info-active: #1e3a8a;
  --lufa-core-color-feedback-info-on-background: #ffffff;

  /* Semantic overrides — interactive background-active uses light pink so dark text-active passes 4.5:1 */
  --lufa-semantic-interactive-background-active: #fca5a5;

  /* Outline button active border — different value from background to satisfy 3:1 UI contrast */
  --lufa-component-button-type-outline-variant-primary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-secondary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-success-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-destructive-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-warning-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-info-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-neutral-border-active: #450a0a; /* neutral-text-primary on #fef2f2 = 14.76:1 */

  /* Glow — hot red-orange (light mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 10px rgba(220, 38, 38, 0.35);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 22px rgba(220, 38, 38, 0.6);
  --lufa-semantic-effect-glow-text-primary-default: 0 0 6px rgba(220, 38, 38, 0.25);
  --lufa-semantic-effect-glow-text-primary-hover: 0 0 14px rgba(220, 38, 38, 0.5);
}

[data-theme='volcano'][data-mode='dark'] {
  /* Brand — hover reverted to bright red; active stays pink so black text passes */
  --lufa-core-color-brand-primary-default: #f87171;
  --lufa-core-color-brand-primary-hover: #f87171;
  --lufa-core-color-brand-primary-active: #fca5a5;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #fb923c;
  --lufa-core-color-brand-secondary-hover: #fdba74;
  --lufa-core-color-brand-secondary-active: #ea580c;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #c084fc;

  /* Neutral — surface-active uses the darkest bg so bright text passes */
  --lufa-core-color-neutral-background: #0f0505;
  --lufa-core-color-neutral-surface-default: #1a0a0a;
  --lufa-core-color-neutral-surface-hover: #2d1212;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #0f0505;
  --lufa-core-color-neutral-border-default: #dc2626;
  --lufa-core-color-neutral-border-strong: #f87171;
  --lufa-core-color-neutral-text-primary: #fef2f2;
  --lufa-core-color-neutral-text-secondary: #fca5a5;
  --lufa-core-color-neutral-text-tertiary: #f87171;
  --lufa-core-color-neutral-text-disabled: #1a0a0a;

  /* Feedback — active states (bright so they show on dark surface-active)
     on-background uses black because feedback BGs are bright in dark mode */
  --lufa-core-color-feedback-success-default: #34d399;
  --lufa-core-color-feedback-success-subtle: #064e3b;
  --lufa-core-color-feedback-success-border: #34d399;
  --lufa-core-color-feedback-success-hover: #6ee7b7;
  --lufa-core-color-feedback-success-active: #34d399;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #f87171;
  --lufa-core-color-feedback-error-subtle: #450a0a;
  --lufa-core-color-feedback-error-border: #f87171;
  --lufa-core-color-feedback-error-hover: #fca5a5;
  --lufa-core-color-feedback-error-active: #f87171;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #fbbf24;
  --lufa-core-color-feedback-warning-subtle: #451a03;
  --lufa-core-color-feedback-warning-border: #fbbf24;
  --lufa-core-color-feedback-warning-hover: #fcd34d;
  --lufa-core-color-feedback-warning-active: #fbbf24;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #7eb8f7;
  --lufa-core-color-feedback-info-subtle: #1e3a8a;
  --lufa-core-color-feedback-info-border: #7eb8f7;
  --lufa-core-color-feedback-info-hover: #a5caff;
  --lufa-core-color-feedback-info-active: #7eb8f7;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Semantic overrides — interactive background-active uses dark red so bright text-active passes 4.5:1 */
  --lufa-semantic-interactive-background-active: #7f1d1d;

  /* Outline button — border-hover overridden to dark so it contrasts 3:1 with background-hover (#f87171) */
  --lufa-component-button-type-outline-border-hover: #1a0a0a;

  /* Outline button active border — different value from background to satisfy 3:1 UI contrast */
  --lufa-component-button-type-outline-variant-primary-border-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-border-active: #000000;
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #fef2f2; /* neutral-text-primary on #0f0505 = 18.38:1 */

  /* Glow — hot red-orange (dark mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 14px rgba(220, 38, 38, 0.55);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 30px rgba(220, 38, 38, 0.85);
  --lufa-semantic-effect-glow-text-primary-default: 0 0 8px rgba(220, 38, 38, 0.45);
  --lufa-semantic-effect-glow-text-primary-hover: 0 0 18px rgba(220, 38, 38, 0.75);
}

[data-theme='volcano'][data-mode='high-contrast'] {
  /* Brand — active must be bright enough for black text (4.5:1) and visible on black surface */
  --lufa-core-color-brand-primary-default: #ff3300;
  --lufa-core-color-brand-primary-hover: #ffffff;
  --lufa-core-color-brand-primary-active: #ff3300;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #ff8800;
  --lufa-core-color-brand-secondary-hover: #ffaa33;
  --lufa-core-color-brand-secondary-active: #cc6600;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #bf00ff;

  /* Neutral — surface-active = black so bright text passes */
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #000000;
  --lufa-core-color-neutral-surface-hover: #220505;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #000000;
  --lufa-core-color-neutral-border-default: #ff3300;
  --lufa-core-color-neutral-border-strong: #ff3300;
  --lufa-core-color-neutral-text-primary: #ffffff;
  --lufa-core-color-neutral-text-secondary: #ffffff;
  --lufa-core-color-neutral-text-tertiary: #ff3300;
  --lufa-core-color-neutral-text-disabled: #441111;

  /* Feedback — on-background uses black because HC feedback BGs are bright */
  --lufa-core-color-feedback-success-default: #76ff03;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #76ff03;
  --lufa-core-color-feedback-success-hover: #b2ff59;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #ff1744;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #ff1744;
  --lufa-core-color-feedback-error-hover: #ff5252;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #ff9100;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ff9100;
  --lufa-core-color-feedback-warning-hover: #ffab40;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #00b8d4;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #00b8d4;
  --lufa-core-color-feedback-info-hover: #26c6da;
  --lufa-core-color-feedback-info-active: #00b8d4;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Semantic overrides — interactive background-active uses dark red so white text-active passes 4.5:1 */
  --lufa-semantic-interactive-background-active: #440000;

  /* Action-state overrides keep black labels and borders readable while retaining vivid feedback colors. */
  --lufa-component-button-type-solid-variant-success-background-active: #76ff03;
  --lufa-component-button-type-solid-variant-destructive-background-active: #ff1744;
  --lufa-component-button-type-solid-variant-warning-background-active: #ff9100;
  --lufa-component-button-type-ghost-variant-success-text-active: #76ff03;
  --lufa-component-button-type-ghost-variant-destructive-text-active: #ff1744;
  --lufa-component-button-type-ghost-variant-warning-text-active: #ff9100;
  --lufa-component-button-type-outline-variant-success-background-active: #76ff03;
  --lufa-component-button-type-outline-variant-destructive-background-active: #ff1744;
  --lufa-component-button-type-outline-variant-warning-background-active: #ff9100;

  /* Outline button active border — different value from background to satisfy 3:1 UI contrast */
  --lufa-component-button-type-outline-variant-primary-border-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-border-active: #000000;
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #ffffff; /* neutral-text-primary on #000000 = 21:1 */

  /* Glow — disabled for accessibility */
  --lufa-semantic-effect-glow-box-primary-default: none;
  --lufa-semantic-effect-glow-box-primary-hover: none;
  --lufa-semantic-effect-glow-text-primary-default: none;
  --lufa-semantic-effect-glow-text-primary-hover: none;
}

/* Coffee Theme — Lufa Design System */

/* Structural tokens — apply to all modes */
[data-theme='coffee'] {
  /* Shape — comfortable, cozy */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-base);
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-lg);
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-xl);
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-2xl);

  /* Motion — slow, unhurried, cozy */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-normal);
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-slow);
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-ease);

  /* Shadows — tinted warm-brown */
  --lufa-semantic-ui-shadow-small: 0px 1px 2px 0px rgba(120, 53, 15, 0.15);
  --lufa-semantic-ui-shadow-medium: 0px 2px 4px 0px rgba(120, 53, 15, 0.18);
  --lufa-semantic-ui-shadow-large: 0px 8px 16px 0px rgba(120, 53, 15, 0.22);
  --lufa-semantic-ui-shadow-extra-large: 0px 12px 24px 0px rgba(120, 53, 15, 0.28);

  /* Background pattern — warm paper grain dots */
  --lufa-semantic-ui-background-pattern: radial-gradient(circle at 1px 1px, rgba(120, 53, 15, 0.07) 1px, transparent 0)
    0 0 / 18px 18px;
}

[data-theme='coffee'],
[data-theme='coffee'][data-mode='light'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #78350f;
  --lufa-core-color-brand-primary-hover: #451a03;
  --lufa-core-color-brand-primary-active: #2d1610;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #a16207;
  --lufa-core-color-brand-secondary-hover: #854d0e;
  --lufa-core-color-brand-secondary-active: #713f12;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #7c3aed;

  /* Neutral */
  --lufa-core-color-neutral-background: #faf7f2;
  --lufa-core-color-neutral-surface-default: #f3ece3;
  --lufa-core-color-neutral-surface-hover: #eadecf;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #eadecf;
  --lufa-core-color-neutral-border-default: #896e56;
  --lufa-core-color-neutral-border-strong: #78350f;
  --lufa-core-color-neutral-text-primary: #2d1610;
  --lufa-core-color-neutral-text-secondary: #451a03;
  --lufa-core-color-neutral-text-tertiary: #713f12;
  --lufa-core-color-neutral-text-disabled: #eadecf;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #15803d;
  --lufa-core-color-feedback-success-subtle: #f0fdf4;
  --lufa-core-color-feedback-success-border: #16a34a;
  --lufa-core-color-feedback-success-hover: #166534;
  --lufa-core-color-feedback-success-active: #14532d;
  --lufa-core-color-feedback-error-default: #991b1b;
  --lufa-core-color-feedback-error-subtle: #fef2f2;
  --lufa-core-color-feedback-error-border: #ef4444;
  --lufa-core-color-feedback-error-hover: #7f1d1d;
  --lufa-core-color-feedback-error-active: #7f1d1d;
  --lufa-core-color-feedback-warning-default: #b45309;
  --lufa-core-color-feedback-warning-subtle: #fffbeb;
  --lufa-core-color-feedback-warning-border: #d97706;
  --lufa-core-color-feedback-warning-hover: #92400e;
  --lufa-core-color-feedback-warning-active: #92400e;
  --lufa-core-color-feedback-info-default: #1d4ed8;
  --lufa-core-color-feedback-info-subtle: #eff6ff;
  --lufa-core-color-feedback-info-border: #2563eb;
  --lufa-core-color-feedback-info-hover: #1e40af;
  --lufa-core-color-feedback-info-active: #1e40af;
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-on-background: #ffffff;

  /* Semantic overrides — fix interactive-text-active contrast on interactive-background-active */
  --lufa-semantic-interactive-background-active: #f3ece3;

  /* Outline button — fix border-hover contrast on bg-hover (#78350f) */
  --lufa-component-button-type-outline-border-hover: #faf7f2;

  /* Outline button active — separate bg from border so border is visible */
  --lufa-component-button-type-outline-variant-primary-background-active: #faf7f2;
  --lufa-component-button-type-outline-variant-secondary-background-active: #faf7f2;
  --lufa-component-button-type-outline-variant-success-background-active: #faf7f2;
  --lufa-component-button-type-outline-variant-destructive-background-active: #faf7f2;
  --lufa-component-button-type-outline-variant-warning-background-active: #faf7f2;
  --lufa-component-button-type-outline-variant-info-background-active: #faf7f2;
  --lufa-component-button-type-outline-variant-primary-border-active: #2d1610;
  --lufa-component-button-type-outline-variant-secondary-border-active: #2d1610;
  --lufa-component-button-type-outline-variant-success-border-active: #2d1610;
  --lufa-component-button-type-outline-variant-destructive-border-active: #2d1610;
  --lufa-component-button-type-outline-variant-warning-border-active: #2d1610;
  --lufa-component-button-type-outline-variant-info-border-active: #2d1610;
  --lufa-component-button-type-outline-variant-neutral-border-active: #2d1610; /* neutral-text-primary on #eadecf = 12.84:1 */

  /* Glow — warm amber (light mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 6px rgba(180, 120, 50, 0.2);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 14px rgba(180, 120, 50, 0.4);
}

[data-theme='coffee'][data-mode='dark'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #d97706;
  --lufa-core-color-brand-primary-hover: #fbbf24;
  --lufa-core-color-brand-primary-active: #fbbf24;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #ca8a04;
  --lufa-core-color-brand-secondary-hover: #eab308;
  --lufa-core-color-brand-secondary-active: #eab308;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #a78bfa;

  /* Neutral */
  --lufa-core-color-neutral-background: #1a120b;
  --lufa-core-color-neutral-surface-default: #2d2015;
  --lufa-core-color-neutral-surface-hover: #3d2c1e;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #1a120b;
  --lufa-core-color-neutral-border-default: #a6815e;
  --lufa-core-color-neutral-border-strong: #d97706;
  --lufa-core-color-neutral-text-primary: #faf7f2;
  --lufa-core-color-neutral-text-secondary: #eadecf;
  --lufa-core-color-neutral-text-tertiary: #d6c6b4;
  --lufa-core-color-neutral-text-disabled: #2d2015;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #4ade80;
  --lufa-core-color-feedback-success-subtle: #052e16;
  --lufa-core-color-feedback-success-border: #4ade80;
  --lufa-core-color-feedback-success-hover: #86efac;
  --lufa-core-color-feedback-success-active: #86efac;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #f87171;
  --lufa-core-color-feedback-error-subtle: #450a0a;
  --lufa-core-color-feedback-error-border: #f87171;
  --lufa-core-color-feedback-error-hover: #fca5a5;
  --lufa-core-color-feedback-error-active: #f87171;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #fbbf24;
  --lufa-core-color-feedback-warning-subtle: #451a03;
  --lufa-core-color-feedback-warning-border: #fbbf24;
  --lufa-core-color-feedback-warning-hover: #fcd34d;
  --lufa-core-color-feedback-warning-active: #fbbf24;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #60a5fa;
  --lufa-core-color-feedback-info-subtle: #172554;
  --lufa-core-color-feedback-info-border: #60a5fa;
  --lufa-core-color-feedback-info-hover: #93c5fd;
  --lufa-core-color-feedback-info-active: #60a5fa;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Semantic overrides — fix interactive-text-active contrast on interactive-background-active */
  --lufa-semantic-interactive-background-active: #1a120b;

  /* Outline button — fix border-hover contrast on bg-hover (#d97706) */
  --lufa-component-button-type-outline-border-hover: #1a120b;

  /* Outline button active — separate bg from border so border is visible */
  --lufa-component-button-type-outline-variant-primary-background-active: #1a120b;
  --lufa-component-button-type-outline-variant-secondary-background-active: #1a120b;
  --lufa-component-button-type-outline-variant-success-background-active: #1a120b;
  --lufa-component-button-type-outline-variant-destructive-background-active: #1a120b;
  --lufa-component-button-type-outline-variant-warning-background-active: #1a120b;
  --lufa-component-button-type-outline-variant-info-background-active: #1a120b;
  --lufa-component-button-type-outline-variant-primary-border-active: #faf7f2;
  --lufa-component-button-type-outline-variant-secondary-border-active: #faf7f2;
  --lufa-component-button-type-outline-variant-success-border-active: #faf7f2;
  --lufa-component-button-type-outline-variant-destructive-border-active: #faf7f2;
  --lufa-component-button-type-outline-variant-warning-border-active: #faf7f2;
  --lufa-component-button-type-outline-variant-info-border-active: #faf7f2;
  --lufa-component-button-type-outline-variant-neutral-border-active: #faf7f2; /* neutral-text-primary on #1a120b = 17.31:1 */

  /* Glow — warm amber (dark mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 10px rgba(180, 120, 50, 0.35);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 20px rgba(180, 120, 50, 0.6);
}

[data-theme='coffee'][data-mode='high-contrast'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #d97706;
  --lufa-core-color-brand-primary-hover: #ca8a04;
  --lufa-core-color-brand-primary-active: #c5811a;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #ffa726;
  --lufa-core-color-brand-secondary-hover: #ca8a04;
  --lufa-core-color-brand-secondary-active: #b07015;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #bf00ff;

  /* Neutral */
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #000000;
  --lufa-core-color-neutral-surface-hover: #221100;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #221100;
  --lufa-core-color-neutral-border-default: #ca8a04;
  --lufa-core-color-neutral-border-strong: #ca8a04;
  --lufa-core-color-neutral-text-primary: #ffffff;
  --lufa-core-color-neutral-text-secondary: #ffffff;
  --lufa-core-color-neutral-text-tertiary: #ca8a04;
  --lufa-core-color-neutral-text-disabled: #331100;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #8bc34a;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #8bc34a;
  --lufa-core-color-feedback-success-hover: #aed581;
  --lufa-core-color-feedback-success-active: #00ff00;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #e53935;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #d32f2f;
  --lufa-core-color-feedback-error-hover: #e57373;
  --lufa-core-color-feedback-error-active: #ff0000;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #ffa726;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ffa726;
  --lufa-core-color-feedback-warning-hover: #ffb74d;
  --lufa-core-color-feedback-warning-active: #ffff00;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #42a5f5;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #42a5f5;
  --lufa-core-color-feedback-info-hover: #64b5f6;
  --lufa-core-color-feedback-info-active: #42a5f5;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Semantic overrides — fix interactive-text-active contrast on interactive-background-active (#c5811a) */
  --lufa-semantic-interactive-background-active: #000000;

  /* Outline button — fix border-hover contrast on bg-hover (#d97706) */
  --lufa-component-button-type-outline-border-hover: #000000;

  /* Outline button active — separate bg from border so border is visible */
  --lufa-component-button-type-outline-variant-primary-background-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-background-active: #000000;
  --lufa-component-button-type-outline-variant-success-background-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-background-active: #000000;
  --lufa-component-button-type-outline-variant-warning-background-active: #000000;
  --lufa-component-button-type-outline-variant-info-background-active: #000000;
  --lufa-component-button-type-outline-variant-primary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-secondary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-success-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-destructive-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-warning-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-info-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-neutral-border-active: #ffffff; /* neutral-text-primary on #221100 = 18.29:1 */

  /* Glow — disabled for accessibility */
  --lufa-semantic-effect-glow-box-primary-default: none;
  --lufa-semantic-effect-glow-box-primary-hover: none;
}

/* Volt Theme — Lufa Design System */

/* Structural tokens — apply to all modes */
[data-theme='volt'] {
  /* Shape — razor sharp, electric */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-none);
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-none);
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-sm);
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-base);

  /* Motion — instant snap, electric */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-instant);
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-fast);
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-linear);

  /* Typography — mono headings for tech feel */
  --lufa-core-typography-heading-font-family: var(--lufa-primitive-typography-font-family-mono);
  --lufa-core-typography-heading-letter-spacing: var(--lufa-primitive-typography-letter-spacing-wider);

  /* Shadows — tinted electric-lime */
  --lufa-semantic-ui-shadow-small: 0px 1px 2px 0px rgba(77, 124, 15, 0.18);
  --lufa-semantic-ui-shadow-medium: 0px 2px 4px 0px rgba(77, 124, 15, 0.22);
  --lufa-semantic-ui-shadow-large: 0px 8px 16px 0px rgba(77, 124, 15, 0.28);
  --lufa-semantic-ui-shadow-extra-large: 0px 12px 24px 0px rgba(77, 124, 15, 0.35);

  /* Background pattern — electric scan lines */
  --lufa-semantic-ui-background-pattern: repeating-linear-gradient(
    0deg,
    rgba(77, 124, 15, 0.06) 0px,
    rgba(77, 124, 15, 0.06) 1px,
    transparent 1px,
    transparent 8px
  );
}

[data-theme='volt'],
[data-theme='volt'][data-mode='light'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #4d7c0f;
  --lufa-core-color-brand-primary-hover: #3f6212;
  --lufa-core-color-brand-primary-active: #3f6212;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #000000;
  --lufa-core-color-brand-secondary-hover: #333333;
  --lufa-core-color-brand-secondary-active: #1a1a1a;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #7c3aed;

  /* Neutral */
  --lufa-core-color-neutral-background: #fdfdfd;
  --lufa-core-color-neutral-surface-default: #f3f4f6;
  --lufa-core-color-neutral-surface-hover: #e5e7eb;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #d1d5db;
  --lufa-core-color-neutral-border-default: #6b7280;
  --lufa-core-color-neutral-border-strong: #000000;
  --lufa-core-color-neutral-text-primary: #111827;
  --lufa-core-color-neutral-text-secondary: #374151;
  --lufa-core-color-neutral-text-tertiary: #616878;
  --lufa-core-color-neutral-text-disabled: #e5e7eb;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #15803d;
  --lufa-core-color-feedback-success-subtle: #f0fdf4;
  --lufa-core-color-feedback-success-border: #15803d;
  --lufa-core-color-feedback-success-hover: #166534;
  --lufa-core-color-feedback-success-active: #14532d;
  --lufa-core-color-feedback-error-default: #b91c1c;
  --lufa-core-color-feedback-error-subtle: #fef2f2;
  --lufa-core-color-feedback-error-border: #b91c1c;
  --lufa-core-color-feedback-error-hover: #991b1b;
  --lufa-core-color-feedback-error-active: #7f1d1d;
  --lufa-core-color-feedback-warning-default: #b45309;
  --lufa-core-color-feedback-warning-subtle: #fffbeb;
  --lufa-core-color-feedback-warning-border: #b45309;
  --lufa-core-color-feedback-warning-hover: #92400e;
  --lufa-core-color-feedback-warning-active: #713f12;
  --lufa-core-color-feedback-info-default: #2563eb;
  --lufa-core-color-feedback-info-subtle: #eff6ff;
  --lufa-core-color-feedback-info-border: #2563eb;
  --lufa-core-color-feedback-info-hover: #1d4ed8;
  --lufa-core-color-feedback-info-active: #1e3a8a;
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-on-background: #ffffff;

  /* A11y: semantic-interactive-background-active override
     (neutral-text-primary #111827 vs brand-primary-active #3f6212 = 2.51:1 — dark-on-dark unfixable via core alone) */
  --lufa-semantic-interactive-background-active: #a3e635;

  /* A11y: outline button hover border override (border must contrast >=3:1 on hover bg #4d7c0f) */
  --lufa-component-button-type-outline-border-hover: #ecfccb;

  /* A11y: outline button active border overrides (border != bg — same core token would be 1:1) */
  --lufa-component-button-type-outline-variant-primary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-secondary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-success-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-destructive-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-warning-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-info-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-neutral-border-active: #111827; /* neutral-text-primary on #d1d5db = 12.04:1 */

  /* Glow — electric yellow (light mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 10px rgba(234, 179, 8, 0.45);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 22px rgba(234, 179, 8, 0.75);
  --lufa-semantic-effect-glow-text-primary-default: 0 0 8px rgba(234, 179, 8, 0.5);
  --lufa-semantic-effect-glow-text-primary-hover: 0 0 16px rgba(234, 179, 8, 0.85);
}

[data-theme='volt'][data-mode='dark'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #a3e635;
  --lufa-core-color-brand-primary-hover: #bef264;
  --lufa-core-color-brand-primary-active: #84cc16;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #ffffff;
  --lufa-core-color-brand-secondary-hover: #ffffff;
  --lufa-core-color-brand-secondary-active: #cccccc;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #a78bfa;

  /* Neutral */
  --lufa-core-color-neutral-background: #0a0a0a;
  --lufa-core-color-neutral-surface-default: #171717;
  --lufa-core-color-neutral-surface-hover: #262626;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #1a1a1a;
  --lufa-core-color-neutral-border-default: #737373;
  --lufa-core-color-neutral-border-strong: #a3e635;
  --lufa-core-color-neutral-text-primary: #a3e635;
  --lufa-core-color-neutral-text-secondary: #ffffff;
  --lufa-core-color-neutral-text-tertiary: #888888;
  --lufa-core-color-neutral-text-disabled: #171717;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #22c55e;
  --lufa-core-color-feedback-success-subtle: #052e16;
  --lufa-core-color-feedback-success-border: #22c55e;
  --lufa-core-color-feedback-success-hover: #4ade80;
  --lufa-core-color-feedback-success-active: #4ade80;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #f87171;
  --lufa-core-color-feedback-error-subtle: #450a0a;
  --lufa-core-color-feedback-error-border: #f87171;
  --lufa-core-color-feedback-error-hover: #fca5a5;
  --lufa-core-color-feedback-error-active: #f87171;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #eab308;
  --lufa-core-color-feedback-warning-subtle: #422006;
  --lufa-core-color-feedback-warning-border: #eab308;
  --lufa-core-color-feedback-warning-hover: #facc15;
  --lufa-core-color-feedback-warning-active: #facc15;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #60a5fa;
  --lufa-core-color-feedback-info-subtle: #172554;
  --lufa-core-color-feedback-info-border: #60a5fa;
  --lufa-core-color-feedback-info-hover: #60a5fa;
  --lufa-core-color-feedback-info-active: #60a5fa;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* A11y: semantic-interactive-background-active override
     (neutral-text-primary lime #a3e635 vs brand-primary-active lime #84cc16 = 1.31:1 — unfixable via core alone) */
  --lufa-semantic-interactive-background-active: #1a1a1a;

  /* A11y: outline button hover border override (border must contrast >=3:1 on hover bg #a3e635) */
  --lufa-component-button-type-outline-border-hover: #000000;

  /* A11y: outline button active border overrides */
  --lufa-component-button-type-outline-variant-primary-border-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-border-active: #000000;
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #a3e635; /* neutral-text-primary on #1a1a1a = 11.54:1 */

  /* Glow — electric yellow (dark mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 14px rgba(234, 179, 8, 0.65);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 30px rgba(234, 179, 8, 0.95);
  --lufa-semantic-effect-glow-text-primary-default: 0 0 10px rgba(234, 179, 8, 0.7);
  --lufa-semantic-effect-glow-text-primary-hover: 0 0 20px rgba(234, 179, 8, 1);
}

[data-theme='volt'][data-mode='high-contrast'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #a3e635;
  --lufa-core-color-brand-primary-hover: #bef264;
  --lufa-core-color-brand-primary-active: #84cc16;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #ffffff;
  --lufa-core-color-brand-secondary-hover: #ffffff;
  --lufa-core-color-brand-secondary-active: #cccccc;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #bf00ff;

  /* Neutral */
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #000000;
  --lufa-core-color-neutral-surface-hover: #1a1a1a;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #000000;
  --lufa-core-color-neutral-border-default: #a3e635;
  --lufa-core-color-neutral-border-strong: #a3e635;
  --lufa-core-color-neutral-text-primary: #a3e635;
  --lufa-core-color-neutral-text-secondary: #ffffff;
  --lufa-core-color-neutral-text-tertiary: #a3e635;
  --lufa-core-color-neutral-text-disabled: #333333;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #76ff03;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #76ff03;
  --lufa-core-color-feedback-success-hover: #b2ff59;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #ff1744;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #ff1744;
  --lufa-core-color-feedback-error-hover: #ff5252;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #ffea00;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ffea00;
  --lufa-core-color-feedback-warning-hover: #fff176;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #00e5ff;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #00e5ff;
  --lufa-core-color-feedback-info-hover: #84ffff;
  --lufa-core-color-feedback-info-active: #00e5ff;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* A11y: semantic-interactive-background-active override
     (neutral-text-primary lime #a3e635 vs brand-primary-active lime #84cc16 = 1.31:1 — unfixable via core alone) */
  --lufa-semantic-interactive-background-active: #000000;

  /* Action-state overrides keep black labels and borders readable while retaining electric feedback colors. */
  --lufa-component-button-type-solid-variant-success-background-active: #76ff03;
  --lufa-component-button-type-solid-variant-destructive-background-active: #ff1744;
  --lufa-component-button-type-solid-variant-warning-background-active: #ffea00;
  --lufa-component-button-type-ghost-variant-success-text-active: #76ff03;
  --lufa-component-button-type-ghost-variant-destructive-text-active: #ff1744;
  --lufa-component-button-type-ghost-variant-warning-text-active: #ffea00;
  --lufa-component-button-type-outline-variant-success-background-active: #76ff03;
  --lufa-component-button-type-outline-variant-destructive-background-active: #ff1744;
  --lufa-component-button-type-outline-variant-warning-background-active: #ffea00;

  /* A11y: outline button hover border override (border must contrast >=3:1 on hover bg #a3e635) */
  --lufa-component-button-type-outline-border-hover: #000000;

  /* A11y: outline button active border overrides */
  --lufa-component-button-type-outline-variant-primary-border-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-border-active: #000000;
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #a3e635; /* neutral-text-primary on #000000 = 13.93:1 */

  /* Glow — disabled for accessibility */
  --lufa-semantic-effect-glow-box-primary-default: none;
  --lufa-semantic-effect-glow-box-primary-hover: none;
  --lufa-semantic-effect-glow-text-primary-default: none;
  --lufa-semantic-effect-glow-text-primary-hover: none;
}

/* Steampunk Theme — Lufa Design System */

/* Structural tokens — apply to all modes */
[data-theme='steampunk'] {
  /* Shape — square, industrial, no rounding */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-none);
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-none);
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-sm);
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-base);

  /* Motion — slow, mechanical, deliberate */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-normal);
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-slow);
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-linear);

  /* Typography — mono headings for mechanical feel */
  --lufa-core-typography-heading-font-family: var(--lufa-primitive-typography-font-family-mono);
  --lufa-core-typography-heading-letter-spacing: var(--lufa-primitive-typography-letter-spacing-wide);

  /* Shadows — tinted bronze-brown */
  --lufa-semantic-ui-shadow-small: 0px 1px 2px 0px rgba(139, 69, 19, 0.18);
  --lufa-semantic-ui-shadow-medium: 0px 2px 4px 0px rgba(139, 69, 19, 0.22);
  --lufa-semantic-ui-shadow-large: 0px 8px 16px 0px rgba(139, 69, 19, 0.28);
  --lufa-semantic-ui-shadow-extra-large: 0px 12px 24px 0px rgba(139, 69, 19, 0.35);

  /* Background pattern — grill (horizontal dense + vertical coarse) */
  --lufa-semantic-ui-background-pattern:
    linear-gradient(rgba(139, 69, 19, 0.07) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(139, 69, 19, 0.04) 1px, transparent 1px) 0 0 / 48px 48px;
}

[data-theme='steampunk'],
[data-theme='steampunk'][data-mode='light'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #8b4513;
  --lufa-core-color-brand-primary-hover: #7a4a1e;
  --lufa-core-color-brand-primary-active: #8b4513;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #1f5a37;
  --lufa-core-color-brand-secondary-hover: #184629;
  --lufa-core-color-brand-secondary-active: #12331c;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #7c3aed;

  /* Neutral */
  --lufa-core-color-neutral-background: #f5e6d3;
  --lufa-core-color-neutral-surface-default: #ead9c2;
  --lufa-core-color-neutral-surface-hover: #e0ccb1;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #f5e6d3;
  --lufa-core-color-neutral-border-default: #7a5a30;
  --lufa-core-color-neutral-border-strong: #7a5a30;
  --lufa-core-color-neutral-text-primary: #2c1810;
  --lufa-core-color-neutral-text-secondary: #4a2c1a;
  --lufa-core-color-neutral-text-tertiary: #6b4423;
  --lufa-core-color-neutral-text-disabled: #c4a574;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #267347;
  --lufa-core-color-feedback-success-subtle: #e8f5ee;
  --lufa-core-color-feedback-success-border: #267347;
  --lufa-core-color-feedback-success-active: #267347;
  --lufa-core-color-feedback-success-hover: #1e5938;
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-default: #b7410e;
  --lufa-core-color-feedback-error-subtle: #fbeae5;
  --lufa-core-color-feedback-error-border: #9a350c;
  --lufa-core-color-feedback-error-active: #b7410e;
  --lufa-core-color-feedback-error-hover: #9a350c;
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-default: #8a5020;
  --lufa-core-color-feedback-warning-subtle: #fbf3e8;
  --lufa-core-color-feedback-warning-border: #8a5020;
  --lufa-core-color-feedback-warning-active: #8a5020;
  --lufa-core-color-feedback-warning-hover: #7f4e22;
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-default: #5a6a77;
  --lufa-core-color-feedback-info-subtle: #f0f2f4;
  --lufa-core-color-feedback-info-border: #5a6a77;
  --lufa-core-color-feedback-info-active: #5a6a77;
  --lufa-core-color-feedback-info-hover: #4b5863;
  --lufa-core-color-feedback-info-on-background: #ffffff;

  /* Semantic overrides — interactive active bg must work with neutral-text-primary */
  --lufa-semantic-interactive-background-active: #d4924a;

  /* Component overrides — outline button border-hover contrasts against primary-default bg */
  --lufa-component-button-type-outline-border-hover: #ffffff;

  /* Component overrides — outline button border-active (border === bg at 1:1, use white) */
  --lufa-component-button-type-outline-variant-primary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-secondary-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-success-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-destructive-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-warning-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-info-border-active: #ffffff;
  --lufa-component-button-type-outline-variant-neutral-border-active: #2c1810; /* neutral-text-primary on #f5e6d3 = 13.77:1 */

  /* Glow — bronze sepia (light mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 8px rgba(180, 130, 70, 0.3);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 18px rgba(180, 130, 70, 0.55);
}

[data-theme='steampunk'][data-mode='dark'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #cd853f;
  --lufa-core-color-brand-primary-hover: #deb887;
  --lufa-core-color-brand-primary-active: #b87333;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #3cb371;
  --lufa-core-color-brand-secondary-hover: #66cdaa;
  --lufa-core-color-brand-secondary-active: #3cb371;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #a78bfa;

  /* Neutral */
  --lufa-core-color-neutral-background: #1a0f0a;
  --lufa-core-color-neutral-surface-default: #2c1810;
  --lufa-core-color-neutral-surface-hover: #3d2416;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #1a0f0a;
  --lufa-core-color-neutral-border-default: #a0632b;
  --lufa-core-color-neutral-border-strong: #b87333;
  --lufa-core-color-neutral-text-primary: #f5e6d3;
  --lufa-core-color-neutral-text-secondary: #d4c5b3;
  --lufa-core-color-neutral-text-tertiary: #b8a896;
  --lufa-core-color-neutral-text-disabled: #4a2c1a;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #3cb371;
  --lufa-core-color-feedback-success-subtle: #0d1f15;
  --lufa-core-color-feedback-success-border: #3cb371;
  --lufa-core-color-feedback-success-active: #3cb371;
  --lufa-core-color-feedback-success-hover: #66cdaa;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #e6653f;
  --lufa-core-color-feedback-error-subtle: #1f0d08;
  --lufa-core-color-feedback-error-border: #e6653f;
  --lufa-core-color-feedback-error-active: #e6653f;
  --lufa-core-color-feedback-error-hover: #f28964;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #deb887;
  --lufa-core-color-feedback-warning-subtle: #1f1a0f;
  --lufa-core-color-feedback-warning-border: #deb887;
  --lufa-core-color-feedback-warning-active: #deb887;
  --lufa-core-color-feedback-warning-hover: #f2d7a8;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #8fa6b8;
  --lufa-core-color-feedback-info-subtle: #0f1215;
  --lufa-core-color-feedback-info-border: #8fa6b8;
  --lufa-core-color-feedback-info-active: #8fa6b8;
  --lufa-core-color-feedback-info-hover: #a8bfcc;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Semantic overrides — interactive active bg must work with neutral-text-primary */
  --lufa-semantic-interactive-background-active: #3d2416;

  /* Component overrides — outline button border-hover contrasts against primary-default bg */
  --lufa-component-button-type-outline-border-hover: #000000;

  /* Component overrides — outline button border-active (border === bg at 1:1, use #000000) */
  --lufa-component-button-type-outline-variant-primary-border-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-border-active: #000000;
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #f5e6d3; /* neutral-text-primary on #1a0f0a = 15.35:1 */

  /* Glow — bronze sepia (dark mode) */
  --lufa-semantic-effect-glow-box-primary-default: 0 0 12px rgba(180, 130, 70, 0.5);
  --lufa-semantic-effect-glow-box-primary-hover: 0 0 24px rgba(180, 130, 70, 0.8);
}

[data-theme='steampunk'][data-mode='high-contrast'] {
  /* Brand */
  --lufa-core-color-brand-primary-default: #ffb347;
  --lufa-core-color-brand-primary-hover: #ffd700;
  --lufa-core-color-brand-primary-active: #cd853f;
  --lufa-core-color-brand-primary-on-background: #000000;
  --lufa-core-color-brand-secondary-default: #00fa9a;
  --lufa-core-color-brand-secondary-hover: #7fffd4;
  --lufa-core-color-brand-secondary-active: #3cb371;
  --lufa-core-color-brand-secondary-on-background: #000000;
  --lufa-core-color-brand-accent-visited: #bf00ff;

  /* Neutral */
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #0a0503;
  --lufa-core-color-neutral-surface-hover: #1a0f0a;
  --lufa-core-color-neutral-surface-raised: var(--lufa-core-color-neutral-surface-hover);
  --lufa-core-color-neutral-surface-active: #000000;
  --lufa-core-color-neutral-border-default: #ffb347;
  --lufa-core-color-neutral-border-strong: #ffd700;
  --lufa-core-color-neutral-text-primary: #ffffff;
  --lufa-core-color-neutral-text-secondary: #f5e6d3;
  --lufa-core-color-neutral-text-tertiary: #deb887;
  --lufa-core-color-neutral-text-disabled: #4a2c1a;

  /* Feedback */
  --lufa-core-color-feedback-success-default: #00fa9a;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #00fa9a;
  --lufa-core-color-feedback-success-active: #00fa9a;
  --lufa-core-color-feedback-success-hover: #7fffd4;
  --lufa-core-color-feedback-success-on-background: #000000;
  --lufa-core-color-feedback-error-default: #ff4500;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #ff4500;
  --lufa-core-color-feedback-error-active: #ff4500;
  --lufa-core-color-feedback-error-hover: #ff6347;
  --lufa-core-color-feedback-error-on-background: #000000;
  --lufa-core-color-feedback-warning-default: #ffd700;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ffd700;
  --lufa-core-color-feedback-warning-active: #ffd700;
  --lufa-core-color-feedback-warning-hover: #ffed4e;
  --lufa-core-color-feedback-warning-on-background: #000000;
  --lufa-core-color-feedback-info-default: #87ceeb;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #87ceeb;
  --lufa-core-color-feedback-info-active: #87ceeb;
  --lufa-core-color-feedback-info-hover: #b0e0e6;
  --lufa-core-color-feedback-info-on-background: #000000;

  /* Semantic overrides — interactive active bg must work with neutral-text-primary (#ffffff) */
  --lufa-semantic-interactive-background-active: #000000;

  /* Component overrides — outline button border-hover contrasts against primary-default bg */
  --lufa-component-button-type-outline-border-hover: #000000;

  /* Component overrides — outline button border-active (border === bg at 1:1, use #000000) */
  --lufa-component-button-type-outline-variant-primary-border-active: #000000;
  --lufa-component-button-type-outline-variant-secondary-border-active: #000000;
  --lufa-component-button-type-outline-variant-success-border-active: #000000;
  --lufa-component-button-type-outline-variant-destructive-border-active: #000000;
  --lufa-component-button-type-outline-variant-warning-border-active: #000000;
  --lufa-component-button-type-outline-variant-info-border-active: #000000;
  --lufa-component-button-type-outline-variant-neutral-border-active: #ffffff; /* neutral-text-primary on #000000 = 21:1 */

  /* Glow — disabled for accessibility */
  --lufa-semantic-effect-glow-box-primary-default: none;
  --lufa-semantic-effect-glow-box-primary-hover: none;
}

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --docusaurus-primary-foreground: #ffffff;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-mode='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-primary-foreground: #000000;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* High contrast mode support */
[data-mode='high-contrast'] {
  --ifm-color-primary: #0066cc;
  --ifm-color-primary-dark: #0052a3;
  --ifm-color-primary-darker: #004080;
  --ifm-color-primary-darkest: #003366;
  --ifm-color-primary-light: #3385d6;
  --ifm-color-primary-lighter: #6699e6;
  --ifm-color-primary-lightest: #99bbf0;
  --docusaurus-primary-foreground: #ffffff;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.5);
}

/* Import Lufa Design System base styles */

/* Import Lufa Design System theme variants */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#__docusaurus-base-url-issue-banner-container {
  display: none;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.skipToContent_LHdC {
  position: fixed;
  top: 1rem;
  left: 100%;
  z-index: calc(var(--ifm-z-index-fixed) + 1);
  padding: calc(var(--ifm-global-spacing) / 2) var(--ifm-global-spacing);
  color: var(--ifm-color-emphasis-900);
  background-color: var(--ifm-background-surface-color);
}

.skipToContent_LHdC:focus {
  left: 1rem;
  box-shadow: var(--ifm-global-shadow-md);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.closeButton_PrZt {
  padding: 0;
  line-height: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.content_DVZa {
  font-size: 85%;
  text-align: center;
  padding: 5px 0;
}

.content_DVZa a {
  color: inherit;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --docusaurus-announcement-bar-height: auto;
}

.announcementBar_Eqgi {
  display: flex;
  align-items: center;
  height: var(--docusaurus-announcement-bar-height);
  background-color: var(--ifm-color-white);
  color: var(--ifm-color-black);

  /*
  Unfortunately we can't make announcement bar render above the navbar
  IE need to use border-bottom instead of shadow
  See https://github.com/facebookincubator/infima/issues/275

  box-shadow: var(--ifm-global-shadow-lw);
  z-index: calc(var(--ifm-z-index-fixed) + 1);
  */
  border-bottom: 1px solid var(--ifm-color-emphasis-100);
}

html[data-announcement-bar-initially-dismissed='true'] .announcementBar_Eqgi {
  display: none;
}

.announcementBarPlaceholder_udCn {
  flex: 0 0 10px;
}

.announcementBarClose_cuRM {
  flex: 0 0 30px;
  align-self: stretch;
}

.announcementBarContent_gyjA {
  flex: 1 1 auto;
}

@media print {
  .announcementBar_Eqgi {
    display: none;
  }
}

@media (min-width: 997px) {
  :root {
    --docusaurus-announcement-bar-height: 30px;
  }

  .announcementBarPlaceholder_udCn,
  .announcementBarClose_cuRM {
    flex-basis: 50px;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.toggle_Y4Ll {
  width: 2rem;
  height: 2rem;
}

.toggleButton_C5Av {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: background var(--ifm-transition-fast);
}

.toggleButton_C5Av:hover {
  background: var(--ifm-color-emphasis-200);
}

.toggleIcon_qLPU {
  display: none;
}

[data-theme-choice='system'] .systemToggleIcon_k8kR,
[data-theme-choice='light'] .lightToggleIcon_zlNr,
[data-theme-choice='dark'] .darkToggleIcon_CdcN {
  display: initial;
}

.toggleButtonDisabled_tyNI {
  cursor: not-allowed;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.darkNavbarColorModeToggle_tiPG:hover {
  background: var(--ifm-color-gray-800);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.themedComponent_wKV2 {
  display: none;
}

[data-theme='light'] .themedComponent--light_pHUk {
  display: initial;
}

[data-theme='dark'] .themedComponent--dark_y5Qm {
  display: initial;
}

/*
JS disabled??? Show light version by default => better than showing nothing
TODO bad, but we currently always show light mode when there's no data-theme
 */
html:not([data-theme]) .themedComponent--light_pHUk {
  display: initial;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.iconExternalLink_atZz {
  margin-left: 0.3rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.dropdownNavbarItemMobile_BbMx {
  cursor: pointer;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.iconLanguage_Cz7W {
  vertical-align: text-bottom;
  margin-right: 5px;
}

.searchBar_tKDf .dropdownMenu_axPl {
  left: auto !important;
  right: 0 !important;

  background: var(--search-local-modal-background, #f5f6f7);
  border-radius: 6px;
  box-shadow: var(
    --search-local-modal-shadow,
    inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5),
    0 3px 8px 0 #555a64
  );
  margin-top: 8px;
  width: var(--search-local-modal-width, 560px);
  position: relative;

  padding: var(--search-local-spacing, 12px);
}

.searchInput_twFS:focus {
  outline: 2px solid
    var(--search-local-input-active-border-color, var(--ifm-color-primary));
  outline-offset: 0px;
}

html[data-theme="dark"] div.ask-ai,
div.ask-ai {
  --ask-ai-primary: var(--ifm-color-primary);
  --ask-ai-primary-hover: var(--ifm-color-primary-light);
  --ask-ai-foreground: var(--ifm-color-content);
  --ask-ai-border: var(--ifm-color-emphasis-300);
  --ask-ai-error: var(--ifm-color-danger);
  --ask-ai-button-bg: var(--ifm-color-emphasis-200);
}

.ask-ai {
  --ask-ai-background: var(--search-local-modal-background, #f5f6f7);
  --ask-ai-muted: var(--search-local-muted-color, #969faf);
}

html[data-theme="dark"] .ask-ai {
  --ask-ai-background: var(
    --search-local-modal-background,
    var(--ifm-background-color)
  );
  --ask-ai-muted: var(
    --search-local-muted-color,
    var(--ifm-color-secondary-darkest)
  );
}

@media not (max-width: 996px) {
  .searchBar_tKDf.searchBarLeft_fO29 .dropdownMenu_axPl {
    left: 0 !important;
    right: auto !important;
  }
}

@media (max-width: 576px) {
  .navbar__search-input:not(:focus) {
    width: 2rem;
  }

  .searchBar_tKDf .dropdownMenu_axPl {
    width: var(--search-local-modal-width-sm, 340px);
    max-width: calc(100vw - var(--ifm-navbar-padding-horizontal) * 2);
  }
}

html[data-theme="dark"] .searchBar_tKDf .dropdownMenu_axPl {
  background: var(--search-local-modal-background, var(--ifm-background-color));
  box-shadow: var(
    --search-local-modal-shadow,
    inset 1px 1px 0 0 #2c2e40,
    0 3px 8px 0 #000309
  );
}

.searchBar_tKDf .dropdownMenu_axPl .suggestion_l9QK {
  cursor: pointer;
  background: var(--search-local-hit-background, #fff);
  border-radius: 4px;
  box-shadow: var(--search-local-hit-shadow, 0 1px 3px 0 #d4d9e1);
  padding: 0 var(--search-local-spacing, 12px);
  width: 100%;

  align-items: center;
  color: var(--search-local-hit-color, #444950);
  display: flex;
  flex-direction: row;
  height: var(--search-local-hit-height, 56px);
}

html[data-theme="dark"] .dropdownMenu_axPl .suggestion_l9QK {
  background: var(--search-local-hit-background, var(--ifm-color-emphasis-100));
  box-shadow: var(--search-local-hit-shadow, none);
  color: var(--search-local-hit-color, var(--ifm-font-color-base));
}

.searchBar_tKDf .dropdownMenu_axPl .suggestion_l9QK:not(:last-child) {
  margin-bottom: 4px;
}

.searchBar_tKDf .dropdownMenu_axPl .suggestion_l9QK.cursor_F244 {
  background-color: var(
    --search-local-highlight-color,
    var(--ifm-color-primary)
  );
}

.hitTree_UR7p,
.hitIcon_OCq3,
.hitPath_lTlq,
.noResultsIcon_n3zt,
.hitFooter_bqhm a {
  color: var(--search-local-muted-color, #969faf);
}

html[data-theme="dark"] .hitTree_UR7p,
html[data-theme="dark"] .hitIcon_OCq3,
html[data-theme="dark"] .hitPath_lTlq,
html[data-theme="dark"] .noResultsIcon_n3zt {
  color: var(--search-local-muted-color, var(--ifm-color-secondary-darkest));
}

.hitTree_UR7p {
  display: flex;
  align-items: center;
}

.hitTree_UR7p > svg {
  height: var(--search-local-hit-height, 56px);
  opacity: 0.5;
  stroke-width: var(--search-local-icon-stroke-width, 1.4);
  width: 24px;
}

.hitIcon_OCq3 {
  stroke-width: var(--search-local-icon-stroke-width, 1.4);

  height: 20px;
  width: 20px;
}

.hitWrapper_ybEP {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  font-weight: 500;
  justify-content: center;
  margin: 0 8px;
  overflow-x: hidden;
  width: 80%;
}

.hitWrapper_ybEP mark {
  background: none;
  color: var(--search-local-highlight-color, var(--ifm-color-primary));
}

.hitTitle_BuJO {
  font-size: 0.9em;
}

.hitPath_lTlq {
  font-size: 0.75em;
}

.hitPath_lTlq,
.hitTitle_BuJO {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.hitAction_fBKG {
  height: 20px;
  width: 20px;
}

.hideAction_eCZq > svg {
  display: none;
}

.noResults_pjqH {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--search-local-spacing, 12px) 0;
}

.noResultsIcon_n3zt {
  margin-bottom: var(--search-local-spacing, 12px);
}

.hitFooter_bqhm {
  text-align: center;
  margin-top: var(--search-local-spacing, 12px);
  font-size: 0.85em;
}

.hitFooter_bqhm a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.cursor_F244 .hideAction_eCZq > svg {
  display: block;
}

.suggestion_l9QK.cursor_F244,
.suggestion_l9QK.cursor_F244 mark,
.suggestion_l9QK.cursor_F244 .hitTree_UR7p,
.suggestion_l9QK.cursor_F244 .hitIcon_OCq3,
.suggestion_l9QK.cursor_F244 .hitPath_lTlq {
  color: var(
    --search-local-hit-active-color,
    var(--ifm-color-white)
  ) !important;
}

.suggestion_l9QK.cursor_F244 mark {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.searchBarContainer_TRdw {
  margin-left: 16px;
}

.searchIcon_oc0C {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 1rem;
  height: 1rem;
  color: var(--ifm-navbar-search-input-color);
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 1;
}

.searchInput_twFS {
  background-image: none;
}

.searchBarContainer_TRdw .searchBarLoadingRing_s_l3 {
  display: none;
  position: absolute;
  left: 10px;
  top: 6px;
}

.searchBarContainer_TRdw .searchClearButton_Nsqp {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0;
  background: none;
  border: none;
  line-height: 1rem;
}

.navbar__search {
  position: relative;
}

.searchIndexLoading_Xxgf .navbar__search-input {
  background-image: none;
}

.searchIndexLoading_Xxgf .searchIcon_oc0C {
  display: none;
}

.searchBarContainer_TRdw.searchIndexLoading_Xxgf .searchBarLoadingRing_s_l3 {
  display: inline-block;
}

.searchHintContainer_N1aG {
  position: absolute;
  right: 10px;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  pointer-events: none;
  gap: 4px;
}

.searchHint_St_K {
  color: var(--ifm-navbar-search-input-placeholder-color);
  background-color: var(--ifm-navbar-search-input-background-color);
  border: 1px solid var(--ifm-color-emphasis-500);
  box-shadow: inset 0 -1px 0 var(--ifm-color-emphasis-500);
}

@media (max-width: 576px) {
  .searchBarContainer_TRdw:not(.focused_K3Ws) .searchClearButton_Nsqp,
  .searchHintContainer_N1aG {
    display: none;
  }
}

/* Manually make the search bar be LTR even if in RTL */
html[dir="rtl"] .searchHintContainer_N1aG {
  right: auto;
  left: 10px;
}

html[dir="rtl"] .searchBarContainer_TRdw .searchClearButton_Nsqp {
  right: auto;
  left: 0.8rem;
}

html[dir="rtl"] .searchBarContainer_TRdw .searchBarLoadingRing_s_l3 {
  left: auto;
  right: 10px;
}

html[dir="rtl"] .navbar__search-input {
  padding: 0 2.25em 0 0.5em;
}

/* For autocomplete.js only. */
.input_SUyB {
}
.hint_osu7 {
}
.suggestions_jZsS {
}
.dataset_LEEW {
}
.empty_VB4v {
}
/**/

/* https://loading.io/css/ */
.loadingRing_dEC9 {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  opacity: var(--search-local-loading-icon-opacity, 0.5);
}

.loadingRing_dEC9 div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 2px;
  border: 2px solid
    var(--search-load-loading-icon-color, var(--ifm-navbar-search-input-color));
  border-radius: 50%;
  animation: loading-ring_HuOr 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(
      --search-load-loading-icon-color,
      var(--ifm-navbar-search-input-color)
    )
    transparent transparent transparent;
}

.loadingRing_dEC9 div:nth-child(1) {
  animation-delay: -0.45s;
}

.loadingRing_dEC9 div:nth-child(2) {
  animation-delay: -0.3s;
}

.loadingRing_dEC9 div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes loading-ring_HuOr {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/*
Workaround to avoid rendering empty search container
See https://github.com/facebook/docusaurus/pull/9385
*/
.navbarSearchContainer_bhny:empty {
  display: none;
}

@media (max-width: 996px) {
  .navbarSearchContainer_bhny {
    position: absolute;
    right: var(--ifm-navbar-padding-horizontal);
  }
}

@media (min-width: 997px) {
  .navbarSearchContainer_bhny {
    padding: 0 var(--ifm-navbar-item-padding-horizontal);
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.navbarHideable_Fhfh {
  transition: transform var(--ifm-transition-fast) ease;
}

.navbarHidden_JyaU {
  transform: translate3d(0, calc(-100% - 2px), 0);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.errorBoundaryError_MceJ {
  white-space: pre-wrap;
  color: red;
}

.errorBoundaryFallback_Aa_T {
  color: red;
  padding: 0.55rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/*
Hide color mode toggle in small viewports
 */
@media (max-width: 996px) {
  .colorModeToggle_eH8p {
    display: none;
  }
}

/*
Restore some Infima style that broke with CSS Cascade Layers
See https://github.com/facebook/docusaurus/pull/11142
 */
.navbar__items--right > :last-child {
  padding-right: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.footerLogoLink_n6k7 {
  opacity: 0.5;
  transition: opacity var(--ifm-transition-fast)
    var(--ifm-transition-timing-default);
}

.footerLogoLink_n6k7:hover {
  opacity: 1;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.anchorTargetStickyNavbar_fH8S {
  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
}

.anchorTargetHideOnScrollNavbar_TIT9 {
  scroll-margin-top: 0.5rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.hash-link {
  opacity: 0;
  padding-left: 0.5rem;
  transition: opacity var(--ifm-transition-fast);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.hash-link::before {
  content: '#';
}

.hash-link:focus,
*:hover > .hash-link {
  opacity: 1;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

html,
body {
  height: 100%;
}

.mainWrapper_VrIe {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Docusaurus-specific utility class */
.docusaurus-mt-lg {
  margin-top: 3rem;
}

#__docusaurus {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.section_Hc1U {
  margin: 24px 0;
  padding: 16px;
  border: 1px solid var(--ifm-color-emphasis-200);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    var(--ifm-background-surface-color, var(--ifm-background-color)) 0%,
    var(--ifm-background-color) 100%
  );
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.header_gbTc {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.eyebrow_lfd7 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ifm-color-emphasis-600);
}

.badge_lUO4 {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ifm-color-primary-contrast-background);
  color: var(--ifm-color-primary-contrast-foreground);
  border: 1px solid var(--ifm-color-primary);
}

.tabs_Vifh {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tabList_p8tq {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tabButton_ZOVs {
  border: 1px solid var(--ifm-color-emphasis-200);
  background: var(--ifm-background-color);
  color: var(--ifm-color-content);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.tabButtonActive_PbdG {
  border: 1px solid var(--ifm-color-primary);
  background: var(--ifm-color-primary-contrast-background);
  color: var(--ifm-color-primary-contrast-foreground);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.tabButton_ZOVs:focus-visible,
.tabButtonActive_PbdG:focus-visible {
  outline: 2px solid var(--ifm-color-primary);
  outline-offset: 2px;
}

.body_gtcn {
  padding: 14px;
  border-radius: 12px;
  background: var(--ifm-background-color);
  border: 1px dashed var(--ifm-color-emphasis-200);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
}

.tag_SpPM {
  border: 1px solid var(--docusaurus-tag-list-border);
  transition: border var(--ifm-transition-fast);
}

.tag_SpPM:hover {
  --docusaurus-tag-list-border: var(--ifm-link-color);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.tagRegular_DBj7 {
  border-radius: var(--ifm-global-radius);
  padding: 0.2rem 0.5rem 0.3rem;
  font-size: 90%;
}

.tagWithCount_HcuK {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 0.5rem 0 1rem;
  border-left: 0;
}

.tagWithCount_HcuK::before,
.tagWithCount_HcuK::after {
  content: '';
  position: absolute;
  top: 50%;
  border: 1px solid var(--docusaurus-tag-list-border);
  transition: inherit;
}

.tagWithCount_HcuK::before {
  right: 100%;
  transform: translate(50%, -50%) rotate(-45deg);
  width: 1.18rem;
  height: 1.18rem;
  border-right: 0;
  border-bottom: 0;
}

.tagWithCount_HcuK::after {
  left: 0;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.tagWithCount_HcuK span {
  background: var(--ifm-color-secondary);
  color: var(--ifm-color-black);
  font-size: 0.7rem;
  line-height: 1.2;
  border-radius: var(--ifm-global-radius);
  padding: 0.1rem 0.4rem;
  margin-left: 0.3rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tags_Qybi {
  display: inline;
}

.tag_tLsb {
  margin: 0 0.4rem 0.5rem 0;
  display: inline-block;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.iconEdit_OqGv {
  margin-right: 0.3em;
  vertical-align: sub;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.lastUpdated_c7F6 {
  font-size: smaller;
  font-style: italic;
  margin-top: 0.2rem;
}

@media (min-width: 997px) {
  .lastUpdated_c7F6 {
    text-align: right;
  }
}

@media print {
  .noPrint_Zazj {
    display: none;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tocCollapsibleButton_tgE5 {
  font-size: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.8rem;
  width: 100%;
}

.tocCollapsibleButton_tgE5::after {
  content: '';
  background: var(--ifm-menu-link-sublist-icon) 50% 50% / 2rem 2rem no-repeat;
  filter: var(--ifm-menu-link-sublist-icon-filter);
  height: 1.25rem;
  width: 1.25rem;
  transform: rotate(180deg);
  transition: transform var(--ifm-transition-fast);
}

.tocCollapsibleButtonExpanded_kpt4::after {
  transform: none;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tocCollapsible_BSAg {
  background-color: var(--ifm-menu-color-background-active);
  border-radius: var(--ifm-global-radius);
  margin: 1rem 0;
}

.tocCollapsibleContent_OSAH > ul {
  border-left: none;
  border-top: 1px solid var(--ifm-color-emphasis-300);
  padding: 0.2rem 0;
  font-size: 15px;
}

.tocCollapsibleContent_OSAH ul li {
  margin: 0.4rem 0.8rem;
}

.tocCollapsibleContent_OSAH a {
  display: block;
}

.tocCollapsibleExpanded_QkEw {
  transform: none;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@media (min-width: 997px) {
  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
  .tocMobile_PFCC {
    display: none;
  }
}

@media print {
  .tocMobile_PFCC {
    display: none;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.tableOfContents_WJnJ {
  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
  overflow-y: auto;
  position: sticky;
  top: calc(var(--ifm-navbar-height) + 1rem);
}

@media (max-width: 996px) {
  .tableOfContents_WJnJ {
    display: none;
  }

  .docItemContainer_c8kE {
    padding: 0 0.3rem;
  }
}

.searchContextInput_bSP0,
.searchQueryInput_rBDo {
  border-radius: var(--ifm-global-radius);
  border: var(--ifm-global-border-width) solid
    var(--ifm-color-content-secondary);
  font-size: var(--ifm-font-size-base);
  padding: 0.5rem;
  width: 100%;
  background: var(--ifm-background-color);
  color: var(--ifm-font-color-base);
  margin-bottom: 1rem;
}

.searchResultItem_NE0K {
  padding: 1rem 0px;
  border-bottom: 1px solid rgb(223, 227, 232);
}

.searchResultItem_NE0K > h2 {
  margin-bottom: 0;
}

.searchResultItemPath_I0KR {
  color: var(--ifm-color-content-secondary);
  font-size: 0.8rem;
  margin: 0.5rem 0px 0px;
}

.searchResultItemSummary_kM_Z {
  font-style: italic;
  margin: 0.5rem 0px 0px;
}

@media only screen and (max-width: 996px) {
  .searchQueryColumn_DOZB {
    max-width: 60% !important;
  }

  .searchContextColumn_ANDp {
    max-width: 40% !important;
  }
}

@media screen and (max-width: 576px) {
  .searchQueryColumn_DOZB {
    max-width: 100% !important;
  }

  .searchContextColumn_ANDp {
    max-width: 100% !important;
    padding-left: var(--ifm-spacing-horizontal) !important;
  }
}

.features_t9lD {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  width: 100%;
}

.featureSvg_GfXr {
  height: 200px;
  width: 200px;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.codeBlockContainer_bnyP {
  background: var(--prism-background-color);
  color: var(--prism-color);
  margin-bottom: var(--ifm-leading);
  box-shadow: var(--ifm-global-shadow-lw);
  border-radius: var(--ifm-code-border-radius);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.codeBlock_Cu1Z {
  --ifm-pre-background: var(--prism-background-color);
  margin: 0;
  padding: 0;
}

.codeBlockStandalone_LVSa {
  padding: 0;
}

.codeBlockLines_KsGj {
  font: inherit;
  /* rtl:ignore */
  float: left;
  min-width: 100%;
  padding: var(--ifm-pre-padding);
}

.codeBlockLinesWithNumbering_ViMY {
  display: table;
  padding: var(--ifm-pre-padding) 0;
}

@media print {
  .codeBlockLines_KsGj {
    white-space: pre-wrap;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/* Intentionally has zero specificity, so that to be able to override
the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
:where(:root) {
  --docusaurus-highlighted-code-line-bg: rgb(72 77 91);
}

:where([data-theme='dark']) {
  --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
}

.theme-code-block-highlighted-line {
  background-color: var(--docusaurus-highlighted-code-line-bg);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.codeLine_Vey0 {
  display: table-row;
  counter-increment: line-count;
}

.codeLineNumber_rEGQ {
  display: table-cell;
  text-align: right;
  width: 1%;
  position: sticky;
  left: 0;
  padding: 0 var(--ifm-pre-padding);
  background: var(--ifm-pre-background);
  overflow-wrap: normal;
}

.codeLineNumber_rEGQ::before {
  content: counter(line-count);
  opacity: 0.4;
}

.theme-code-block-highlighted-line .codeLineNumber_rEGQ::before {
  opacity: 0.8;
}

.codeLineContent_l9Oy {
  padding-right: var(--ifm-pre-padding);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.theme-code-block:hover .copyButtonCopied_blS0 {
  opacity: 1 !important;
}

.copyButtonIcons_fcIB {
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
}

.copyButtonIcon_pEBb,
.copyButtonSuccessIcon_szEp {
  position: absolute;
  top: 0;
  left: 0;
  fill: currentColor;
  opacity: inherit;
  width: inherit;
  height: inherit;
  transition: all var(--ifm-transition-fast) ease;
}

.copyButtonSuccessIcon_szEp {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.33);
  opacity: 0;
  color: #00d600;
}

.copyButtonCopied_blS0 .copyButtonIcon_pEBb {
  transform: scale(0.33);
  opacity: 0;
}

.copyButtonCopied_blS0 .copyButtonSuccessIcon_szEp {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition-delay: 0.075s;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.wordWrapButtonIcon_t_NQ {
  width: 1.2rem;
  height: 1.2rem;
}

.wordWrapButtonEnabled_KPLm .wordWrapButtonIcon_t_NQ {
  color: var(--ifm-color-primary);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.buttonGroup_d1kW {
  display: flex;
  -moz-column-gap: 0.2rem;
       column-gap: 0.2rem;
  position: absolute;
  /* rtl:ignore */
  right: calc(var(--ifm-pre-padding) / 2);
  top: calc(var(--ifm-pre-padding) / 2);
}

.buttonGroup_d1kW button {
  display: flex;
  align-items: center;
  background: var(--prism-background-color);
  color: var(--prism-color);
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: var(--ifm-global-radius);
  padding: 0.4rem;
  line-height: 0;
  transition: opacity var(--ifm-transition-fast) ease-in-out;
  opacity: 0;
}

.buttonGroup_d1kW button:focus-visible,
.buttonGroup_d1kW button:hover {
  opacity: 1 !important;
}

.theme-code-block:hover .buttonGroup_d1kW button {
  opacity: 0.4;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.codeBlockContent_snPF {
  position: relative;
  /* rtl:ignore */
  direction: ltr;
  border-radius: inherit;
}

.codeBlockTitle_iwp5 {
  border-bottom: 1px solid var(--ifm-color-emphasis-300);
  font-size: var(--ifm-code-font-size);
  font-weight: 500;
  padding: 0.75rem var(--ifm-pre-padding);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.codeBlockTitle_iwp5 + .codeBlockContent_snPF .codeBlock_bV3_ {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.playgroundContainer_ntqx {
  margin-bottom: var(--ifm-leading);
  border-radius: var(--ifm-global-radius);
  box-shadow: var(--ifm-global-shadow-lw);
  overflow: hidden;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.playgroundHeader_JUXS {
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.08rem;
  padding: 0.75rem;
  text-transform: uppercase;
  font-weight: bold;
  background: var(--ifm-color-emphasis-200);
  color: var(--ifm-color-content);
  font-size: var(--ifm-code-font-size);
}

.playgroundHeaderContent_cH9U {
  font-weight: var(--ifm-font-weight-bold);
  font-size: 0.875rem;
}

.playgroundHeaderButtons_l3mw {
  display: flex;
  gap: 0.5rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.playgroundPreview_KAAj {
  padding: 1rem;
  background-color: var(--ifm-pre-background);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.resetButton_wm5S {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: var(--ifm-global-radius);
  background: var(--ifm-button-background-color);
  color: var(--ifm-font-color-base);
  cursor: pointer;
  transition: all var(--ifm-transition-fast);
}

.resetButton_wm5S:hover {
  background: var(--ifm-color-emphasis-200);
  border-color: var(--ifm-color-emphasis-400);
}

.resetButton_wm5S:active {
  background: var(--ifm-color-emphasis-300);
}

.resetButtonIcon_Jp0N {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.playgroundEditor_RKar {
  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
    var(--ifm-font-family-monospace) !important;
  /* rtl:ignore */
  direction: ltr;
}

.playgroundEditor_RKar pre {
  border-radius: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/*
CSS variables, meant to be overridden by final theme
 */
.details_JnzH {
  --docusaurus-details-summary-arrow-size: 0.38rem;
  --docusaurus-details-transition: transform 200ms ease;
  --docusaurus-details-decoration-color: grey;
}

.details_JnzH > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding-left: 1rem;
}

/* TODO: deprecation, need to remove this after Safari will support `::marker` */
.details_JnzH > summary::-webkit-details-marker {
  display: none;
}

.details_JnzH > summary::before {
  position: absolute;
  top: 0.45rem;
  left: 0;

  /* CSS-only Arrow */
  content: '';
  border-width: var(--docusaurus-details-summary-arrow-size);
  border-style: solid;
  border-color: transparent transparent transparent
    var(--docusaurus-details-decoration-color);

  /* Arrow rotation anim */
  transform: rotate(0deg);
  transition: var(--docusaurus-details-transition);
  transform-origin: calc(var(--docusaurus-details-summary-arrow-size) / 2) 50%;
}

/* When JS disabled/failed to load: we use the open property for arrow animation: */
.details_JnzH[open]:not(.isBrowser_Evj0) > summary::before,

.details_JnzH[data-collapsed='false'].isBrowser_Evj0 > summary::before {
  transform: rotate(90deg);
}

.collapsibleContent_MS6B {
  margin-top: 1rem;
  border-top: 1px solid var(--docusaurus-details-decoration-color);
  padding-top: 1rem;
}

.collapsibleContent_MS6B p:last-child {
  margin-bottom: 0;
}

.details_JnzH > summary > p:last-child {
  margin-bottom: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.details_B8wm {
  --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
  margin: 0 0 var(--ifm-spacing-vertical);
  border: 1px solid var(--ifm-alert-border-color);
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.containsTaskList_mH1U {
  list-style: none;
}

:not(.containsTaskList_mH1U > li) > .containsTaskList_mH1U {
  padding-left: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.img_KKTu {
  height: auto;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.admonition__qMD {
  margin-bottom: 1em;
}

.admonitionHeading_MVTw {
  font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) /
    var(--ifm-heading-line-height) var(--ifm-heading-font-family);
  text-transform: uppercase;
}

/* Heading alone without content (does not handle fragment content) */
.admonitionHeading_MVTw:not(:last-child) {
  margin-bottom: 0.3rem;
}

.admonitionHeading_MVTw code {
  text-transform: none;
}

.admonitionIcon_Qrng {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4em;
}

.admonitionIcon_Qrng svg {
  display: inline-block;
  height: 1.6em;
  width: 1.6em;
  fill: var(--ifm-alert-foreground-color);
}

.admonitionContent_Njwh > :last-child {
  margin-bottom: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.breadcrumbHomeIcon_Mbsy {
  position: relative;
  top: 1px;
  vertical-align: top;
  height: 1.1rem;
  width: 1.1rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.breadcrumbsContainer_OZsK {
  --ifm-breadcrumb-size-multiplier: 0.8;
  margin-bottom: 0.8rem;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.docItemContainer_SYxc header + *,
.docItemContainer_SYxc article > *:first-child {
  margin-top: 0;
}

@media (min-width: 997px) {
  .docItemCol_AYxn {
    max-width: 75% !important;
  }
}

/* ─── Hero Banner ─────────────────────────────────────────────────────────── */

.heroBanner_qdFl {
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 996px) {
  .heroBanner_qdFl {
    padding: 2rem;
  }
}

.buttons_AeoN {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ─── Statistics ──────────────────────────────────────────────────────────── */

.statistics_sm1A {
  padding: 3rem 0;
  background: var(--ifm-color-emphasis-100);
}

.statGrid_Nu0X {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .statGrid_Nu0X {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .statGrid_Nu0X {
    grid-template-columns: 1fr;
  }
}

.stat_MGbq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.statNumber_IeSW {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ifm-color-primary);
  margin: 0;
}

.statLabel_I99V {
  font-size: 1rem;
  color: var(--ifm-color-emphasis-600);
  margin: 0;
}

/* ─── Quick Start ─────────────────────────────────────────────────────────── */

.quickStart_s7sE {
  padding: 4rem 0;
}

.sectionTitle_Ut5p {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5rem;
}

.sectionSubtitle_AZuW {
  text-align: center;
  font-size: 1.1rem;
  color: var(--ifm-color-emphasis-700);
  margin-bottom: 2rem;
}

.codeBlockWrapper_UpPM {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto 2rem;
}

.quickStartTip_UJqr {
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  background: var(--ifm-color-emphasis-100);
  border-left: 4px solid var(--ifm-color-primary);
  border-radius: 0 var(--ifm-global-radius) var(--ifm-global-radius) 0;
  font-size: 0.95rem;
}

.quickStartTip_UJqr p {
  margin: 0;
}

/* ─── Sticky sub-header (theme-neutral) ─────────────────────────────────── */

.playgroundSubHeader_XHRI {
  position: sticky;
  top: var(--ifm-navbar-height);
  z-index: calc(var(--ifm-z-index-fixed) - 1);
  background: var(--ifm-navbar-background-color);
  border-bottom: 1px solid var(--ifm-toc-border-color);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.subHeaderInner_vwcQ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--ifm-container-width);
  margin: 0 auto;
  padding: 0.625rem 1.5rem;
}

/* ─── View toggle (segmented control) ───────────────────────────────────── */

.viewToggle_eV9F {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--ifm-color-emphasis-200);
  border-radius: 8px;
}

.viewToggleBtn_Ztmp {
  padding: 0.375rem 1rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ifm-color-emphasis-700);
  font-family: var(--ifm-font-family-base);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.viewToggleBtn_Ztmp:hover {
  color: var(--ifm-font-color-base);
  background: var(--ifm-color-emphasis-100);
}

.viewToggleBtnActive_Pmfq {
  background: var(--ifm-background-color);
  color: var(--ifm-font-color-base);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ─── Themed content area ────────────────────────────────────────────────── */

.playgroundContent_A3sd {
  padding: 0 0;
  min-height: calc(100vh - var(--ifm-navbar-height));
  overflow-x: hidden;
  background:
    var(--lufa-semantic-ui-background-pattern),
    linear-gradient(
      160deg,
      var(--lufa-core-color-neutral-background) 0%,
      var(--lufa-core-color-neutral-surface-default) 100%
    );
  color: var(--lufa-core-color-neutral-text-primary);
  transition: color 0.2s ease;
}

.showcase_VaCl {
  padding: 2rem 0;
}

.section_dzRU {
  padding: 2rem 0;
}

.section_dzRU:not(:last-child) {
  border-bottom: 1px solid var(--lufa-core-color-neutral-border-default);
}

.flexGrow_C4Fe {
  flex: 1;
  min-width: 0;
}

/* ─── Responsive grid utilities ─────────────────────────────────────────── */

.responsiveGrid2_w4nt,
.responsiveGrid3_r0hk,
.responsiveGrid4__8UG {
  /* responsive overrides — desktop is handled by the DS Grid component itself,
     mobile breakpoints are defined below */
  display: grid;
}

@media (max-width: 575px) {
  .responsiveGrid2_w4nt,
  .responsiveGrid3_r0hk,
  .responsiveGrid4__8UG {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 576px) and (max-width: 899px) {
  .responsiveGrid3_r0hk,
  .responsiveGrid4__8UG {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.sectionTitle_Xy_c {
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--lufa-core-color-neutral-border-default);
  color: var(--lufa-core-color-neutral-text-primary);
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .playgroundContent_A3sd {
    padding: 1rem 0;
  }

  .section_dzRU {
    padding: 1.5rem 0;
  }
}

/* ========================================
 * DEMO SITE STYLES
 * ======================================== */

.demoSite_ekk1 {
  /* sections handle their own spacing */
  display: block;
}

.demoSite_ekk1 .demoHeader_EVN2 {
  padding: 1.5rem 0;
  background: var(--lufa-core-color-neutral-surface-default);
  border-bottom: 1px solid var(--lufa-core-color-neutral-border-default);
  /* position: sticky; */
  /* top: calc(var(--ifm-navbar-height) + var(--playground-sub-header-height, 57px)); */
  z-index: 100;
  backdrop-filter: blur(8px);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.hero_ZEu2 {
  padding: 5rem 0;
  text-align: center;
}

.heroSubtitle_fOkt {
  max-width: 600px;
}

.features_zLv5 {
  padding: 5rem 0;
}

.pricing_mIs7 {
  padding: 5rem 0;
  background: var(--lufa-core-color-neutral-surface-default);
  transition: background-color 0.2s ease;
}

.newsletter_VFm0 {
  padding: 5rem 0;
}

.footer_ohhp {
  padding: 3rem 0;
  background: var(--lufa-core-color-neutral-surface-default);
  border-top: 1px solid var(--lufa-core-color-neutral-border-default);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

@media (max-width: 768px) {
  .hero_ZEu2,
  .features_zLv5,
  .pricing_mIs7,
  .newsletter_VFm0 {
    padding: 3rem 0;
  }

  .footer_ohhp {
    padding: 2rem 0;
  }

  .demoSite_ekk1 .demoHeader_EVN2 {
    padding: 1rem 0;
    /* sub-header wraps on mobile — use a larger offset or let it scroll */
    position: relative;
    top: auto;
  }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .subHeaderInner_vwcQ {
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .navLinks_a5Xe {
    display: none;
  }

  .showcase_VaCl {
    padding: 1rem 0;
  }
}

.themeSwitcher_i3lK {
  position: relative;
  display: inline-block;
}

.trigger_QrcY {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--ifm-color-emphasis-100);
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 6px;
  color: var(--ifm-font-color-base);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.trigger_QrcY:hover {
  background: var(--ifm-color-emphasis-200);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.trigger_QrcY:focus-visible,
.themeOption_N2nT:focus-visible {
  outline: 2px solid var(--ifm-color-primary);
  outline-offset: 2px;
}

.trigger_QrcY:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.icon_P_yr {
  font-size: 1.2rem;
  line-height: 1;
}

.label_dwZj {
  font-family: var(--ifm-heading-font-family, inherit);
  letter-spacing: 0.02em;
}

.arrow_IX0Z {
  font-size: 0.7rem;
  margin-left: 0.25rem;
  opacity: 0.7;
}

/* Dropdown */
.dropdown_Lkbk {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 320px;
  background: var(--ifm-navbar-background-color);
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 8px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  z-index: 1000;
  animation: dropdownSlideIn_R77l 0.2s ease;
}

@keyframes dropdownSlideIn_R77l {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section_irEl {
  margin-bottom: 0.5rem;
}

.section_irEl:last-child {
  margin-bottom: 0;
}

.sectionTitle_ATUE {
  font-family: var(--ifm-heading-font-family, inherit);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ifm-color-emphasis-600);
  margin: 0 0 0.75rem 0;
}

/* Theme Grid */
.themeGrid_Tycg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.themeOption_N2nT {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--ifm-color-emphasis-100);
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 6px;
  color: var(--ifm-font-color-base);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
  text-align: left;
}

.themeOption_N2nT:hover {
  background: var(--ifm-color-emphasis-200);
  border-color: var(--ifm-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.themeOption_N2nT.active_n8vV {
  background: var(--ifm-color-primary);
  border-color: var(--ifm-color-primary-dark);
  color: var(--docusaurus-primary-foreground, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.themeIcon_Ugew {
  font-size: 1.3rem;
  line-height: 1;
}

.themeName_pu92 {
  font-family: var(--ifm-heading-font-family, inherit);
  letter-spacing: 0.02em;
}

.selectedIndicator_Ee8B {
  margin-left: auto;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
  .dropdown_Lkbk {
    min-width: 280px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .themeGrid_Tycg {
    grid-template-columns: repeat(2, 1fr);
  }

  .label_dwZj {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trigger_QrcY,
  .themeOption_N2nT {
    transition: none;
  }

  .trigger_QrcY:hover,
  .themeOption_N2nT:hover {
    transform: none;
  }

  .dropdown_Lkbk {
    animation: none;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.backToTopButton_TJX6 {
  position: fixed;
  right: 1.3rem;
  bottom: 1.3rem;
  border-radius: 50%;
  background-color: var(--ifm-color-emphasis-200);
  width: 3rem;
  height: 3rem;
  z-index: calc(var(--ifm-z-index-fixed) - 1);
  box-shadow: var(--ifm-global-shadow-lw);
  transition: all var(--ifm-transition-fast)
    var(--ifm-transition-timing-default);
  opacity: 0;
  transform: scale(0);
  visibility: hidden;
}

.backToTopButton_TJX6::after {
  content: ' ';
  display: inline-block;
  -webkit-mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;
          mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;
  background-color: var(--ifm-color-emphasis-1000);
  width: 100%;
  height: 100%;
}

@media (hover: hover) {
  .backToTopButton_TJX6:hover {
    background-color: var(--ifm-color-emphasis-300);
  }
}

.backToTopButtonShow_ObWO {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --docusaurus-collapse-button-bg: transparent;
  --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
}

[data-theme='dark']:root {
  --docusaurus-collapse-button-bg: rgb(255 255 255 / 5%);
  --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
}

@media (min-width: 997px) {
  .collapseSidebarButton_Llma {
    display: block !important;
    background-color: var(--docusaurus-collapse-button-bg);
    height: 40px;
    position: sticky;
    bottom: 0;
    border-radius: 0;
    border: 1px solid var(--ifm-toc-border-color);
  }

  .collapseSidebarButtonIcon_Iiko {
    transform: rotate(180deg);
    margin-top: 4px;
  }

  [dir='rtl'] .collapseSidebarButtonIcon_Iiko {
    transform: rotate(0);
  }

  .collapseSidebarButton_Llma:hover,
  .collapseSidebarButton_Llma:focus {
    background-color: var(--docusaurus-collapse-button-bg-hover);
  }
}

.collapseSidebarButton_Llma {
  display: none;
  margin: 0;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.menuExternalLink_TTrE {
  align-items: center;
}

.linkLabel_AzSY {
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.categoryLink_MOee {
  overflow: hidden;
}

/*
TODO merge this logic back in Infima?
 */
.menu__link--sublist-caret::after {
  margin-left: var(--ifm-menu-link-padding-vertical);
}

.categoryLinkLabel_xiVe {
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@media (min-width: 997px) {
  .menuHtmlItem_tB55 {
    padding: var(--ifm-menu-link-padding-vertical)
      var(--ifm-menu-link-padding-horizontal);
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@media (min-width: 997px) {
  .menu_EkgJ {
    flex-grow: 1;
    padding: 0.5rem;
  }
  @supports (scrollbar-gutter: stable) {
    .menu_EkgJ {
      padding: 0.5rem 0 0.5rem 0.5rem;
      scrollbar-gutter: stable;
    }
  }

  .menuWithAnnouncementBar_qBwy {
    margin-bottom: var(--docusaurus-announcement-bar-height);
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@media (min-width: 997px) {
  .sidebar_cwWF {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: var(--ifm-navbar-height);
    width: var(--doc-sidebar-width);
  }

  .sidebarWithHideableNavbar_Ai1y {
    padding-top: 0;
  }

  .sidebarHidden_P3G7 {
    opacity: 0;
    visibility: hidden;
  }

  .sidebarLogo_avOF {
    display: flex !important;
    align-items: center;
    margin: 0 var(--ifm-navbar-padding-horizontal);
    min-height: var(--ifm-navbar-height);
    max-height: var(--ifm-navbar-height);
    color: inherit !important;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
  }

  .sidebarLogo_avOF img {
    margin-right: 0.5rem;
    height: 2rem;
  }
}

.sidebarLogo_avOF {
  display: none;
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@media (min-width: 997px) {
  .expandButton_bphB {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ifm-transition-fast) ease;
    background-color: var(--docusaurus-collapse-button-bg);
  }

  .expandButton_bphB:hover,
  .expandButton_bphB:focus {
    background-color: var(--docusaurus-collapse-button-bg-hover);
  }

  .expandButtonIcon_XZtU {
    transform: rotate(0);
  }

  [dir='rtl'] .expandButtonIcon_XZtU {
    transform: rotate(180deg);
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --doc-sidebar-width: 300px;
  --doc-sidebar-hidden-width: 30px;
}

.docSidebarContainer_OQoi {
  display: none;
}

@media (min-width: 997px) {
  .docSidebarContainer_OQoi {
    display: block;
    width: var(--doc-sidebar-width);
    margin-top: calc(-1 * var(--ifm-navbar-height));
    border-right: 1px solid var(--ifm-toc-border-color);
    will-change: width;
    transition: width var(--ifm-transition-fast) ease;
    clip-path: inset(0);
  }

  .docSidebarContainerHidden_BINR {
    width: var(--doc-sidebar-hidden-width);
    cursor: pointer;
  }

  .sidebarViewport_XrUJ {
    top: 0;
    position: sticky;
    height: 100%;
    max-height: 100vh;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.docMainContainer_ap1z {
  display: flex;
  width: 100%;
}

@media (min-width: 997px) {
  .docMainContainer_ap1z {
    flex-grow: 1;
    max-width: calc(100% - var(--doc-sidebar-width));
  }

  .docMainContainerEnhanced_F7xS {
    max-width: calc(100% - var(--doc-sidebar-hidden-width));
  }

  .docItemWrapperEnhanced_mngH {
    max-width: calc(
      var(--ifm-container-width) + var(--doc-sidebar-width)
    ) !important;
  }
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.docRoot_Uiea {
  display: flex;
  width: 100%;
}

.docsWrapper_XYCS {
  display: flex;
  flex: 1 0 auto;
}