/*
 * @generated by `astryx theme build` — do not edit manually.
 * Source: src/butterTheme.ts
 * Command: astryx theme build src/butterTheme.ts --out dist/theme.css
 * Generated: 2026-07-23T00:19:19.430Z
 */

@layer reset {
@scope ([data-astryx-theme="butter"]) to ([data-astryx-theme]) {
  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-family-heading);
    color: var(--color-text-primary);
  }

  :where(h1) {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3333;
  }

  :where(h2) {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4545;
  }

  :where(h3) {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1.5556;
  }

  :where(h4) {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: 1.4286;
  }

  :where(h5) {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4545;
  }

  :where(h6) {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.7778;
  }

  :where(p) {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.4286;
    color: var(--color-text-primary);
  }

  :where(small) {
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    line-height: 1.4545;
    color: var(--color-text-secondary);
  }

  :where(code, pre) {
    font-family: var(--font-family-code);
    font-size: var(--font-size-base);
    line-height: 1.4286;
  }

  :where(hr) {
    border: none;
    border-top: 1px solid var(--color-border);
  }
}
}

@layer astryx-theme {
  :root { color-scheme: light dark; }
  html[data-theme="light"] { color-scheme: light; }
  html[data-theme="dark"] { color-scheme: dark; }

@scope ([data-astryx-theme="butter"]) to ([data-astryx-theme]) {
  :scope {
    --font-size-4xs: 0.3125rem;
    --font-size-3xs: 0.375rem;
    --font-size-2xs: 0.4375rem;
    --font-size-xs: 0.5625rem;
    --font-size-sm: 0.6875rem;
    --font-size-base: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.6875rem;
    --font-size-3xl: 2.125rem;
    --font-size-4xl: 2.6875rem;
    --font-size-5xl: 3.3125rem;
    --text-heading-1-size: var(--font-size-2xl);
    --text-heading-1-weight: var(--font-weight-semibold);
    --text-heading-1-leading: 1.3333;
    --text-heading-2-size: var(--font-size-xl);
    --text-heading-2-weight: var(--font-weight-semibold);
    --text-heading-2-leading: 1.4545;
    --text-heading-3-size: var(--font-size-lg);
    --text-heading-3-weight: var(--font-weight-bold);
    --text-heading-3-leading: 1.5556;
    --text-heading-4-size: var(--font-size-base);
    --text-heading-4-weight: var(--font-weight-bold);
    --text-heading-4-leading: 1.4286;
    --text-heading-5-size: var(--font-size-sm);
    --text-heading-5-weight: var(--font-weight-semibold);
    --text-heading-5-leading: 1.4545;
    --text-heading-6-size: var(--font-size-xs);
    --text-heading-6-weight: var(--font-weight-semibold);
    --text-heading-6-leading: 1.7778;
    --text-body-size: var(--font-size-base);
    --text-body-weight: var(--font-weight-normal);
    --text-body-leading: 1.4286;
    --text-large-size: var(--font-size-lg);
    --text-large-weight: var(--font-weight-semibold);
    --text-large-leading: 1.5556;
    --text-label-size: var(--font-size-base);
    --text-label-weight: var(--font-weight-medium);
    --text-label-leading: 1.4286;
    --text-code-size: var(--font-size-base);
    --text-code-weight: var(--font-weight-normal);
    --text-code-leading: 1.4286;
    --text-supporting-size: 12px;
    --text-supporting-weight: var(--font-weight-normal);
    --text-supporting-leading: 1.4545;
    --text-display-1-size: var(--font-size-5xl);
    --text-display-1-weight: var(--font-weight-normal);
    --text-display-1-leading: 1.283;
    --text-display-2-size: var(--font-size-4xl);
    --text-display-2-weight: var(--font-weight-normal);
    --text-display-2-leading: 1.2093;
    --text-display-3-size: var(--font-size-3xl);
    --text-display-3-weight: var(--font-weight-normal);
    --text-display-3-leading: 1.2941;
    --duration-fast-min: 95ms;
    --duration-fast: 125ms;
    --duration-fast-max: 165ms;
    --duration-medium-min: 225ms;
    --duration-medium: 300ms;
    --duration-medium-max: 400ms;
    --duration-slow-min: 525ms;
    --duration-slow: 700ms;
    --duration-slow-max: 935ms;
    --font-family-body: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-heading: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-code: "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace;
    --color-syntax-keyword: light-dark(#52237b, #ddb9f6);
    --color-syntax-string: light-dark(#004800, #a5d29d);
    --color-syntax-comment: light-dark(#605f52, #adac9e);
    --color-syntax-number: light-dark(#622e00, #f2bd81);
    --color-syntax-function: light-dark(#203a6c, #bdc5eb);
    --color-syntax-type: light-dark(#52237b, #ddb9f6);
    --color-syntax-variable: light-dark(#605f52, #adac9e);
    --color-syntax-operator: light-dark(#605f52, #adac9e);
    --color-syntax-constant: light-dark(#622e00, #f2bd81);
    --color-syntax-tag: light-dark(#6d211c, #f4b8ae);
    --color-syntax-attribute: light-dark(#413e00, #d6c957);
    --color-syntax-property: light-dark(#00482d, #94d3bb);
    --color-syntax-punctuation: light-dark(#605f52, #adac9e);
    --color-syntax-background: light-dark(#FDFBE4, #131107);
    --color-accent: light-dark(#225BFF, #FDEE8C);
    --color-accent-muted: light-dark(#225BFF33, #FDEE8C40);
    --color-neutral: light-dark(#1d1c110F, #f3f2e21A);
    --color-background-surface: light-dark(#FFFFFF, #2E2117);
    --color-background-body: light-dark(#FDFBE4, #261A13);
    --color-overlay: light-dark(#1d1c1180, #261A13cc);
    --color-overlay-hover: light-dark(#1d1c110D, #f3f2e20D);
    --color-overlay-pressed: light-dark(#1d1c111A, #f3f2e21A);
    --color-background-muted: light-dark(#f3f2e2, #3A2A1F);
    --color-text-primary: light-dark(#1d1c11, #f3f2e2);
    --color-text-secondary: light-dark(#605f52, #adac9e);
    --color-text-disabled: light-dark(#adac9e, #605f52);
    --color-text-accent: light-dark(#225BFF, #FDEE8C);
    --color-on-dark: #ffffff;
    --color-on-light: #1d1c11;
    --color-on-accent: light-dark(#ffffff, #1d1c11);
    --color-on-success: light-dark(#ccff88, #0b2e00);
    --color-on-error: light-dark(#ffe3de, #600000);
    --color-on-warning: light-dark(#ffeec3, #3b2200);
    --color-icon-accent: light-dark(#225BFF, #FDEE8C);
    --color-icon-primary: light-dark(#1d1c11, #f3f2e2);
    --color-icon-secondary: light-dark(#605f52, #adac9e);
    --color-icon-disabled: light-dark(#adac9e, #605f52);
    --color-background-card: light-dark(#FFFFFF, #3A2A1F);
    --color-background-popover: light-dark(#FFFFFF, #3A2A1F);
    --color-background-inverted: light-dark(#1d1c11, #FDFBE4);
    --color-error: light-dark(#771210, #ffb4a6);
    --color-error-muted: light-dark(#77121033, #ffb4a640);
    --color-warning: light-dark(#543700, #f7be00);
    --color-warning-muted: light-dark(#54370033, #f7be0040);
    --color-success: light-dark(#004700, #99d94b);
    --color-success-muted: light-dark(#00470033, #99d94b40);
    --color-border: light-dark(#e5e3d4, #f3f2e21A);
    --color-border-emphasized: light-dark(#C7C4B2, #939184);
    --color-skeleton: light-dark(#e5e3d4, #49473b);
    --color-shadow: light-dark(#1d1c111A, #0000004D);
    --color-tint-hover: light-dark(black, white);
    --size-element-sm: 32px;
    --size-element-md: 40px;
    --size-element-lg: 48px;
    --color-background-blue: light-dark(#dbe1ff, #dbe1ff);
    --color-border-blue: light-dark(#bdc5eb, #bdc5eb);
    --color-icon-blue: light-dark(#203a6c, #203a6c);
    --color-text-blue: light-dark(#203a6c, #203a6c);
    --color-background-cyan: light-dark(#a9eff0, #a9eff0);
    --color-border-cyan: light-dark(#8dd2d3, #8dd2d3);
    --color-icon-cyan: light-dark(#004649, #004649);
    --color-text-cyan: light-dark(#004649, #004649);
    --color-background-gray: light-dark(#f0edd4, #f0edd4);
    --color-border-gray: light-dark(#d6d3b8, #d6d3b8);
    --color-icon-gray: light-dark(#4a4732, #4a4732);
    --color-text-gray: light-dark(#4a4732, #4a4732);
    --color-background-green: light-dark(#c1efb8, #c1efb8);
    --color-border-green: light-dark(#a5d29d, #a5d29d);
    --color-icon-green: light-dark(#004800, #004800);
    --color-text-green: light-dark(#004800, #004800);
    --color-background-orange: light-dark(#ffdcb6, #ffdcb6);
    --color-border-orange: light-dark(#f2bd81, #f2bd81);
    --color-icon-orange: light-dark(#622e00, #622e00);
    --color-text-orange: light-dark(#622e00, #622e00);
    --color-background-pink: light-dark(#ffd5fb, #ffd5fb);
    --color-border-pink: light-dark(#f0b3e8, #f0b3e8);
    --color-icon-pink: light-dark(#6c0a68, #6c0a68);
    --color-text-pink: light-dark(#6c0a68, #6c0a68);
    --color-background-purple: light-dark(#f2daff, #f2daff);
    --color-border-purple: light-dark(#ddb9f6, #ddb9f6);
    --color-icon-purple: light-dark(#52237b, #52237b);
    --color-text-purple: light-dark(#52237b, #52237b);
    --color-background-red: light-dark(#ffdad3, #ffdad3);
    --color-border-red: light-dark(#f4b8ae, #f4b8ae);
    --color-icon-red: light-dark(#6d211c, #6d211c);
    --color-text-red: light-dark(#6d211c, #6d211c);
    --color-background-teal: light-dark(#b0f0d7, #b0f0d7);
    --color-border-teal: light-dark(#94d3bb, #94d3bb);
    --color-icon-teal: light-dark(#00482d, #00482d);
    --color-text-teal: light-dark(#00482d, #00482d);
    --color-background-yellow: light-dark(#feee7b, #feee7b);
    --color-border-yellow: light-dark(#d6c957, #d6c957);
    --color-icon-yellow: light-dark(#413e00, #413e00);
    --color-text-yellow: light-dark(#413e00, #413e00);
    --radius-none: 0.125rem;
    --radius-inner: 0.375rem;
    --radius-element: 0.5rem;
    --radius-container: 0.75rem;
    --radius-page: 1.5rem;
    --radius-full: 9999px;
    --shadow-low: 0 2px 4px #1d1c110D, 0 4px 8px #1d1c111A;
    --shadow-med: 0 2px 4px #1d1c110D, 0 4px 12px #1d1c111A;
    --shadow-high: 0 4px 6px #1d1c111A, 0 12px 24px #1d1c1126;
    --shadow-inset-hover: inset 0px 0px 0px 2px #79786a30;
    --shadow-inset-selected: inset 0px 0px 0px 2px #79786a50;
    --shadow-inset-success: inset 0px 0px 0px 2px #00470030;
    --shadow-inset-warning: inset 0px 0px 0px 2px #54370030;
    --shadow-inset-error: inset 0px 0px 0px 2px #77121030;
  }

  .astryx-heading.level-1 {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-1-size);
    font-weight: var(--text-heading-1-weight);
    line-height: var(--text-heading-1-leading);
  }

  .astryx-heading.level-2 {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-2-size);
    font-weight: var(--text-heading-2-weight);
    line-height: var(--text-heading-2-leading);
  }

  .astryx-heading.level-3 {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-3-size);
    font-weight: var(--text-heading-3-weight);
    line-height: var(--text-heading-3-leading);
  }

  .astryx-heading.level-4 {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-4-size);
    font-weight: var(--text-heading-4-weight);
    line-height: var(--text-heading-4-leading);
  }

  .astryx-heading.level-5 {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-5-size);
    font-weight: var(--text-heading-5-weight);
    line-height: var(--text-heading-5-leading);
  }

  .astryx-heading.level-6 {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-6-size);
    font-weight: var(--text-heading-6-weight);
    line-height: var(--text-heading-6-leading);
  }

  .astryx-text.body {
    font-family: var(--font-family-body);
    font-size: var(--text-body-size);
    line-height: var(--text-body-leading);
  }

  .astryx-text.large {
    font-family: var(--font-family-body);
    font-size: var(--text-large-size);
    line-height: var(--text-large-leading);
  }

  .astryx-text.label {
    font-family: var(--font-family-body);
    font-size: var(--text-label-size);
    line-height: var(--text-label-leading);
  }

  .astryx-text.code {
    font-family: var(--font-family-code);
    font-size: var(--text-code-size);
    line-height: var(--text-code-leading);
  }

  .astryx-text.supporting {
    font-family: var(--font-family-body);
    font-size: var(--text-supporting-size);
    line-height: var(--text-supporting-leading);
  }

  .astryx-text.display-1 {
    font-family: Sarina, "Brush Script MT", "Snell Roundhand", cursive;
    font-size: var(--text-display-1-size);
    line-height: var(--text-display-1-leading);
  }

  .astryx-text.display-2 {
    font-family: Sarina, "Brush Script MT", "Snell Roundhand", cursive;
    font-size: var(--text-display-2-size);
    line-height: var(--text-display-2-leading);
  }

  .astryx-text.display-3 {
    font-family: Sarina, "Brush Script MT", "Snell Roundhand", cursive;
    font-size: var(--text-display-3-size);
    line-height: var(--text-display-3-leading);
  }

  .astryx-top-nav-heading {
    color: light-dark(#225BFF, #FDEE8C);
    --color-text-primary: light-dark(#225BFF, #FDEE8C);
  }

  .astryx-top-nav-item {
    color: light-dark(#6E92FF, #FDEE8CCC);
  }

  .astryx-top-nav-item.selected {
    color: light-dark(#225BFF, #FDEE8C);
    background-color: transparent;
  }

  .astryx-top-nav-item.selected:hover {
    background-color: var(--color-overlay-hover);
  }

  .astryx-top-nav-item.selected:active {
    background-color: var(--color-overlay-pressed);
  }

  .astryx-button {
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-4);
  }

  .astryx-button.secondary {
    background-color: transparent;
    border-width: 1.5px;
    border-style: solid;
    border-color: light-dark(#225BFF, #FDEE8C);
    color: light-dark(#225BFF, #FDEE8C);
  }

  .astryx-button.secondary:hover {
    background-color: light-dark(#225BFF14, #FDEE8C14);
  }

  .astryx-button.ghost {
    color: light-dark(#225BFF, #FDEE8C);
  }

  .astryx-button.destructive {
    background-color: light-dark(#ffdad3, #f4b8ae);
    color: light-dark(#550000, #6d211c);
  }

  .astryx-badge {
    height: 30px;
    padding-block: 0;
    padding-inline: var(--spacing-3);
  }

  .astryx-badge.info {
    background-color: #4883fd;
    color: #ffffff;
  }

  .astryx-badge.neutral {
    background-color: #ffee7b;
    color: #225BFF;
  }

  .astryx-badge.success {
    background-color: #91D143;
    color: #1d1c11;
  }

  .astryx-badge.warning {
    background-color: #ffc502;
    color: #1d1c11;
  }

  .astryx-badge.error {
    background-color: #fc473b;
    color: #ffffff;
  }

  .astryx-banner.info {
    --color-accent-muted: #4883fd;
    --color-text-primary: #ffffff;
    --color-text-secondary: #ffffff;
    --color-accent: #ffffff;
  }

  .astryx-banner.success {
    --color-success-muted: #91D143;
    --color-text-primary: #1d1c11;
    --color-text-secondary: #1d1c11;
    --color-success: #1d1c11;
  }

  .astryx-banner.warning {
    --color-warning-muted: #ffc502;
    --color-text-primary: #1d1c11;
    --color-text-secondary: #1d1c11;
    --color-warning: #1d1c11;
  }

  .astryx-banner.error {
    --color-error-muted: #fc473b;
    --color-text-primary: #ffffff;
    --color-text-secondary: #ffffff;
    --color-error: #ffffff;
  }

  .astryx-card {
    border-radius: var(--radius-container);
    --astryx-card-padding: var(--spacing-4);
    --_card-radius: var(--radius-container);
  }

  .astryx-card.info {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.success {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.warning {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.error {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.blue {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.cyan {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.gray {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.green {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.orange {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.pink {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.purple {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.red {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.teal {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.yellow {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-card.muted {
    --color-text-primary: #1d1c11;
    --color-text-secondary: #605f52;
  }

  .astryx-section {
    --astryx-section-padding: var(--spacing-4);
  }

  .astryx-progressbar-track {
    background-color: light-dark(#e5e3d4, #725538);
  }

  .astryx-progressbar-fill.success {
    background-color: #91D143;
  }

  .astryx-progressbar-fill.warning {
    background-color: #ffc502;
  }

  .astryx-progressbar-fill.error {
    background-color: #fc473b;
  }

  .astryx-field-status.success {
    background-color: #91D143;
    color: #1d1c11;
  }

  .astryx-field-status.warning {
    background-color: #ffc502;
    color: #1d1c11;
  }

  .astryx-field-status.error {
    background-color: #fc473b;
    color: #ffffff;
  }

  .astryx-text-input {
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
    border-color: var(--color-border);
  }

  .astryx-text-input.success {
    --color-success: #91D143;
  }

  .astryx-text-input.warning {
    --color-warning: #ffc502;
  }

  .astryx-text-input.error {
    --color-error: #fc473b;
  }

  .astryx-textarea {
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
    border-color: var(--color-border);
  }

  .astryx-textarea.success {
    --color-success: #91D143;
  }

  .astryx-textarea.warning {
    --color-warning: #ffc502;
  }

  .astryx-textarea.error {
    --color-error: #fc473b;
  }

  .astryx-number-input {
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
    border-color: var(--color-border);
  }

  .astryx-number-input.success {
    --color-success: #91D143;
  }

  .astryx-number-input.warning {
    --color-warning: #ffc502;
  }

  .astryx-number-input.error {
    --color-error: #fc473b;
  }

  .astryx-date-input {
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
    border-color: var(--color-border);
  }

  .astryx-date-input.success {
    --color-success: #91D143;
  }

  .astryx-date-input.warning {
    --color-warning: #ffc502;
  }

  .astryx-date-input.error {
    --color-error: #fc473b;
  }

  .astryx-time-input {
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
    border-color: var(--color-border);
  }

  .astryx-time-input.success {
    --color-success: #91D143;
  }

  .astryx-time-input.warning {
    --color-warning: #ffc502;
  }

  .astryx-time-input.error {
    --color-error: #fc473b;
  }

  .astryx-selector {
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
    border-color: var(--color-border);
  }

  .astryx-selector.success {
    --color-success: #91D143;
  }

  .astryx-selector.warning {
    --color-warning: #ffc502;
  }

  .astryx-selector.error {
    --color-error: #fc473b;
  }

  .astryx-multi-selector {
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
    border-color: var(--color-border);
  }

  .astryx-multi-selector.success {
    --color-success: #91D143;
  }

  .astryx-multi-selector.warning {
    --color-warning: #ffc502;
  }

  .astryx-multi-selector.error {
    --color-error: #fc473b;
  }

  .astryx-typeahead {
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
    border-color: var(--color-border);
  }

  .astryx-typeahead.success {
    --color-success: #91D143;
  }

  .astryx-typeahead.warning {
    --color-warning: #ffc502;
  }

  .astryx-typeahead.error {
    --color-error: #fc473b;
  }

  .astryx-tokenizer {
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
    border-color: var(--color-border);
  }

  .astryx-tokenizer.success {
    --color-success: #91D143;
  }

  .astryx-tokenizer.warning {
    --color-warning: #ffc502;
  }

  .astryx-tokenizer.error {
    --color-error: #fc473b;
  }

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

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

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

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

  .astryx-text.disabled { color: var(--color-text-disabled); }

  .astryx-heading.disabled { color: var(--color-text-disabled); }

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

  .astryx-heading.placeholder { color: var(--color-text-secondary); }

  .astryx-text.accent { color: var(--color-text-accent); }

  .astryx-heading.accent { color: var(--color-text-accent); }
}
}

@layer astryx-theme {
@scope ([data-astryx-theme="butter"]) to ([data-astryx-theme]) {
  [data-astryx-media="dark"] {
    color-scheme: dark;
    --color-text-primary: var(--color-on-dark);
    --color-icon-primary: var(--color-on-dark);
    --color-accent: var(--color-on-dark);
  }

  [data-astryx-media="light"] {
    color-scheme: light;
    --color-text-primary: var(--color-on-light);
    --color-icon-primary: var(--color-on-light);
    --color-accent: var(--color-on-light);
  }
}
}