/*
 * @generated by `astryx theme build` — do not edit manually.
 * Source: src\theme\nearle.ts
 * Command: astryx theme build src\theme\nearle.ts
 * CLI: @astryxdesign/cli@0.4.5
 * Core: @astryxdesign/core@0.4.5
 */

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

  :where(h3) {
    font-size: 17px;
    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: 14px;
    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="nearle"]) to ([data-astryx-theme]) {
  :scope {
    --font-family-body: Inter, ui-sans-serif, system-ui, sans-serif;
    --font-family-heading: Sora, ui-sans-serif, system-ui, sans-serif;
    --font-family-code: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    --radius-element: 10px;
    --radius-container: 14px;
    --radius-page: 14px;
    --radius-chat: 14px;
    --text-body-size: 14px;
    --text-label-size: 14px;
    --text-large-size: 17px;
    --text-heading-3-size: 17px;
    --text-heading-2-size: 20px;
    --color-accent: light-dark(var(--color-brand), #B57FD0);
    --color-on-accent: light-dark(#FFFFFF, #1B1420);
    --color-accent-muted: light-dark(#66258218, #B57FD024);
    --color-text-accent: light-dark(var(--color-brand), #B57FD0);
    --color-icon-accent: light-dark(var(--color-brand), #B57FD0);
    --color-text-primary: light-dark(var(--color-slate-900), #ECE6F1);
    --color-text-secondary: light-dark(var(--color-slate-500), #B3A8BD);
    --color-text-disabled: light-dark(var(--color-slate-400), #85798F);
    --color-background-surface: light-dark(#FFFFFF, #1C1724);
    --color-background-body: light-dark(transparent, #14101A);
    --color-background-card: light-dark(#FFFFFF, #1C1724);
    --color-background-popover: light-dark(#FFFFFF, #241D2E);
    --color-background-muted: light-dark(var(--color-slate-100), #241D2E);
    --color-border: light-dark(var(--color-slate-200), #352C40);
    --color-border-emphasized: light-dark(var(--color-slate-300), #4A3E58);
    --color-skeleton: light-dark(var(--color-slate-100), #241D2E);
    --color-success: light-dark(#10b981, #34D399);
    --color-error: light-dark(#ef4444, #F87171);
    --color-warning: light-dark(#f59e0b, #FBBF24);
    --shadow-low: light-dark(0 2px 10px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(0, 0, 0, 0.45));
    --shadow-med: light-dark(0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 14px 40px rgba(0, 0, 0, 0.55));
    --shadow-high: light-dark(0 12px 28px -6px rgba(15, 23, 42, 0.12), 0 18px 50px rgba(0, 0, 0, 0.65));
  }
}
}

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