@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)}

[data-factor-type].svelte-zhjnij {
    display: inline-flex;
    align-items: center;
    gap: var(--hx-spacing-2xs);
  }

[data-errors].svelte-44tn0m {
    display: flex;
    flex-direction: column;
    padding-block: var(--hx-spacing-xs);
    gap: var(--hx-spacing-xs);
  }

  [data-loading-container].svelte-44tn0m {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--hx-spacing-xl);
  }

[data-body].svelte-rcgld3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hx-spacing-md);
  }

  [data-errors].svelte-rcgld3 {
    display: flex;
    flex-direction: column;
    padding-block: var(--hx-spacing-xs);
    gap: var(--hx-spacing-xs);
  }

[data-checkmark].svelte-1hmdil6 {
    font-size: var(--hx-font-size-base);
    margin-right: var(--hx-spacing-sm);
  }

  [data-checkmark][data-valid].svelte-1hmdil6 {
    color: var(--hx-color-text-positive);
  }

  [data-checkmark].svelte-1hmdil6:not([data-valid]) {
    color: var(--hx-color-text-negative);
  }

  ul.svelte-1hmdil6 {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: var(--hx-spacing-xl);
  }

  li.svelte-1hmdil6 {
    margin-bottom: var(--hx-spacing-lg);
    font-size: var(--hx-font-size-xs);
  }

main.svelte-1urhlws {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    background-color: var(--hx-color-background-subtle);
  }

  [data-loading-bar-container].svelte-1urhlws {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  [data-card].svelte-1urhlws {
    display: flex;
    flex-direction: column;
    padding: var(--hx-spacing-3xl);

    width: 26vw;
    max-width: calc(var(--hx-spacing-5xl) * 12);
    min-width: calc(var(--hx-spacing-5xl) * 10);
  }

  [data-header].svelte-1urhlws {
    text-align: center;

    &:not([data-loading]) {
      padding-bottom: var(--hx-spacing-2xl);
    }
  }

[data-content].svelte-otw9hy {
    --action-bar-background: var(--hx-color-background-subtle);

    display: flex;
    flex-direction: column;

    h1:where(.svelte-otw9hy) {
      text-align: center;
      font-size: var(--hx-font-size-xl);
    }

    p:where(.svelte-otw9hy) {
      text-align: center;
      color: var(--hx-color-text-subtle);
      padding-block: var(--hx-spacing-md);
    }
  }

[data-content].svelte-c0cezy {
    --action-bar-background: var(--hx-color-background-subtle);

    display: flex;
    flex-direction: column;

    h1:where(.svelte-c0cezy) {
      text-align: center;
      font-size: var(--hx-font-size-xl);
    }

    p:where(.svelte-c0cezy) {
      text-align: center;
      color: var(--hx-color-text-subtle);
      padding-block: var(--hx-spacing-md);
    }
  }

[data-content].svelte-1q8xqus {
    display: flex;
    flex-direction: column;
    gap: var(--hx-spacing-md);

    h1:where(.svelte-1q8xqus) {
      text-align: center;
      font-size: var(--hx-font-size-xl);
    }

    hr:where(.svelte-1q8xqus) {
      text-align: center;
      font-size: var(--hx-font-size-base);
      color: var(--hx-color-text-subtle);
      width: 60%;
      align-self: center;
      margin: var(--hx-spacing-lg) 0;
    }

    [data-buttons]:where(.svelte-1q8xqus) {
      font-weight: bold;
      display: flex;
      flex-direction: column;
      gap: var(--hx-spacing-lg);
    }

    [data-errors]:where(.svelte-1q8xqus) {
      padding-top: var(--hx-spacing-md);
      text-align: center;
    }
  }

[data-content].svelte-57ljcj {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hx-spacing-md);

    [data-errors]:where(.svelte-57ljcj) {
      padding-top: var(--hx-spacing-md);
    }
  }

[data-content].svelte-18adktz {
    display: flex;
    flex-direction: column;
    gap: var(--hx-spacing-md);

    [data-user]:where(.svelte-18adktz) {
      display: flex;
      flex-direction: row;
      border: var(--hx-border-thin);
      border-radius: var(--hx-radius-sm);
      padding: var(--hx-spacing-sm);
      gap: var(--hx-spacing-sm);
      cursor: pointer;

      align-items: center;

      &:focus-visible:not(:active) {
        outline: var(--hx-border-medium-warning);
        outline-offset: -2px;
      }

      [data-info]:where(.svelte-18adktz) {
        display: flex;
        flex-direction: column;
        justify-content: center;

        span:where(.svelte-18adktz) {
          color: var(--hx-color-text-subtle);
          font-size: var(--hx-font-size-xs);
        }
      }

      &:hover {
        background-color: var(--hx-color-background-subtle);
      }

      [data-avatar-frame]:where(.svelte-18adktz) {
        display: flex;
        border-radius: var(--hx-radius-full);
        border: var(--hx-border-thin);
        box-shadow: var(--hx-effect-shadow-sm);
      }
    }
  }

[data-content].svelte-z2xtqf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hx-spacing-md);

    p:where(.svelte-z2xtqf) {
      text-align: center;
    }

    [data-factor]:where(.svelte-z2xtqf) {
      display: grid;
      align-self: stretch;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: var(--hx-spacing-xs);

      border: var(--hx-border-thin);
      border-radius: var(--hx-radius-sm);
      padding: var(--hx-spacing-xs);
      cursor: pointer;

      h2:where(.svelte-z2xtqf) {
        font-size: var(--hx-font-size-sm);
        font-weight: var(--hx-font-weight-regular);
      }

      &:focus-visible:not(:active) {
        outline: var(--hx-border-medium-warning);
        outline-offset: -2px;
      }

      [data-icon]:where(.svelte-z2xtqf) {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        --icon-size: var(--hx-size-n8);
        --icon-color: var(--hx-color-brand-primary-base);
      }
    }
    [data-factor]:where(.svelte-z2xtqf):hover {
      background-color: var(--hx-color-background-subtle);
    }
  }

[data-content].svelte-1u0069m {
    --action-bar-background: var(--hx-color-background-subtle);

    display: flex;
    flex-direction: column;
    gap: var(--hx-spacing-md);

    h1:where(.svelte-1u0069m) {
      text-align: center;
      font-size: var(--hx-font-size-xl);
    }

    p:where(.svelte-1u0069m) {
      text-align: center;
      color: var(--hx-color-text-subtle);
      padding-block: var(--hx-spacing-md);
    }
  }

[data-form-container].svelte-3d4v3s {
    --action-bar-background: var(--hx-color-background-bold);

    position: relative;
    width: 100%;
    max-width: 960px;
  }

  [data-loading-bar-container].svelte-3d4v3s {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  [data-text].svelte-3d4v3s {
    display: flex;
    flex-direction: column;
    gap: var(--hx-spacing-xs);
  }

[data-loading-bar-container].svelte-3x61o7 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  section.svelte-3x61o7 {
    --action-bar-background: var(--hx-color-background-bold);

    align-self: center;
    width: 100%;
    max-width: 960px;

    &:not(:last-child) {
      margin-bottom: var(--hx-spacing-2xl);
    }

    display: flex;
    flex-direction: column;

    gap: var(--hx-spacing-xl);

    header:where(.svelte-3x61o7) {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      [data-text]:where(.svelte-3x61o7) {
        display: flex;
        flex-direction: column;
        gap: var(--hx-spacing-xs);
      }

      [data-buttons]:where(.svelte-3x61o7) {
        display: flex;
        flex-direction: column;
        justify-content: center;

        div:where(.svelte-3x61o7) {
          display: flex;
          flex-direction: row;
          gap: var(--hx-spacing-xs);
        }
      }
    }

    [data-errors]:where(.svelte-3x61o7) {
      display: flex;
      flex-direction: column;
      gap: var(--hx-spacing-xs);
    }
  }

[data-content].svelte-1gcyy7 {
    --action-bar-background: var(--hx-color-background-subtle);

    display: flex;
    flex-direction: column;

    h1:where(.svelte-1gcyy7) {
      text-align: center;
      font-size: var(--hx-font-size-xl);
    }

    p:where(.svelte-1gcyy7) {
      text-align: center;
      color: var(--hx-color-text-subtle);
      padding-block: var(--hx-spacing-md);
    }
  }

[data-content].svelte-149zxto {
    --action-bar-background: var(--hx-color-background-subtle);

    display: flex;
    flex-direction: column;

    h1:where(.svelte-149zxto) {
      text-align: center;
      font-size: var(--hx-font-size-xl);
    }

    p:where(.svelte-149zxto) {
      text-align: center;
      color: var(--hx-color-text-subtle);
      padding-block: var(--hx-spacing-md);
    }
  }

[data-content].svelte-xovqqq {
    display: flex;
    flex-direction: column;

    h1:where(.svelte-xovqqq) {
      text-align: center;
      font-size: var(--hx-font-size-xl);
    }

    p:where(.svelte-xovqqq) {
      text-align: center;
      color: var(--hx-color-text-subtle);
      padding-block: var(--hx-spacing-md);
    }

    [data-errors]:where(.svelte-xovqqq) {
      padding-top: var(--hx-spacing-md);
    }
  }