/*
 * @generated by `astryx theme build` — do not edit manually.
 * Source: src/stoneTheme.ts
 * Command: astryx theme build src/stoneTheme.ts --out dist/theme.css
 * CLI: @astryxdesign/cli@0.7.16
 * Core: @astryxdesign/core@0.7.16
 */

@layer reset, astryx-base, astryx-theme;

@layer reset {
@scope ([data-astryx-theme="stone"]) 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(--text-heading-1-size);
    font-weight: var(--text-heading-1-weight);
    line-height: var(--text-heading-1-leading);
  }

  :where(h2) {
    font-size: var(--text-heading-2-size);
    font-weight: var(--text-heading-2-weight);
    line-height: var(--text-heading-2-leading);
  }

  :where(h3) {
    font-size: var(--text-heading-3-size);
    font-weight: var(--text-heading-3-weight);
    line-height: var(--text-heading-3-leading);
  }

  :where(h4) {
    font-size: var(--text-heading-4-size);
    font-weight: var(--text-heading-4-weight);
    line-height: var(--text-heading-4-leading);
  }

  :where(h5) {
    font-size: var(--text-heading-5-size);
    font-weight: var(--text-heading-5-weight);
    line-height: var(--text-heading-5-leading);
  }

  :where(h6) {
    font-size: var(--text-heading-6-size);
    font-weight: var(--text-heading-6-weight);
    line-height: var(--text-heading-6-leading);
  }

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

  :where(small) {
    font-size: var(--text-supporting-size);
    font-weight: var(--text-supporting-weight);
    line-height: var(--text-supporting-leading);
    color: var(--color-text-secondary);
  }

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

  :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="stone"]) to ([data-astryx-theme]) {
  :scope {
    --_scaled-font-size-4xs: min(calc(0.3125rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-3xs));
    --font-size-4xs: var(--_scaled-font-size-4xs);
    --_scaled-font-size-3xs: min(calc(0.375rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-2xs));
    --font-size-3xs: var(--_scaled-font-size-3xs);
    --_scaled-font-size-2xs: min(calc(0.4375rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-xs));
    --font-size-2xs: var(--_scaled-font-size-2xs);
    --_scaled-font-size-xs: min(calc(0.5625rem * var(--_dynamic-type-caption1, 1)), var(--_scaled-font-size-sm));
    --font-size-xs: var(--_scaled-font-size-xs);
    --_scaled-font-size-sm: min(calc(0.6875rem * var(--_dynamic-type-footnote, 1)), var(--_scaled-font-size-base));
    --font-size-sm: var(--_scaled-font-size-sm);
    --_scaled-font-size-base: min(calc(0.875rem * var(--_dynamic-type-body, 1)), var(--_scaled-font-size-lg));
    --font-size-base: var(--_scaled-font-size-base);
    --_scaled-font-size-lg: min(calc(1.125rem * var(--_dynamic-type-title3, 1)), var(--_scaled-font-size-xl));
    --font-size-lg: var(--_scaled-font-size-lg);
    --_scaled-font-size-xl: min(calc(1.375rem * var(--_dynamic-type-title2, 1)), var(--_scaled-font-size-2xl));
    --font-size-xl: var(--_scaled-font-size-xl);
    --_scaled-font-size-2xl: min(calc(1.6875rem * var(--_dynamic-type-title1, 1)), var(--_scaled-font-size-3xl));
    --font-size-2xl: var(--_scaled-font-size-2xl);
    --_scaled-font-size-3xl: min(calc(2.125rem * var(--_dynamic-type-title1, 1)), var(--_scaled-font-size-4xl));
    --font-size-3xl: var(--_scaled-font-size-3xl);
    --_scaled-font-size-4xl: min(calc(2.6875rem * var(--_dynamic-type-large-title, 1)), var(--_scaled-font-size-5xl));
    --font-size-4xl: var(--_scaled-font-size-4xl);
    --_scaled-font-size-5xl: calc(3.3125rem * var(--_dynamic-type-large-title, 1));
    --font-size-5xl: var(--_scaled-font-size-5xl);
    --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: calc(0.75rem * var(--_dynamic-type-footnote, 1));
    --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;
    --_astryx-pre-tempo-duration-fast-min: 95ms;
    --_astryx-pre-tempo-duration-fast: 125ms;
    --_astryx-pre-tempo-duration-fast-max: 165ms;
    --_astryx-pre-tempo-duration-medium-min: 225ms;
    --_astryx-pre-tempo-duration-medium: 300ms;
    --_astryx-pre-tempo-duration-medium-max: 400ms;
    --_astryx-pre-tempo-duration-slow-min: 525ms;
    --_astryx-pre-tempo-duration-slow: 700ms;
    --_astryx-pre-tempo-duration-slow-max: 935ms;
    --_astryx-motion-tempo: 1;
    --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-heading: Montserrat, "Figtree", -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(#635a70, #b0a5c0);
    --color-syntax-string: light-dark(#40675c, #90ba8a);
    --color-syntax-comment: light-dark(#5f5f64, #ababb3);
    --color-syntax-number: light-dark(#745752, #c9a382);
    --color-syntax-function: light-dark(#516074, #9aadc7);
    --color-syntax-type: light-dark(#635a70, #b0a5c0);
    --color-syntax-variable: light-dark(#5f5f64, #ababb3);
    --color-syntax-operator: light-dark(#5f5f64, #ababb3);
    --color-syntax-constant: light-dark(#745752, #c9a382);
    --color-syntax-tag: light-dark(#745752, #c6a29c);
    --color-syntax-attribute: light-dark(#736419, #c2af6e);
    --color-syntax-property: light-dark(#40675c, #94b3a9);
    --color-syntax-punctuation: light-dark(#5f5f64, #ababb3);
    --color-syntax-background: light-dark(#f0f0f7, #101018);
    --color-syntax-added: light-dark(#d2eccf40, #b3d0af33);
    --color-syntax-removed: light-dark(#fbdad440, #e0bdb833);
    --color-syntax-diff-header: transparent;
    --color-syntax-added-marker: light-dark(#354f31, #d5e9d2);
    --color-syntax-removed-marker: light-dark(#603c37, #f7dbd7);
    --color-accent: light-dark(#25252a, #f0f0f9);
    --color-accent-muted: light-dark(#25252a14, #f0f0f920);
    --color-neutral: light-dark(#25252a0f, #f0f0f91a);
    --color-background-surface: light-dark(#ffffff, #1b1b21);
    --color-background-body: light-dark(#f0f0f7, #101018);
    --color-overlay: light-dark(#25252a80, #25252acc);
    --color-overlay-hover: light-dark(#25252a0d, #f0f0f90d);
    --color-overlay-pressed: light-dark(#25252a1a, #f0f0f91a);
    --color-background-muted: light-dark(#e2e2e8, #3a3a42);
    --color-text-primary: light-dark(#25252a, #f0f0f9);
    --color-text-secondary: light-dark(#5f5f64, #ababb3);
    --color-text-disabled: light-dark(#d4d3dd, #5e5e64);
    --color-text-accent: light-dark(#25252a, #f0f0f9);
    --color-on-dark: #ffffff;
    --color-on-light: light-dark(#25252a, #25252a);
    --color-on-accent: light-dark(#ffffff, #25252a);
    --color-on-success: light-dark(#ffffff, #1b1b21);
    --color-on-error: light-dark(#ffffff, #1b1b21);
    --color-on-warning: light-dark(#ffffff, #1b1b21);
    --color-info: light-dark(#516074, #9aadc7);
    --color-info-muted: light-dark(#d3e4fc, #2c3c52);
    --color-on-info: light-dark(#ffffff, #25252a);
    --color-text-info: light-dark(#344861, #d5e4f8);
    --color-text-success: light-dark(#354f31, #d5e9d2);
    --color-text-warning: light-dark(#524818, #f1e1b9);
    --color-text-error: light-dark(#603c37, #f7dbd7);
    --color-on-info-muted: light-dark(#344861, #d5e4f8);
    --color-on-success-muted: light-dark(#354f31, #2f412c);
    --color-on-warning-muted: light-dark(#524818, #433b1b);
    --color-on-error-muted: light-dark(#603c37, #50332e);
    --color-icon-accent: light-dark(#25252a, #f0f0f9);
    --color-icon-primary: light-dark(#25252a, #f0f0f9);
    --color-icon-secondary: light-dark(#848489, #9d9ea5);
    --color-icon-disabled: light-dark(#d4d3dd, #5e5e64);
    --color-background-card: light-dark(#ffffff, #25252a);
    --color-background-popover: light-dark(#ffffff, #302f36);
    --color-background-inverted: light-dark(#25252a, #f0f0f9);
    --color-success: light-dark(#354f31, #b3d0af);
    --color-success-muted: light-dark(#d2eccf, #b3d0af);
    --color-error: light-dark(#603c37, #e0bdb8);
    --color-error-muted: light-dark(#fbdad4, #e0bdb8);
    --color-warning: light-dark(#524818, #d9c794);
    --color-warning-muted: light-dark(#f4e1b7, #d9c794);
    --color-border: light-dark(#e2e2e8, #f0f0f91a);
    --color-border-emphasized: light-dark(#848489, #5e5e64);
    --color-skeleton: light-dark(#d4d3dd, #5e5e64);
    --color-shadow: light-dark(#25252a1a, #0000004d);
    --color-tint-hover: light-dark(#000000, #ffffff);
    --color-background-blue: light-dark(#d3e4fc, #445469);
    --color-border-blue: light-dark(#c2d6f1, #2c3c52);
    --color-icon-blue: light-dark(#344861, #d5e4f8);
    --color-text-blue: light-dark(#344861, #d5e4f8);
    --color-background-cyan: light-dark(#cbe9f0, #345761);
    --color-border-cyan: light-dark(#badbe4, #234048);
    --color-icon-cyan: light-dark(#264d57, #cfe8ee);
    --color-text-cyan: light-dark(#264d57, #cfe8ee);
    --color-background-gray: light-dark(#e2e2e8, #525159);
    --color-border-gray: light-dark(#d4d3dd, #3a3a42);
    --color-icon-gray: light-dark(#46464e, #e2e2e8);
    --color-text-gray: light-dark(#46464e, #e2e2e8);
    --color-background-green: light-dark(#d2eccf, #3e5d38);
    --color-border-green: light-dark(#bfdfbb, #2f412c);
    --color-icon-green: light-dark(#354f31, #d5e9d2);
    --color-text-green: light-dark(#354f31, #d5e9d2);
    --color-background-orange: light-dark(#ffdcbb, #684c34);
    --color-border-orange: light-dark(#f2cdaa, #4e3522);
    --color-icon-orange: light-dark(#5e3f27, #ffdcbb);
    --color-text-orange: light-dark(#5e3f27, #ffdcbb);
    --color-background-pink: light-dark(#f5d9ea, #624a59);
    --color-border-pink: light-dark(#e9cadc, #4b3242);
    --color-icon-pink: light-dark(#5a3c4f, #f2dbe8);
    --color-text-pink: light-dark(#5a3c4f, #f2dbe8);
    --color-background-purple: light-dark(#e7def5, #574e64);
    --color-border-purple: light-dark(#d9cfea, #3f374c);
    --color-icon-purple: light-dark(#4c405b, #e6def3);
    --color-text-purple: light-dark(#4c405b, #e6def3);
    --color-background-red: light-dark(#fbdad4, #684a45);
    --color-border-red: light-dark(#f0cac4, #50332e);
    --color-icon-red: light-dark(#603c37, #f7dbd7);
    --color-text-red: light-dark(#603c37, #f7dbd7);
    --color-background-teal: light-dark(#d4e8e1, #3a5b50);
    --color-border-teal: light-dark(#c3dbd2, #274239);
    --color-icon-teal: light-dark(#2c4f44, #d6e7e1);
    --color-text-teal: light-dark(#2c4f44, #d6e7e1);
    --color-background-yellow: light-dark(#f4e1b7, #615620);
    --color-border-yellow: light-dark(#e7d3a4, #433b1b);
    --color-icon-yellow: light-dark(#524818, #f1e1b9);
    --color-text-yellow: light-dark(#524818, #f1e1b9);
    --radius-none: 0px;
    --radius-inner: 0.25rem;
    --radius-element: 0.5rem;
    --radius-container: 0.75rem;
    --radius-page: 1.5rem;
    --radius-full: 9999px;
    --shadow-low: 0 2px 4px #25252a0d, 0 4px 8px #25252a1a;
    --shadow-med: 0 2px 4px #25252a0d, 0 4px 12px #25252a1a;
    --shadow-high: 0 4px 6px #25252a1a, 0 12px 24px #25252a26;
    --shadow-inset-hover: inset 0 0 0 2px #25252a30;
    --shadow-inset-selected: inset 0 0 0 2px #25252a50;
    --shadow-inset-success: inset 0 0 0 2px #84848930;
    --shadow-inset-warning: inset 0 0 0 2px #84848930;
    --shadow-inset-error: inset 0 0 0 2px #84848930;
    --color-icon-info: var(--color-text-info);
    --color-icon-success: var(--color-text-success);
    --color-icon-warning: var(--color-text-warning);
    --color-icon-error: var(--color-text-error);
    --color-border-info: var(--color-text-info);
    --color-border-success: var(--color-text-success);
    --color-border-warning: var(--color-text-warning);
    --color-border-error: var(--color-text-error);
    --duration-exit: var(--duration-fast);
  }

  :scope {
    font-family: var(--font-family-body);
  }

  .astryx-heading[data-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[data-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[data-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[data-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[data-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[data-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-heading[data-type="display-1"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-1-size);
    line-height: var(--text-display-1-leading);
  }

  .astryx-heading[data-type="display-2"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-2-size);
    line-height: var(--text-display-2-leading);
  }

  .astryx-heading[data-type="display-3"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-3-size);
    line-height: var(--text-display-3-leading);
  }

  .astryx-text[data-type="body"] {
    font-family: var(--font-family-body);
    font-size: var(--text-body-size);
    line-height: var(--text-body-leading);
  }

  .astryx-text[data-type="large"] {
    font-family: var(--font-family-body);
    font-size: var(--text-large-size);
    line-height: var(--text-large-leading);
  }

  .astryx-text[data-type="label"] {
    font-family: var(--font-family-body);
    font-size: var(--text-label-size);
    line-height: var(--text-label-leading);
  }

  .astryx-text[data-type="code"] {
    font-family: var(--font-family-code);
    font-size: var(--text-code-size);
    line-height: var(--text-code-leading);
  }

  .astryx-text[data-type="supporting"] {
    font-family: var(--font-family-body);
    font-size: var(--text-supporting-size);
    line-height: var(--text-supporting-leading);
  }

  .astryx-text[data-type="display-1"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-1-size);
    line-height: var(--text-display-1-leading);
  }

  .astryx-text[data-type="display-2"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-2-size);
    line-height: var(--text-display-2-leading);
  }

  .astryx-text[data-type="display-3"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-3-size);
    line-height: var(--text-display-3-leading);
  }

  .astryx-button {
    border-radius: var(--radius-full);
    --_button-radius: var(--radius-full);
  }

  .astryx-button[data-variant="secondary"] {
    background-color: transparent;
    border-width: 1.5px;
    border-style: solid;
    border-color: var(--color-border-emphasized);
  }

  .astryx-button[data-variant="secondary"]:hover:where(:not(:disabled,[aria-disabled="true"])) {
    background-color: var(--color-neutral);
  }

  .astryx-button[data-variant="destructive"] {
    background-color: var(--color-background-red);
    color: var(--color-text-red);
  }

  .astryx-badge[data-variant="info"] {
    background-color: var(--color-background-blue);
    color: var(--color-text-blue);
  }

  .astryx-badge[data-variant="neutral"] {
    background-color: var(--color-background-gray);
    color: var(--color-text-gray);
  }

  .astryx-badge[data-variant="success"] {
    background-color: var(--color-background-green);
    color: var(--color-text-green);
  }

  .astryx-badge[data-variant="warning"] {
    background-color: var(--color-background-yellow);
    color: var(--color-text-yellow);
  }

  .astryx-badge[data-variant="error"] {
    background-color: var(--color-background-red);
    color: var(--color-text-red);
  }

  .astryx-banner[data-status="info"] {
    --color-info-muted: var(--color-background-blue);
    --color-on-info-muted: var(--color-text-blue);
  }

  .astryx-banner[data-status="success"] {
    --color-success-muted: var(--color-background-green);
    --color-on-success-muted: var(--color-text-green);
  }

  .astryx-banner[data-status="warning"] {
    --color-warning-muted: var(--color-background-yellow);
    --color-on-warning-muted: var(--color-text-yellow);
  }

  .astryx-banner[data-status="error"] {
    --color-error-muted: var(--color-background-red);
    --color-on-error-muted: var(--color-text-red);
  }

  .astryx-progress-bar-fill[data-variant="accent"] {
    background-color: light-dark(#d3e4fc, #9aadc7);
  }

  .astryx-progress-bar-fill[data-variant="success"] {
    background-color: light-dark(#d2eccf, #90ba8a);
  }

  .astryx-progress-bar-fill[data-variant="warning"] {
    background-color: light-dark(#f4e1b7, #c2af6e);
  }

  .astryx-progress-bar-fill[data-variant="error"] {
    background-color: light-dark(#fbdad4, #c6a29c);
  }

  .astryx-progress-bar-mark[data-placement="fill"][data-variant="accent"] {
    background-color: var(--color-on-light);
  }

  .astryx-progress-bar-mark[data-placement="fill"][data-variant="success"] {
    background-color: var(--color-on-light);
  }

  .astryx-progress-bar-mark[data-placement="fill"][data-variant="warning"] {
    background-color: var(--color-on-light);
  }

  .astryx-progress-bar-mark[data-placement="fill"][data-variant="error"] {
    background-color: var(--color-on-light);
  }

  .astryx-progress-bar-track {
    background-color: var(--color-skeleton);
  }

  .astryx-switch {
    --color-background-gray: var(--color-skeleton);
  }

  .astryx-field-status[data-type="success"] {
    background-color: var(--color-background-green);
    color: var(--color-text-green);
  }

  .astryx-field-status[data-type="warning"] {
    background-color: var(--color-background-yellow);
    color: var(--color-text-yellow);
  }

  .astryx-field-status[data-type="error"] {
    background-color: var(--color-background-red);
    color: var(--color-text-red);
  }

  .astryx-text-input[data-status="success"] {
    --color-border-success: light-dark(#609757, #90ba8a);
    --color-icon-success: light-dark(#609757, #90ba8a);
  }

  .astryx-text-input[data-status="warning"] {
    --color-border-warning: light-dark(#a08c36, #c2af6e);
    --color-icon-warning: light-dark(#a08c36, #c2af6e);
  }

  .astryx-text-input[data-status="error"] {
    --color-border-error: light-dark(#a98984, #c6a29c);
    --color-icon-error: light-dark(#a98984, #c6a29c);
  }

  .astryx-text-area[data-status="success"] {
    --color-border-success: light-dark(#609757, #90ba8a);
    --color-icon-success: light-dark(#609757, #90ba8a);
  }

  .astryx-text-area[data-status="warning"] {
    --color-border-warning: light-dark(#a08c36, #c2af6e);
    --color-icon-warning: light-dark(#a08c36, #c2af6e);
  }

  .astryx-text-area[data-status="error"] {
    --color-border-error: light-dark(#a98984, #c6a29c);
    --color-icon-error: light-dark(#a98984, #c6a29c);
  }

  .astryx-number-input[data-status="success"] {
    --color-border-success: light-dark(#609757, #90ba8a);
    --color-icon-success: light-dark(#609757, #90ba8a);
  }

  .astryx-number-input[data-status="warning"] {
    --color-border-warning: light-dark(#a08c36, #c2af6e);
    --color-icon-warning: light-dark(#a08c36, #c2af6e);
  }

  .astryx-number-input[data-status="error"] {
    --color-border-error: light-dark(#a98984, #c6a29c);
    --color-icon-error: light-dark(#a98984, #c6a29c);
  }

  .astryx-date-input[data-status="success"] {
    --color-border-success: light-dark(#609757, #90ba8a);
    --color-icon-success: light-dark(#609757, #90ba8a);
  }

  .astryx-date-input[data-status="warning"] {
    --color-border-warning: light-dark(#a08c36, #c2af6e);
    --color-icon-warning: light-dark(#a08c36, #c2af6e);
  }

  .astryx-date-input[data-status="error"] {
    --color-border-error: light-dark(#a98984, #c6a29c);
    --color-icon-error: light-dark(#a98984, #c6a29c);
  }

  .astryx-time-input[data-status="success"] {
    --color-border-success: light-dark(#609757, #90ba8a);
    --color-icon-success: light-dark(#609757, #90ba8a);
  }

  .astryx-time-input[data-status="warning"] {
    --color-border-warning: light-dark(#a08c36, #c2af6e);
    --color-icon-warning: light-dark(#a08c36, #c2af6e);
  }

  .astryx-time-input[data-status="error"] {
    --color-border-error: light-dark(#a98984, #c6a29c);
    --color-icon-error: light-dark(#a98984, #c6a29c);
  }

  .astryx-selector[data-status="success"] {
    --color-border-success: light-dark(#609757, #90ba8a);
    --color-icon-success: light-dark(#609757, #90ba8a);
  }

  .astryx-selector[data-status="warning"] {
    --color-border-warning: light-dark(#a08c36, #c2af6e);
    --color-icon-warning: light-dark(#a08c36, #c2af6e);
  }

  .astryx-selector[data-status="error"] {
    --color-border-error: light-dark(#a98984, #c6a29c);
    --color-icon-error: light-dark(#a98984, #c6a29c);
  }

  .astryx-selector[data-variant="secondary"]:not(.astryx-input-group *) {
    background-color: transparent;
    border-width: 1.5px;
    border-style: solid;
    border-color: var(--color-border-emphasized);
  }

  .astryx-selector[data-variant="secondary"]:hover:not([data-disabled], [data-readonly], .astryx-input-group *):where(:not(:disabled,[aria-disabled="true"])) {
    background-color: var(--color-neutral);
  }

  .astryx-multi-selector[data-status="success"] {
    --color-border-success: light-dark(#609757, #90ba8a);
    --color-icon-success: light-dark(#609757, #90ba8a);
  }

  .astryx-multi-selector[data-status="warning"] {
    --color-border-warning: light-dark(#a08c36, #c2af6e);
    --color-icon-warning: light-dark(#a08c36, #c2af6e);
  }

  .astryx-multi-selector[data-status="error"] {
    --color-border-error: light-dark(#a98984, #c6a29c);
    --color-icon-error: light-dark(#a98984, #c6a29c);
  }

  .astryx-multi-selector[data-variant="secondary"]:not(.astryx-input-group *) {
    background-color: transparent;
    border-width: 1.5px;
    border-style: solid;
    border-color: var(--color-border-emphasized);
  }

  .astryx-multi-selector[data-variant="secondary"]:hover:not([data-disabled], [data-readonly], .astryx-input-group *):where(:not(:disabled,[aria-disabled="true"])) {
    background-color: var(--color-neutral);
  }

  .astryx-complex-selector[data-variant="secondary"] {
    background-color: transparent;
    border-width: 1.5px;
    border-style: solid;
    border-color: var(--color-border-emphasized);
  }

  .astryx-complex-selector[data-variant="secondary"]:hover:not(:has(> :is(:disabled, [aria-disabled="true"]))) {
    background-color: var(--color-neutral);
  }

  .astryx-typeahead[data-status="success"] {
    --color-border-success: light-dark(#609757, #90ba8a);
    --color-icon-success: light-dark(#609757, #90ba8a);
  }

  .astryx-typeahead[data-status="warning"] {
    --color-border-warning: light-dark(#a08c36, #c2af6e);
    --color-icon-warning: light-dark(#a08c36, #c2af6e);
  }

  .astryx-typeahead[data-status="error"] {
    --color-border-error: light-dark(#a98984, #c6a29c);
    --color-icon-error: light-dark(#a98984, #c6a29c);
  }

  .astryx-tokenizer[data-status="success"] {
    --color-border-success: light-dark(#609757, #90ba8a);
    --color-icon-success: light-dark(#609757, #90ba8a);
  }

  .astryx-tokenizer[data-status="warning"] {
    --color-border-warning: light-dark(#a08c36, #c2af6e);
    --color-icon-warning: light-dark(#a08c36, #c2af6e);
  }

  .astryx-tokenizer[data-status="error"] {
    --color-border-error: light-dark(#a98984, #c6a29c);
    --color-icon-error: light-dark(#a98984, #c6a29c);
  }

  .astryx-card {
    --astryx-card-padding: var(--spacing-3);
  }

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

  .astryx-text[data-color="primary"] { color: var(--color-text-primary); }

  .astryx-heading[data-color="primary"] { color: var(--color-text-primary); }

  .astryx-text[data-color="secondary"] { color: var(--color-text-secondary); }

  .astryx-heading[data-color="secondary"] { color: var(--color-text-secondary); }

  .astryx-text[data-color="disabled"] { color: var(--color-text-disabled); }

  .astryx-heading[data-color="disabled"] { color: var(--color-text-disabled); }

  .astryx-text[data-color="placeholder"] { color: var(--color-text-secondary); }

  .astryx-heading[data-color="placeholder"] { color: var(--color-text-secondary); }

  .astryx-text[data-color="accent"] { color: var(--color-text-accent); }

  .astryx-heading[data-color="accent"] { color: var(--color-text-accent); }

  .astryx-text[data-color="inherit"] { color: inherit; }

  .astryx-heading[data-color="inherit"] { color: inherit; }

  .astryx-text[data-size="4xs"] { font-size: var(--font-size-4xs); }

  .astryx-text[data-size="3xs"] { font-size: var(--font-size-3xs); }

  .astryx-text[data-size="2xs"] { font-size: var(--font-size-2xs); }

  .astryx-text[data-size="xsm"] { font-size: var(--font-size-xs); }

  .astryx-text[data-size="sm"] { font-size: var(--font-size-sm); }

  .astryx-text[data-size="base"] { font-size: var(--font-size-base); }

  .astryx-text[data-size="lg"] { font-size: var(--font-size-lg); }

  .astryx-text[data-size="xl"] { font-size: var(--font-size-xl); }

  .astryx-text[data-size="2xl"] { font-size: var(--font-size-2xl); }

  .astryx-text[data-size="3xl"] { font-size: var(--font-size-3xl); }

  .astryx-text[data-size="4xl"] { font-size: var(--font-size-4xl); }

  .astryx-heading[data-weight="normal"] { font-weight: var(--font-weight-normal); }

  .astryx-heading[data-weight="medium"] { font-weight: var(--font-weight-medium); }

  .astryx-heading[data-weight="semibold"] { font-weight: var(--font-weight-semibold); }

  .astryx-heading[data-weight="bold"] { font-weight: var(--font-weight-bold); }
}
}

@layer astryx-theme {
@media (width < 1024px) and (pointer: coarse) {
  @scope ([data-astryx-theme="stone"]) to ([data-astryx-theme]) {
    :scope {
    --_scaled-font-size-4xs: min(calc(0.375rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-3xs));
    --font-size-4xs: var(--_scaled-font-size-4xs);
    --_scaled-font-size-3xs: min(calc(0.4375rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-2xs));
    --font-size-3xs: var(--_scaled-font-size-3xs);
    --_scaled-font-size-2xs: min(calc(0.5625rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-xs));
    --font-size-2xs: var(--_scaled-font-size-2xs);
    --_scaled-font-size-xs: min(calc(0.6875rem * var(--_dynamic-type-caption1, 1)), var(--_scaled-font-size-sm));
    --font-size-xs: var(--_scaled-font-size-xs);
    --_scaled-font-size-sm: min(calc(0.8125rem * var(--_dynamic-type-footnote, 1)), var(--_scaled-font-size-base));
    --font-size-sm: var(--_scaled-font-size-sm);
    --_scaled-font-size-base: min(calc(1rem * var(--_dynamic-type-body, 1)), var(--_scaled-font-size-lg));
    --font-size-base: var(--_scaled-font-size-base);
    --_scaled-font-size-lg: min(calc(1.25rem * var(--_dynamic-type-title3, 1)), var(--_scaled-font-size-xl));
    --font-size-lg: var(--_scaled-font-size-lg);
    --_scaled-font-size-xl: min(calc(1.5rem * var(--_dynamic-type-title2, 1)), var(--_scaled-font-size-2xl));
    --font-size-xl: var(--_scaled-font-size-xl);
    --_scaled-font-size-2xl: min(calc(1.8125rem * var(--_dynamic-type-title1, 1)), var(--_scaled-font-size-3xl));
    --font-size-2xl: var(--_scaled-font-size-2xl);
    --_scaled-font-size-3xl: min(calc(2.25rem * var(--_dynamic-type-title1, 1)), var(--_scaled-font-size-4xl));
    --font-size-3xl: var(--_scaled-font-size-3xl);
    --_scaled-font-size-4xl: min(calc(2.75rem * var(--_dynamic-type-large-title, 1)), var(--_scaled-font-size-5xl));
    --font-size-4xl: var(--_scaled-font-size-4xl);
    --_scaled-font-size-5xl: calc(3.3125rem * var(--_dynamic-type-large-title, 1));
    --font-size-5xl: var(--_scaled-font-size-5xl);
    --text-heading-1-size: var(--font-size-2xl);
    --text-heading-1-weight: var(--font-weight-semibold);
    --text-heading-1-leading: 1.3793;
    --text-heading-2-size: var(--font-size-xl);
    --text-heading-2-weight: var(--font-weight-semibold);
    --text-heading-2-leading: 1.3333;
    --text-heading-3-size: var(--font-size-lg);
    --text-heading-3-weight: var(--font-weight-bold);
    --text-heading-3-leading: 1.4;
    --text-heading-4-size: var(--font-size-base);
    --text-heading-4-weight: var(--font-weight-bold);
    --text-heading-4-leading: 1.5;
    --text-heading-5-size: var(--font-size-sm);
    --text-heading-5-weight: var(--font-weight-semibold);
    --text-heading-5-leading: 1.5385;
    --text-heading-6-size: var(--font-size-xs);
    --text-heading-6-weight: var(--font-weight-semibold);
    --text-heading-6-leading: 1.4545;
    --text-body-size: var(--font-size-base);
    --text-body-weight: var(--font-weight-normal);
    --text-body-leading: 1.5;
    --text-large-size: var(--font-size-lg);
    --text-large-weight: var(--font-weight-semibold);
    --text-large-leading: 1.4;
    --text-label-size: var(--font-size-base);
    --text-label-weight: var(--font-weight-medium);
    --text-label-leading: 1.5;
    --text-code-size: var(--font-size-base);
    --text-code-weight: var(--font-weight-normal);
    --text-code-leading: 1.5;
    --text-supporting-size: var(--font-size-sm);
    --text-supporting-weight: var(--font-weight-normal);
    --text-supporting-leading: 1.5385;
    --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.2727;
    --text-display-3-size: var(--font-size-3xl);
    --text-display-3-weight: var(--font-weight-normal);
    --text-display-3-leading: 1.2222;
    --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-heading: Montserrat, "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-code: "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace;
  }
  }
}
}

@layer astryx-theme {
@scope ([data-astryx-theme="stone"]) 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);
  }
}
}