/*! Halcyon 0.2.1. MIT License. Generated from the annotated source at https://github.com/ffuffix/halcyon; the rationale lives there and in intent.md. */

@property --h-contrast {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
@property --h-step {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.035;
}
@property --h-seed-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.17 0 0);
}
@property --h-seed-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.97 0 0);
}
@property --h-seed-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.97 0 0);
}
@property --h-status-fg-l-max {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer halcyon.seed, halcyon.primitive, halcyon.intent, halcyon.base;

@layer halcyon.seed {
  :root,
  [data-theme="dark"] {
    color-scheme: dark;

    --h-seed-bg: oklch(0.17 0 0);
    --h-seed-fg: oklch(0.97 0 0);
    --h-seed-accent: oklch(0.97 0 0);

    --h-step: 0.035;
    --h-contrast: 1;

    --h-seed-danger: oklch(0.58 0.21 22);
    --h-seed-warning: oklch(0.78 0.16 70);
    --h-seed-success: oklch(0.7 0.17 155);
    --h-seed-info: oklch(0.58 0.21 258);

    --h-status-fg-l-max: 1;
  }

  [data-theme="light"] {
    color-scheme: light;

    --h-seed-bg: oklch(0.9601 0 0);
    --h-seed-fg: oklch(0.2178 0 0);
    --h-seed-accent: oklch(0.18 0 0);

    --h-step: 0.011;

    --h-seed-danger: oklch(0.55 0.21 22);
    --h-seed-warning: oklch(0.78 0.16 70);
    --h-seed-success: oklch(0.7 0.17 155);
    --h-seed-info: oklch(0.55 0.18 258);
    --h-status-fg-l-max: 0.495;
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      color-scheme: light;
      --h-seed-bg: oklch(0.9601 0 0);
      --h-seed-fg: oklch(0.2178 0 0);
      --h-seed-accent: oklch(0.18 0 0);
      --h-step: 0.011;
      --h-seed-danger: oklch(0.55 0.21 22);
      --h-seed-warning: oklch(0.78 0.16 70);
      --h-seed-success: oklch(0.7 0.17 155);
      --h-seed-info: oklch(0.55 0.18 258);
      --h-status-fg-l-max: 0.495;
    }
  }
}

@layer halcyon.primitive {
  :root,
  [data-theme] {
    --_h-separation: var(--h-contrast);
    --_h-text-lift: calc(max(0, var(--_h-separation) - 1) * 20%);

    --_h-surface-0: var(--h-seed-bg);
    --_h-surface-1: oklch(from var(--h-seed-bg) clamp(min(l, 0.02), calc(l + 1 * var(--h-step) * var(--_h-separation)), max(l, 0.998)) c h);
    --_h-surface-under: oklch(from var(--h-seed-bg) clamp(min(l, 0.02), calc(l - 1.2 * var(--h-step) * var(--_h-separation)), max(l, 0.998)) c h);

    --_h-fg-1: var(--h-seed-fg);
    --_h-fg-2: color-mix(in oklab, var(--h-seed-fg) calc(62% + var(--_h-text-lift)), var(--h-seed-bg));
    --_h-fg-3: color-mix(in oklab, var(--h-seed-fg) calc(60% + var(--_h-text-lift)), var(--h-seed-bg));
    --_h-fg-4: color-mix(in oklab, var(--h-seed-fg) 38%, var(--h-seed-bg));

    --_h-line-1: color-mix(in oklab, var(--h-seed-fg) 8%, transparent);
    --_h-line-2: color-mix(in oklab, var(--h-seed-fg) 14%, transparent);
    --_h-line-3: color-mix(in oklab, var(--h-seed-fg) 24%, transparent);
    --_h-line-ring: color-mix(in oklab, var(--h-seed-fg) 5%, transparent);
    --_h-line-ring-strong: color-mix(in oklab, var(--h-seed-fg) 8%, transparent);
    --_h-veil-1: color-mix(in oklab, var(--h-seed-fg) 4%, transparent);
    --_h-veil-2: color-mix(in oklab, var(--h-seed-fg) 7%, transparent);
    --_h-veil-3: color-mix(in oklab, var(--h-seed-fg) 11%, transparent);
    --_h-scrim: color-mix(in oklab, oklch(from var(--h-seed-bg) 0.08 c h) 62%, transparent);

    --_h-accent-1: var(--h-seed-accent);
    --_h-accent-hover: color-mix(in oklab, var(--h-seed-accent) 86%, var(--h-seed-bg));
    --_h-accent-active: color-mix(in oklab, var(--h-seed-accent) 74%, var(--h-seed-bg));
    --_h-accent-subtle: color-mix(in oklab, var(--h-seed-accent) 10%, var(--h-seed-bg));
    --_h-accent-line: color-mix(in oklab, var(--h-seed-accent) 34%, transparent);
    --_h-accent-ring: color-mix(in oklab, var(--h-seed-accent) calc(62% + var(--_h-text-lift)), var(--h-seed-bg));
    --_h-accent-text: color-mix(in oklab, var(--h-seed-accent) calc(74% - var(--_h-text-lift)), var(--h-seed-fg));
    --_h-on-accent: oklch(from var(--h-seed-accent) clamp(0, calc((0.65 - l) * 1000), 1) 0 h);

    --_h-danger-1: var(--h-seed-danger);
    --_h-danger-subtle: color-mix(in oklab, var(--h-seed-danger) 13%, var(--h-seed-bg));
    --_h-danger-line: color-mix(in oklab, var(--h-seed-danger) 32%, transparent);
    --_h-danger-text: oklch(from color-mix(in oklab, var(--h-seed-danger) calc(74% - var(--_h-text-lift)), var(--h-seed-fg))
                        min(l, var(--h-status-fg-l-max)) c h);
    --_h-on-danger: oklch(from var(--h-seed-danger) clamp(0, calc((0.65 - l) * 1000), 1) 0 h);

    --_h-warning-1: var(--h-seed-warning);
    --_h-warning-subtle: color-mix(in oklab, var(--h-seed-warning) 13%, var(--h-seed-bg));
    --_h-warning-line: color-mix(in oklab, var(--h-seed-warning) 32%, transparent);
    --_h-warning-text: oklch(from color-mix(in oklab, var(--h-seed-warning) calc(74% - var(--_h-text-lift)), var(--h-seed-fg))
                        min(l, var(--h-status-fg-l-max)) c h);

    --_h-success-1: var(--h-seed-success);
    --_h-success-subtle: color-mix(in oklab, var(--h-seed-success) 13%, var(--h-seed-bg));
    --_h-success-line: color-mix(in oklab, var(--h-seed-success) 32%, transparent);
    --_h-success-text: oklch(from color-mix(in oklab, var(--h-seed-success) calc(74% - var(--_h-text-lift)), var(--h-seed-fg))
                        min(l, var(--h-status-fg-l-max)) c h);

    --_h-info-1: var(--h-seed-info, var(--h-seed-accent));
    --_h-info-subtle: color-mix(in oklab, var(--h-seed-info, var(--h-seed-accent)) 13%, var(--h-seed-bg));
    --_h-info-line: color-mix(in oklab, var(--h-seed-info, var(--h-seed-accent)) 32%, transparent);
    --_h-info-text: oklch(from color-mix(in oklab, var(--h-seed-info, var(--h-seed-accent)) calc(74% - var(--_h-text-lift)), var(--h-seed-fg))
                        min(l, var(--h-status-fg-l-max)) c h);
  }

  @media (prefers-contrast: more) {
    :root,
    [data-theme] {
      --_h-separation: calc(var(--h-contrast) * 1.3);
    }
  }
}

@layer halcyon.intent {
  :root,
  [data-theme] {
    --h-bg-app: var(--_h-surface-0);
    --h-bg-panel: var(--_h-surface-1);
    --h-bg-sunken: var(--_h-surface-under);
    --h-bg-raised: var(--_h-surface-under);
    --h-bg-overlay: var(--_h-surface-under);
    --h-bg-tooltip: var(--_h-surface-under);
    --h-bg-scrim: var(--_h-scrim);
    --h-bg-fade: linear-gradient(
      to bottom,
      var(--_h-surface-0) 0%,
      color-mix(in oklab, var(--_h-surface-0) 82%, transparent) 24%,
      color-mix(in oklab, var(--_h-surface-0) 46%, transparent) 54%,
      color-mix(in oklab, var(--_h-surface-0) 16%, transparent) 78%,
      transparent 100%);

    --h-bg-hover: var(--_h-veil-1);
    --h-bg-active: var(--_h-veil-2);
    --h-bg-selected: var(--_h-veil-3);

    --h-fg-primary: var(--_h-fg-1);
    --h-fg-secondary: var(--_h-fg-2);
    --h-fg-tertiary: var(--_h-fg-3);
    --h-fg-disabled: var(--_h-fg-4);
    --h-fg-on-accent: var(--_h-on-accent);
    --h-fg-link: var(--_h-info-text);

    --h-border-subtle: var(--_h-line-1);
    --h-border-default: var(--_h-line-2);
    --h-border-strong: var(--_h-line-3);
    --h-border-focus: var(--_h-accent-ring);

    --h-accent-bg: var(--_h-accent-1);
    --h-accent-bg-hover: var(--_h-accent-hover);
    --h-accent-bg-active: var(--_h-accent-active);
    --h-accent-bg-subtle: var(--_h-accent-subtle);
    --h-accent-border: var(--_h-accent-line);
    --h-accent-fg: var(--_h-accent-text);

    --h-danger-bg: var(--_h-danger-1);
    --h-danger-bg-subtle: var(--_h-danger-subtle);
    --h-danger-border: var(--_h-danger-line);
    --h-danger-fg: var(--_h-danger-text);
    --h-danger-fg-on-bg: var(--_h-on-danger);

    --h-warning-bg: var(--_h-warning-1);
    --h-warning-bg-subtle: var(--_h-warning-subtle);
    --h-warning-border: var(--_h-warning-line);
    --h-warning-fg: var(--_h-warning-text);

    --h-success-bg: var(--_h-success-1);
    --h-success-bg-subtle: var(--_h-success-subtle);
    --h-success-border: var(--_h-success-line);
    --h-success-fg: var(--_h-success-text);

    --h-info-bg: var(--_h-info-1);
    --h-info-bg-subtle: var(--_h-info-subtle);
    --h-info-border: var(--_h-info-line);
    --h-info-fg: var(--_h-info-text);

    --h-shadow-low:
      0 0 0 1px var(--_h-line-ring),
      0 1px 2px -1px oklch(0 0 0 / 0.18);
    --h-shadow-medium:
      0 0 0 1px var(--_h-line-ring),
      0 4px 12px -4px oklch(0 0 0 / 0.18),
      0 2px 4px -3px oklch(0 0 0 / 0.12);
    --h-shadow-high:
      0 0 0 1px var(--_h-line-ring-strong),
      0 16px 40px -12px oklch(0 0 0 / 0.28),
      0 4px 10px -6px oklch(0 0 0 / 0.14);
    --h-shadow-focus: 0 0 0 1px var(--_h-accent-ring);
  }

  :root {
    --h-font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --h-font-mono: "Berkeley Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace;

    --h-text-micro: 0.6875rem;
    --h-text-mini: 0.75rem;
    --h-text-small: 0.8125rem;
    --h-text-base: 0.875rem;
    --h-text-large: 1rem;
    --h-text-title-3: 1.3125rem;
    --h-text-title-2: 1.625rem;
    --h-text-title-1: 2.25rem;

    --h-tracking-wide: 0.02em;
    --h-tracking-normal: 0em;
    --h-tracking-tight: -0.011em;
    --h-tracking-tighter: -0.018em;

    --h-leading-tight: 1.2;
    --h-leading-snug: 1.35;
    --h-leading-normal: 1.5;

    --h-weight-normal: 400;
    --h-weight-medium: 510;
    --h-weight-semibold: 590;
    --h-weight-bold: 680;

    --h-space-1: 0.25rem;
    --h-space-2: 0.5rem;
    --h-space-3: 0.75rem;
    --h-space-4: 1rem;
    --h-space-5: 1.5rem;
    --h-space-6: 2rem;
    --h-space-7: 3rem;
    --h-space-8: 4rem;

    --h-radius-sm: 4px;
    --h-radius-md: 6px;
    --h-radius-lg: 8px;
    --h-radius-xl: 12px;
    --h-radius-2xl: 16px;
    --h-radius-full: 9999px;

    --h-duration-1: 80ms;
    --h-duration-2: 120ms;
    --h-duration-3: 200ms;
    --h-duration-4: 320ms;
    --h-duration-5: 480ms;
    --h-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --h-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --h-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --h-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --h-travel-1: 4px;
    --h-travel-2: 8px;
    --h-travel-3: 16px;

    --h-transition-hover: var(--h-duration-1) var(--h-ease-out);
    --h-transition-overlay: var(--h-duration-2) var(--h-ease-out);
    --h-transition-enter: var(--h-duration-5) var(--h-ease-out);
    --h-transition-exit: var(--h-duration-2) var(--h-ease-in);
    --h-transition-layout: var(--h-duration-3) var(--h-ease-in-out);

    --h-blur-1: 2px;
    --h-blur-2: 4px;
    --h-blur-3: 8px;
    --h-blur-4: 16px;
    --h-blur-5: 32px;

    --h-z-base: 0;
    --h-z-sticky: 100;
    --h-z-dropdown: 200;
    --h-z-overlay: 300;
    --h-z-modal: 400;
    --h-z-toast: 500;
    --h-z-tooltip: 600;

    --h-control-sm: 24px;
    --h-control-md: 28px;
    --h-control-lg: 32px;
    --h-control-xl: 40px;

    --h-target-min: 44px;
    --h-target-slop-sm: calc((var(--h-target-min) - var(--h-control-sm)) / 2);
    --h-target-slop-md: calc((var(--h-target-min) - var(--h-control-md)) / 2);
    --h-target-slop-lg: calc((var(--h-target-min) - var(--h-control-lg)) / 2);
    --h-target-slop-xl: calc((var(--h-target-min) - var(--h-control-xl)) / 2);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --h-travel-1: 0px;
      --h-travel-2: 0px;
      --h-travel-3: 0px;
      --h-transition-layout: 0s var(--h-ease-in-out);
    }
  }
}

@layer halcyon.base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: var(--h-bg-app);
    color: var(--h-fg-primary);
    font-family: var(--h-font-sans);
    font-size: var(--h-text-small);
    font-weight: var(--h-weight-normal);
    line-height: var(--h-leading-normal);
    letter-spacing: var(--h-tracking-tight);
    -webkit-font-smoothing: antialiased;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
  }

  [data-theme] {
    background: var(--h-bg-app);
    color: var(--h-fg-primary);
  }

  :root,
  [data-theme] {
    accent-color: var(--h-accent-bg);
    scrollbar-color: var(--h-border-strong) transparent;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--h-weight-semibold);
    line-height: var(--h-leading-tight);
    letter-spacing: var(--h-tracking-tighter);
    text-wrap: balance;
  }
  h1 { font-size: var(--h-text-title-1); }
  h2 { font-size: var(--h-text-title-2); }
  h3 { font-size: var(--h-text-title-3); }
  h4 { font-size: var(--h-text-large); letter-spacing: var(--h-tracking-tight); }
  h5 { font-size: var(--h-text-base); letter-spacing: var(--h-tracking-tight); }
  h6 {
    font-size: var(--h-text-mini);
    font-weight: var(--h-weight-medium);
    letter-spacing: var(--h-tracking-wide);
    text-transform: uppercase;
    color: var(--h-fg-tertiary);
  }

  p { margin: 0; text-wrap: pretty; }

  a {
    color: var(--h-fg-link);
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color var(--h-transition-hover),
                text-decoration-color var(--h-transition-hover);
  }

  a:hover,
  a:focus-visible {
    text-decoration-color: currentColor;
  }

  code, kbd, pre, samp {
    font-family: var(--h-font-mono);
    font-size: 0.95em;
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--h-border-subtle);
    margin-block: var(--h-space-5);
  }

  :where(:focus-visible) {
    outline: 1px solid var(--h-border-focus);
    outline-offset: 2px;
  }

  ::selection {
    background: var(--h-accent-bg-subtle);
  }

  ::placeholder {
    color: var(--h-fg-tertiary);
  }

  @media (forced-colors: active) {
    :where(dialog, [popover], [role="dialog"], [role="alertdialog"], [role="menu"], [role="tooltip"]) {
      outline: 1px solid CanvasText;
    }

    :where(:focus-visible) {
      outline: 1px solid Highlight !important;
    }
  }
}