/*
 * @generated by `astryx theme build` — do not edit manually.
 * Source: _src/kn2p-theme.ts
 * Command: astryx theme build _src/kn2p-theme.ts --out assets/css/kn2p-theme.css
 * CLI: @astryxdesign/cli@0.7.13
 * Core: @astryxdesign/core@0.7.13
 */

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

@layer reset {
@scope ([data-astryx-theme="kn2p"]) 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="kn2p"]) to ([data-astryx-theme]) {
  :scope {
    --color-accent: light-dark(#006694, #81CFFF);
    --color-accent-muted: light-dark(color-mix(in srgb, var(--color-accent) 20%, transparent), color-mix(in srgb, var(--color-accent) 25%, transparent));
    --color-on-accent: light-dark(#FFFFFF, #00365A);
    --color-neutral: light-dark(#151C221A, #DBE4EB33);
    --color-background-surface: light-dark(#F8FDFF, #151C22);
    --color-background-body: light-dark(#E9F2FA, #091218);
    --color-overlay: light-dark(#151C2266, #151C2299);
    --color-overlay-hover: light-dark(#151C220D, #FFFFFF0D);
    --color-overlay-pressed: light-dark(#151C221A, #FFFFFF1A);
    --color-background-muted: light-dark(#151C220D, #151C2280);
    --color-text-primary: light-dark(#151C22, #DBE4EB);
    --color-text-secondary: light-dark(#3B4852, #9FADB9);
    --color-text-disabled: light-dark(#85939E, #53606A);
    --color-text-accent: var(--color-accent);
    --color-icon-accent: var(--color-accent);
    --color-icon-primary: light-dark(#151C22, #DBE4EB);
    --color-icon-secondary: light-dark(#3B4852, #9FADB9);
    --color-icon-disabled: light-dark(#85939E, #53606A);
    --color-background-card: light-dark(#F8FDFF, #151C22);
    --color-background-popover: light-dark(#F8FDFF, #2A3137);
    --color-background-inverted: light-dark(#151C22, #F8FDFF);
    --color-border: light-dark(#151C221A, #E9F2FA1A);
    --color-border-emphasized: light-dark(#85939E, #5C6A74);
    --color-skeleton: light-dark(#9FADB9, #3B4852);
    --color-track: light-dark(#9FADB9, #3B4852);
    --color-shadow: light-dark(#0000001A, #0000004D);
    --color-tint-hover: light-dark(black, white);
    --_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.5rem * 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.1875rem * 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.4375rem * 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.75rem * 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.0625rem * 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.5rem * var(--_dynamic-type-large-title, 1)), var(--_scaled-font-size-5xl));
    --font-size-4xl: var(--_scaled-font-size-4xl);
    --_scaled-font-size-5xl: calc(3rem * 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-bold);
    --text-heading-1-leading: 1.4286;
    --text-heading-2-size: var(--font-size-xl);
    --text-heading-2-weight: var(--font-weight-bold);
    --text-heading-2-leading: 1.3913;
    --text-heading-3-size: var(--font-size-lg);
    --text-heading-3-weight: var(--font-weight-bold);
    --text-heading-3-leading: 1.4737;
    --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-bold);
    --text-heading-5-leading: 1.5385;
    --text-heading-6-size: var(--font-size-xs);
    --text-heading-6-weight: var(--font-weight-bold);
    --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.4737;
    --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.25;
    --text-display-2-size: var(--font-size-4xl);
    --text-display-2-weight: var(--font-weight-normal);
    --text-display-2-leading: 1.3;
    --text-display-3-size: var(--font-size-3xl);
    --text-display-3-weight: var(--font-weight-normal);
    --text-display-3-leading: 1.2121;
    --radius-none: 0px;
    --radius-inner: 6px;
    --radius-element: 12px;
    --radius-container: 18px;
    --radius-page: 42px;
    --radius-chat: 42px;
    --radius-full: 9999px;
    --font-family-body: Inter, "Noto Sans KR", "Noto Sans JP", -apple-system, system-ui, sans-serif;
    --font-family-heading: Inter, "Noto Sans KR", "Noto Sans JP", -apple-system, system-ui, sans-serif;
    --color-text-info: light-dark(#0064E0, #2A80FE);
    --color-text-success: light-dark(#0D8626, #2A9738);
    --color-text-warning: light-dark(#916E1B, #F2C00B);
    --color-text-error: light-dark(#E3193B, #F5394F);
    --color-on-info-muted: light-dark(#0E5ECB, #619DF8);
    --color-on-success-muted: light-dark(#09731F, #48B151);
    --color-on-warning-muted: light-dark(#866408, #F2C00B);
    --color-on-error-muted: light-dark(#BE022C, #FA686E);
    --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);
  }

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