@import url('./ress.css');
@import url('./fonts.css');
@import url('./tokens.css');
@import url('./typography.css');
@import"./ress.css";
@import"./fonts.css";
@import"./tokens.css";
@import"./typography.css";

/* CSS reset - normalize browser defaults */

/**
 * Design System Entry Point
 *
 * This file combines all design system CSS:
 * - Generated tokens (colors, spacing, etc.)
 * - Typography context overrides (console/website)
 * - Global element styles (reset, body, headings)
 */

/*
 * Generated design tokens (emitted by `libs/ts/design-system/src/index.ts`).
 *
 * tokens.css contains every custom property including the typography subset;
 * tokens.typography.css ships as a standalone file for consumers that only
 * want typography (e.g. validate-tokens scans it directly) but is not
 * re-imported here to avoid duplicate :root rules.
 */

/**
 * Global Styles
 *
 * Base styles for HTML elements using design system tokens.
 * These styles are applied globally when importing the design system.
 *
 * Typography uses semantic tokens that respond to data-theme-context:
 * - Console (default): Compact typography for applications
 * - Website: Larger typography for documentation/marketing
 */

html,
body {
  height: 100%;
  font-family: var(--hx-font-family-inter);
  background-color: var(--hx-color-background-bold);
  color: var(--hx-color-text-base);
}

html[data-theme-context='website'],
html[data-theme-context='website'] body {
  background-color: var(--hx-color-palette-website-slate-n950);

  /* Match Figma's text rendering: disable the macOS grayscale-smoothing dilation
     so glyphs render at outline weight instead of ~5% heavier. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Fluid interpolation factors for the website responsive system.
 *
 * Each factor ramps from 0 to 1 across one tier range and clamps at the edges.
 * Use them to linearly interpolate pairs of values at the call site:
 *   calc(low + (high - low) * var(--hx-fluid-t-*))
 *
 * Anchor points are tied to layout geometry transitions: 600 and 1024 are the
 * column-count breakpoints, 1264 is the container cap point.
 */
[data-theme-context='website'] {
  --hx-fluid-t-desktop: clamp(0, (100vw - 1024px) / (1264px - 1024px), 1);
  --hx-fluid-t-mobile: clamp(0, (100vw - 320px) / (600px - 320px), 1);
  --hx-fluid-t-tablet: clamp(0, (100vw - 600px) / (1024px - 600px), 1);
}

body {
  font-size: var(--hx-typography-body-size);
  line-height: var(--hx-typography-body-line-height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--hx-font-family-inter);
}

h1 {
  font-size: var(--hx-typography-heading-h1-size);
}

h2 {
  font-size: var(--hx-typography-heading-h2-size);
}

h3 {
  font-size: var(--hx-typography-heading-h3-size);
}

h4 {
  font-size: var(--hx-typography-heading-h4-size);
}

h5 {
  font-size: var(--hx-typography-heading-h5-size);
}

h6 {
  font-size: var(--hx-typography-heading-h6-size);
}

hr {
  border: none;
  border-top: var(--hx-border-thin);
}

* {
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: var(--hx-scrollbar);
}

html,body{height:100%;font-family:var(--hx-font-family-inter);background-color:var(--hx-color-background-bold);color:var(--hx-color-text-base)}html[data-theme-context=website],html[data-theme-context=website] body{background-color:var(--hx-color-palette-website-slate-n950);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme-context=website]{--hx-fluid-t-desktop: clamp(0, (100vw - 1024px) / (1264px - 1024px), 1);--hx-fluid-t-mobile: clamp(0, (100vw - 320px) / (600px - 320px), 1);--hx-fluid-t-tablet: clamp(0, (100vw - 600px) / (1024px - 600px), 1)}body{font-size:var(--hx-typography-body-size);line-height:var(--hx-typography-body-line-height)}h1,h2,h3,h4,h5,h6{font-family:var(--hx-font-family-inter)}h1{font-size:var(--hx-typography-heading-h1-size)}h2{font-size:var(--hx-typography-heading-h2-size)}h3{font-size:var(--hx-typography-heading-h3-size)}h4{font-size:var(--hx-typography-heading-h4-size)}h5{font-size:var(--hx-typography-heading-h5-size)}h6{font-size:var(--hx-typography-heading-h6-size)}hr{border:none;border-top:var(--hx-border-thin)}*{scrollbar-width:thin;scrollbar-height:thin;scrollbar-color:var(--hx-scrollbar)}

.error.svelte-1wko18r {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    height: 100%;
    margin: var(--spacing-4xl) 0;
  }

  .error.svelte-1wko18r p:where(.svelte-1wko18r) {
    font-size: var(--font-size-sm);
    max-width: 25%;
    text-align: center;
  }

  .error.svelte-1wko18r button:where(.svelte-1wko18r) {
    font-size: var(--font-size-sm);
    color: var(--hx-color-border-selected);
  }

iframe.svelte-yszqsk {
    position: fixed;
    display: block;
    width: 100vw;
    height: 100vh;
    border: none;
  }

  .loading-screen.svelte-yszqsk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    padding: var(--hx-spacing-xl);
    gap: var(--hx-spacing-md);
  }

  .loading-screen.svelte-yszqsk [data-loading-bar] {
    width: 200px;
  }

  .loading-screen.svelte-yszqsk p:where(.svelte-yszqsk) {
    margin: 0;
    color: var(--hx-color-text-subtle);
  }

main.svelte-1dx0ynm {
    align-content: center;
    width: 100vw;
    height: 100vh;
  }

  .error-screen.svelte-1dx0ynm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--hx-spacing-md);
    color: var(--hx-color-brand-primary-base);
    text-align: center;

    h1:where(.svelte-1dx0ynm) {
      color: var(--hx-color-text-negative);
    }

    p:where(.svelte-1dx0ynm) {
      margin: 0;
      max-width: 400px;
      color: var(--hx-color-text-base);
    }
  }

main.svelte-1cxytmd {
    height: 100vh;
  }

  .welcome.svelte-1cxytmd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    height: 100%;
    color: var(--hx-color-brand-primary-base);

    p:where(.svelte-1cxytmd) {
      color: var(--hx-color-text-base);
      font-size: var(--font-size-sm);
      max-width: 25%;
      text-align: center;
    }

    a:where(.svelte-1cxytmd) {
      font-size: var(--font-size-sm);
      color: var(--hx-color-border-selected);
    }
  }

.loading-screen.svelte-1q2pky0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    padding: var(--hx-spacing-xl);
    gap: var(--hx-spacing-md);
  }

  .loading-screen.svelte-1q2pky0 [data-loading-bar] {
    width: 200px;
  }

  .loading-screen.svelte-1q2pky0 p:where(.svelte-1q2pky0) {
    margin: 0;
    color: var(--hx-color-text-subtle);
  }