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

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

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

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

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

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

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

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

  :where(small) {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: 1.5385;
    color: var(--color-text-secondary);
  }

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

  :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="matcha"]) to ([data-astryx-theme]) {
  :scope {
    --font-size-4xs: 0.3125rem;
    --font-size-3xs: 0.4375rem;
    --font-size-2xs: 0.5rem;
    --font-size-xs: 0.625rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5625rem;
    --font-size-2xl: 1.9375rem;
    --font-size-3xl: 2.4375rem;
    --font-size-4xl: 3.0625rem;
    --font-size-5xl: 3.8125rem;
    --text-heading-1-size: var(--font-size-2xl);
    --text-heading-1-weight: var(--font-weight-semibold);
    --text-heading-1-leading: 1.4194;
    --text-heading-2-size: var(--font-size-xl);
    --text-heading-2-weight: var(--font-weight-semibold);
    --text-heading-2-leading: 1.44;
    --text-heading-3-size: var(--font-size-lg);
    --text-heading-3-weight: var(--font-weight-semibold);
    --text-heading-3-leading: 1.4;
    --text-heading-4-size: var(--font-size-base);
    --text-heading-4-weight: var(--font-weight-semibold);
    --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.6;
    --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.2459;
    --text-display-2-size: var(--font-size-4xl);
    --text-display-2-weight: var(--font-weight-normal);
    --text-display-2-leading: 1.2245;
    --text-display-3-size: var(--font-size-3xl);
    --text-display-3-weight: var(--font-weight-normal);
    --text-display-3-leading: 1.2308;
    --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: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-heading: "Playwrite US Trad", Georgia, "Times New Roman", Times, serif;
    --font-family-code: "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace;
    --color-syntax-keyword: light-dark(#5a6b2a, #a8bf6a);
    --color-syntax-string: light-dark(#2e6b4a, #7bc49e);
    --color-syntax-comment: light-dark(#707E46, #707E46);
    --color-syntax-number: light-dark(#8c6b30, #d4b870);
    --color-syntax-function: light-dark(#3a5e8c, #7ba8d4);
    --color-syntax-type: light-dark(#6b4a8c, #b08ed4);
    --color-syntax-variable: light-dark(#3E481D, #C0CBA9);
    --color-syntax-operator: light-dark(#707E46, #94a468);
    --color-syntax-constant: light-dark(#8c6b30, #d4b870);
    --color-syntax-tag: light-dark(#8c3a3a, #d47a7a);
    --color-syntax-attribute: light-dark(#7c5e3a, #c4a882);
    --color-syntax-property: light-dark(#3a7c6b, #70c4b0);
    --color-syntax-punctuation: light-dark(#707E46, #5a6440);
    --color-syntax-background: light-dark(#F0F0E0, #1a1c14);
    --color-accent: light-dark(#3E481D, #C0CBA9);
    --color-accent-muted: light-dark(#3E481D14, #C0CBA920);
    --color-neutral: light-dark(#3E481D0F, #C0CBA91A);
    --color-background-surface: light-dark(#FFFFFF, #1a1c14);
    --color-background-body: light-dark(#F0F0E0, #12140e);
    --color-overlay: light-dark(#3E481D80, #3E481DCC);
    --color-overlay-hover: light-dark(#3E481D0D, #C0CBA90D);
    --color-overlay-pressed: light-dark(#3E481D1A, #C0CBA91A);
    --color-background-muted: light-dark(#F0F0E0, #3E481D);
    --color-text-primary: light-dark(#3E481D, #C0CBA9);
    --color-text-secondary: light-dark(#707E46, #94a468);
    --color-text-disabled: light-dark(#C0CBA9, #5a6440);
    --color-text-accent: light-dark(#3E481D, #C0CBA9);
    --color-on-dark: #FFFFFF;
    --color-on-light: #3E481D;
    --color-on-accent: light-dark(#FFFFFF, #3E481D);
    --color-on-success: light-dark(#FFFFFF, #3E481D);
    --color-on-error: light-dark(#FFFFFF, #3E481D);
    --color-on-warning: light-dark(#3E481D, #3E481D);
    --color-icon-accent: light-dark(#3E481D, #C0CBA9);
    --color-icon-primary: light-dark(#3E481D, #C0CBA9);
    --color-icon-secondary: light-dark(#707E46, #94a468);
    --color-icon-disabled: light-dark(#C0CBA9, #5a6440);
    --color-background-card: light-dark(#FFFFFF, #1e2016);
    --color-background-popover: light-dark(#FFFFFF, #3E481D);
    --color-background-inverted: light-dark(#3E481D, #C0CBA9);
    --color-success: light-dark(#4D9900, #6dbf2a);
    --color-success-muted: light-dark(#4D990020, #6dbf2a20);
    --color-error: light-dark(#FD0000, #ff5c5c);
    --color-error-muted: light-dark(#FD000020, #ff5c5c20);
    --color-warning: light-dark(#FFB600, #ffc940);
    --color-warning-muted: light-dark(#FFB60020, #ffc94020);
    --color-border: light-dark(#DCE3CE, #C0CBA91A);
    --color-border-emphasized: light-dark(#B7C29E, #5a6440);
    --color-skeleton: light-dark(#C0CBA9, #5a6440);
    --color-shadow: light-dark(#3E481D1A, #0000004D);
    --color-tint-hover: light-dark(black, white);
    --color-background-blue: light-dark(#3a5e8c33, #3a5e8c33);
    --color-border-blue: light-dark(#3a5e8c, #7ba8d4);
    --color-icon-blue: light-dark(#3a5e8c, #7ba8d4);
    --color-text-blue: light-dark(#2e4a6e, #8dbce0);
    --color-background-cyan: light-dark(#3a7c7c33, #3a7c7c33);
    --color-border-cyan: light-dark(#3a7c7c, #70c4c4);
    --color-icon-cyan: light-dark(#3a7c7c, #70c4c4);
    --color-text-cyan: light-dark(#2e6060, #82d4d4);
    --color-background-gray: light-dark(#707E4633, #5a644033);
    --color-border-gray: light-dark(#707E46, #707E46);
    --color-icon-gray: light-dark(#707E46, #94a468);
    --color-text-gray: light-dark(#3E481D, #C0CBA9);
    --color-background-green: light-dark(#4D990033, #6dbf2a33);
    --color-border-green: light-dark(#4D9900, #6dbf2a);
    --color-icon-green: light-dark(#4D9900, #6dbf2a);
    --color-text-green: light-dark(#3d7a00, #80d43a);
    --color-background-orange: light-dark(#c4762033, #d4903a33);
    --color-border-orange: light-dark(#c47620, #d4903a);
    --color-icon-orange: light-dark(#c47620, #d4903a);
    --color-text-orange: light-dark(#a06018, #e0a04a);
    --color-background-pink: light-dark(#c44a7033, #e07a9a33);
    --color-border-pink: light-dark(#c44a70, #e07a9a);
    --color-icon-pink: light-dark(#c44a70, #e07a9a);
    --color-text-pink: light-dark(#a03a5a, #f08aaa);
    --color-background-purple: light-dark(#6b4a8c33, #b08ed433);
    --color-border-purple: light-dark(#6b4a8c, #b08ed4);
    --color-icon-purple: light-dark(#6b4a8c, #b08ed4);
    --color-text-purple: light-dark(#553a70, #c0a0e0);
    --color-background-red: light-dark(#FD000033, #ff5c5c33);
    --color-border-red: light-dark(#FD0000, #ff5c5c);
    --color-icon-red: light-dark(#FD0000, #ff5c5c);
    --color-text-red: light-dark(#cc0000, #ff7a7a);
    --color-background-teal: light-dark(#2e6b5a33, #5ab89833);
    --color-border-teal: light-dark(#2e6b5a, #5ab898);
    --color-icon-teal: light-dark(#2e6b5a, #5ab898);
    --color-text-teal: light-dark(#245546, #6ccaaa);
    --color-background-yellow: light-dark(#FFB60033, #ffc94033);
    --color-border-yellow: light-dark(#FFB600, #ffc940);
    --color-icon-yellow: light-dark(#FFB600, #ffc940);
    --color-text-yellow: light-dark(#cc9200, #ffd960);
    --spacing-0-5: 3px;
    --spacing-1: 6px;
    --spacing-1-5: 9px;
    --spacing-2: 12px;
    --spacing-3: 18px;
    --spacing-4: 24px;
    --spacing-5: 30px;
    --spacing-6: 36px;
    --spacing-7: 42px;
    --spacing-8: 48px;
    --spacing-9: 54px;
    --spacing-10: 60px;
    --spacing-11: 66px;
    --spacing-12: 72px;
    --radius-inner: 6px;
    --radius-element: 12px;
    --radius-container: 18px;
    --radius-page: 42px;
    --size-element-sm: 36px;
    --size-element-md: 40px;
    --size-element-lg: 44px;
    --shadow-low: 0 2px 4px #3E481D0D, 0 4px 8px #3E481D1A;
    --shadow-med: 0 2px 4px #3E481D0D, 0 4px 12px #3E481D1A;
    --shadow-high: 0 4px 6px #3E481D1A, 0 12px 24px #3E481D26;
    --shadow-inset-hover: inset 0px 0px 0px 2px #3E481D30;
    --shadow-inset-selected: inset 0px 0px 0px 2px #3E481D50;
    --shadow-inset-success: inset 0px 0px 0px 2px #4D990050;
    --shadow-inset-warning: inset 0px 0px 0px 2px #FFB60050;
    --shadow-inset-error: inset 0px 0px 0px 2px #FD000050;
  }

  .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: var(--font-family-heading);
    font-size: var(--text-display-1-size);
    line-height: var(--text-display-1-leading);
  }

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

  .astryx-text.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-card {
    border-radius: var(--radius-page);
    --astryx-card-padding: var(--spacing-3);
    --_card-radius: var(--radius-page);
  }

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

  .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="matcha"]) 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);
  }
}
}