html,
body,
#root {
  min-height: 100%;
}

html {
  background-color: #f7f7f5;
  overscroll-behavior-y: none;
}

@keyframes uhuru-auth-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes uhuru-auth-scale-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes uhuru-ai-message-edit-transition {
  from {
    opacity: 0.45;
    transform: translateY(-3px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.uhuru-ai-message-edit-transition {
  animation: uhuru-ai-message-edit-transition 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: top right;
}

.uhuru-auth-card--fade,
.uhuru-auth-card--slide-up {
  animation: uhuru-auth-fade-in 260ms ease-out both;
}

.uhuru-auth-card--scale {
  animation: uhuru-auth-scale-in 220ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .uhuru-auth-card--fade,
  .uhuru-auth-card--slide-up,
  .uhuru-auth-card--scale,
  .uhuru-ai-message-edit-transition {
    animation: none;
  }
}

body {
  margin: 0;
  min-width: 320px;
  background: transparent;
  overscroll-behavior-y: none;
}

/* Modal styles are exported explicitly because the modal is portaled outside
   the component that invoked it and must retain the active Uhuru tokens. */
.uhuru-modal {
  background: var(--uhuru-overlay-scrim, rgba(24, 20, 17, 0.35));
  color: var(--uhuru-text-primary, #181411);
  padding: 1.5rem;
}

.uhuru-modal__surface {
  max-height: calc(100dvh - 3rem);
  overflow: auto;
  border: 1px solid var(--uhuru-border-default, #dcd8d2);
  border-radius: var(--uhuru-radius-lg, 1rem);
  background: var(--uhuru-surface-default, #fff);
  box-shadow: var(--uhuru-shadow-lg, 0 28px 72px rgba(21, 18, 16, 0.14));
}

.uhuru-modal__header {
  border-bottom: 1px solid var(--uhuru-border-subtle, #ebe8e2);
  color: var(--uhuru-text-primary, #181411);
}

.uhuru-modal__description {
  color: var(--uhuru-text-secondary, #5f5952);
}

.uhuru-modal__body {
  color: var(--uhuru-text-primary, #181411);
}

@media (max-width: 639px) {
  .uhuru-modal {
    align-items: flex-end;
    padding: 0.75rem;
  }

  .uhuru-modal__surface {
    max-height: calc(100dvh - 1.5rem);
  }
}

.uhuru-background-pattern {
  background-color: transparent;
  background-repeat: repeat;
  background-size: var(--uhuru-background-pattern-size, 100px 100px);
  opacity: var(--uhuru-background-pattern-opacity, 1);
}

.uhuru-background-pattern[data-uhuru-pattern="grid"] {
  background-image:
    linear-gradient(var(--uhuru-background-pattern-color, currentColor) 1px, transparent 1px),
    linear-gradient(90deg, var(--uhuru-background-pattern-color, currentColor) 1px, transparent 1px);
}

.uhuru-background-pattern[data-uhuru-pattern="cross"] {
  background-image:
    linear-gradient(90deg, transparent 46%, var(--uhuru-background-pattern-color, currentColor) 46%, var(--uhuru-background-pattern-color, currentColor) 54%, transparent 54%),
    linear-gradient(transparent 46%, var(--uhuru-background-pattern-color, currentColor) 46%, var(--uhuru-background-pattern-color, currentColor) 54%, transparent 54%);
  background-size: var(--uhuru-background-pattern-size, 60px 60px);
}

.uhuru-background-pattern[data-uhuru-pattern="circuit"] {
  background-image:
    linear-gradient(90deg, var(--uhuru-background-pattern-color, currentColor) 1px, transparent 1px),
    linear-gradient(var(--uhuru-background-pattern-color, currentColor) 1px, transparent 1px),
    radial-gradient(circle, var(--uhuru-background-pattern-color, currentColor) 0 3px, transparent 3.5px);
  background-size: var(--uhuru-background-pattern-size, 100px 100px), var(--uhuru-background-pattern-size, 100px 100px), var(--uhuru-background-pattern-size, 100px 100px);
  background-position: 22px 12px, 22px 12px, 22px 62px;
}

.uhuru-background-pattern[data-uhuru-pattern="dots"] {
  background-image: radial-gradient(circle, var(--uhuru-background-pattern-color, currentColor) 1.5px, transparent 1.75px);
  background-size: var(--uhuru-background-pattern-size, 28px 28px);
}

[data-uhuru-root][data-uhuru-theme="dark"] {
  color-scheme: dark;
}

[data-uhuru-root][data-uhuru-variant="glass"]:not([data-uhuru-background="true"]) {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 100px 100px;
}

[data-uhuru-root][data-uhuru-theme="light"][data-uhuru-variant="glass"] {
  --uhuru-bg-base: #f0f2f2;
  --uhuru-bg-subtle: #e9ecec;
  --uhuru-bg-muted: rgba(255, 255, 255, 0.58);
  --uhuru-surface-default: rgba(255, 255, 255, 0.62);
  --uhuru-surface-muted: rgba(255, 255, 255, 0.42);
  --uhuru-surface-overlay: rgba(255, 255, 255, 0.58);
  --uhuru-border-default: rgba(36, 40, 40, 0.18);
  --uhuru-border-subtle: rgba(36, 40, 40, 0.1);
  --uhuru-shadow-sm: 0 14px 36px rgba(24, 28, 28, 0.1);
  --uhuru-shadow-md: 0 22px 56px rgba(24, 28, 28, 0.14);
}

[data-uhuru-root][data-uhuru-theme="dark"][data-uhuru-variant="glass"] {
  --uhuru-bg-base: #0f1010;
  --uhuru-bg-subtle: #141515;
  --uhuru-bg-muted: rgba(255, 255, 255, 0.08);
  --uhuru-surface-default: rgba(255, 255, 255, 0.055);
  --uhuru-surface-muted: rgba(255, 255, 255, 0.09);
  --uhuru-surface-overlay: rgba(18, 19, 19, 0.68);
  --uhuru-border-default: rgba(255, 255, 255, 0.16);
  --uhuru-border-subtle: rgba(255, 255, 255, 0.09);
  --uhuru-shadow-sm: 0 14px 36px rgba(0, 0, 0, 0.28);
  --uhuru-shadow-md: 0 22px 56px rgba(0, 0, 0, 0.38);
}

[data-uhuru-root][data-uhuru-variant="glass"] .uhuru-card {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

[data-uhuru-root] {
  display: block;
  min-height: 100vh;
  width: 100%;
  background: var(--uhuru-bg-base);
  color: var(--uhuru-text-primary);
  --uhuru-accent: var(--uhuru-accent-solid);
  --uhuru-overlay-scrim: rgba(24, 20, 17, 0.35);
  --uhuru-overlay-scrim-strong: rgba(24, 20, 17, 0.42);
  --uhuru-bg-base: #f7f7f5;
  --uhuru-bg-subtle: #f1f1ee;
  --uhuru-bg-muted: #ebebe6;
  --uhuru-surface-default: #ffffff;
  --uhuru-surface-muted: #f5f5f2;
  --uhuru-surface-inverse: #161311;
  --uhuru-surface-overlay: rgba(255, 255, 255, 0.92);
  --uhuru-text-primary: #181411;
  --uhuru-text-secondary: #5f5952;
  --uhuru-text-tertiary: #8c857d;
  --uhuru-text-disabled: #b0aaa2;
  --uhuru-text-inverse: #fcfbf9;
  --uhuru-border-default: #dcd8d2;
  --uhuru-border-subtle: #ebe8e2;
  --uhuru-border-strong: #2a2521;
  --uhuru-border-accent: #c49a71;
  --uhuru-border-disabled: #ece8e2;
  --uhuru-accent-subtle: #f4ece2;
  --uhuru-accent-solid: #b07a3e;
  --uhuru-accent-strong: #855b33;
  --uhuru-action-primary: #161311;
  --uhuru-action-primary-hover: #241f1b;
  --uhuru-success-bg: #eff9f1;
  --uhuru-success-border: #85bc92;
  --uhuru-success-text: #255c35;
  --uhuru-warning-bg: #fff7e8;
  --uhuru-warning-border: #ddba71;
  --uhuru-warning-text: #835e18;
  --uhuru-info-bg: #eef4ff;
  --uhuru-info-border: #9fb8e8;
  --uhuru-info-text: #24477a;
  --uhuru-error-border: #b96b59;
  --uhuru-error-bg: #fff1ee;
  --uhuru-error-text: #9a3b2f;
  --uhuru-radius-xs: 0.375rem;
  --uhuru-radius-sm: 0.5rem;
  --uhuru-radius-md: 0.75rem;
  --uhuru-radius-lg: 1rem;
  --uhuru-radius-xl: 1.25rem;
  --uhuru-radius-full: 999px;
  --uhuru-radius-control: var(--uhuru-radius-lg);
  --uhuru-shadow-sm: 0 10px 24px rgba(21, 18, 16, 0.08);
  --uhuru-shadow-md: 0 18px 48px rgba(21, 18, 16, 0.1);
  --uhuru-shadow-lg: 0 28px 72px rgba(21, 18, 16, 0.14);
  --uhuru-font-heading: "Avenir Next", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --uhuru-font-body: "Avenir Next", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --uhuru-font-mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
  --uhuru-font-weight-regular: 450;
  --uhuru-font-weight-medium: 550;
  --uhuru-font-weight-semibold: 650;
  --uhuru-font-weight-bold: 700;
  font-family: var(--uhuru-font-body);
  font-weight: var(--uhuru-font-weight-regular);
  font-synthesis: none;
  color-scheme: light;
}

[data-uhuru-root] button,
[data-uhuru-root] input,
[data-uhuru-root] textarea,
[data-uhuru-root] select,
[data-uhuru-root] optgroup,
[data-uhuru-root] option {
  font-family: inherit;
}

[data-uhuru-root] h1,
[data-uhuru-root] h2,
[data-uhuru-root] h3,
[data-uhuru-root] h4,
[data-uhuru-root] h5,
[data-uhuru-root] h6 {
  font-family: var(--uhuru-font-heading);
  font-weight: var(--uhuru-font-weight-semibold);
}

[data-uhuru-root][data-uhuru-background="true"] {
  --uhuru-layout-background: transparent;
  background: var(--uhuru-bg-base);
}

[data-uhuru-root][data-uhuru-radius="tight"] {
  --uhuru-radius-xs: 0.25rem;
  --uhuru-radius-sm: 0.375rem;
  --uhuru-radius-md: 0.5rem;
  --uhuru-radius-lg: 0.75rem;
  --uhuru-radius-xl: 1rem;
  --uhuru-radius-control: var(--uhuru-radius-lg);
}

[data-uhuru-root][data-uhuru-radius="balanced"] {
  --uhuru-radius-xs: 0.375rem;
  --uhuru-radius-sm: 0.5rem;
  --uhuru-radius-md: 0.75rem;
  --uhuru-radius-lg: 1rem;
  --uhuru-radius-xl: 1.25rem;
  --uhuru-radius-control: 0.95rem;
}

[data-uhuru-root][data-uhuru-radius="soft"] {
  --uhuru-radius-xs: 0.5rem;
  --uhuru-radius-sm: 0.75rem;
  --uhuru-radius-md: 1rem;
  --uhuru-radius-lg: 1.25rem;
  --uhuru-radius-xl: 1.5rem;
  --uhuru-radius-control: var(--uhuru-radius-full);
}

[data-uhuru-root][data-uhuru-theme="dark"] {
  --uhuru-bg-base: #141210;
  --uhuru-bg-subtle: #1b1816;
  --uhuru-bg-muted: #24201d;
  --uhuru-surface-default: #1c1917;
  --uhuru-surface-muted: #26221f;
  --uhuru-surface-inverse: #f8f7f4;
  --uhuru-surface-overlay: rgba(28, 25, 23, 0.94);
  --uhuru-text-primary: #f5f3ef;
  --uhuru-text-secondary: #c4bdb5;
  --uhuru-text-tertiary: #9f978f;
  --uhuru-text-disabled: #756f69;
  --uhuru-text-inverse: #181411;
  --uhuru-border-default: #3a3430;
  --uhuru-border-subtle: #2c2724;
  --uhuru-border-strong: #efeae3;
  --uhuru-border-accent: #c49a71;
  --uhuru-border-disabled: #2c2724;
  --uhuru-action-primary: #f3efe8;
  --uhuru-action-primary-hover: #ffffff;
  --uhuru-success-bg: #243d2a;
  --uhuru-success-border: #4e8e5f;
  --uhuru-success-text: #b6e0be;
  --uhuru-warning-bg: #4b3a17;
  --uhuru-warning-border: #b78e49;
  --uhuru-warning-text: #f2dcaa;
  --uhuru-info-bg: #1d3158;
  --uhuru-info-border: #6a8fc8;
  --uhuru-info-text: #c8daf8;
  --uhuru-error-bg: #4b241e;
  --uhuru-error-border: #bb7568;
  --uhuru-error-text: #f0c2b9;
  --uhuru-shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.28);
  --uhuru-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.34);
  --uhuru-shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.42);
}

[data-uhuru-root][data-uhuru-density="compact"] {
  --uhuru-control-height: 2.5rem;
  --uhuru-control-padding-x: 0.875rem;
  --uhuru-panel-gap: 0.75rem;
  --uhuru-panel-padding-x: 0.875rem;
  --uhuru-panel-padding-y: 0.75rem;
  --uhuru-stack-gap: 1.25rem;
}

[data-uhuru-root][data-uhuru-density="comfortable"] {
  --uhuru-control-height: 2.875rem;
  --uhuru-control-padding-x: 1rem;
  --uhuru-panel-gap: 0.875rem;
  --uhuru-panel-padding-x: 1rem;
  --uhuru-panel-padding-y: 1rem;
  --uhuru-stack-gap: 1.5rem;
}

.uhuru-card {
  border: 1px solid var(--uhuru-border-default);
  border-radius: var(--uhuru-radius-lg);
  background: var(--uhuru-surface-default);
  box-shadow: var(--uhuru-shadow-sm);
}

.uhuru-floating-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 9999;
  pointer-events: none;
}

.uhuru-floating-fab > * {
  pointer-events: auto;
}