/* Author/creator: nattapat2871 (https://nattapat2871.me) */
/* HeroUI v2 foundation bridge for the static NamLauncher website.
   Layout values follow @heroui/theme 2.4.26 bundled by @heroui/react 2.8.10. */

:root {
  --heroui-v2-font-tiny: 0.75rem;
  --heroui-v2-font-small: 0.875rem;
  --heroui-v2-font-medium: 1rem;
  --heroui-v2-font-large: 1.125rem;
  --heroui-v2-line-tiny: 1rem;
  --heroui-v2-line-small: 1.25rem;
  --heroui-v2-line-medium: 1.5rem;
  --heroui-v2-line-large: 1.75rem;
  --heroui-v2-radius-small: 8px;
  --heroui-v2-radius-medium: 12px;
  --heroui-v2-radius-large: 14px;
  --heroui-v2-disabled-opacity: 0.5;
  --heroui-v2-hover-opacity: 0.8;
  --heroui-v2-shadow-small:
    0 0 5px rgb(0 0 0 / 0.02),
    0 2px 10px rgb(0 0 0 / 0.06),
    0 0 1px rgb(0 0 0 / 0.3);
  --heroui-v2-shadow-medium:
    0 0 15px rgb(0 0 0 / 0.03),
    0 2px 30px rgb(0 0 0 / 0.08),
    0 0 1px rgb(0 0 0 / 0.3);
  --heroui-v2-shadow-large:
    0 0 30px rgb(0 0 0 / 0.04),
    0 30px 60px rgb(0 0 0 / 0.12),
    0 0 1px rgb(0 0 0 / 0.3);

  --heroui-v2-background: #ffffff;
  --heroui-v2-foreground: #11181c;
  --heroui-v2-divider: rgb(17 17 17 / 0.15);
  --heroui-v2-focus: #006fee;
  --heroui-v2-content1: #ffffff;
  --heroui-v2-content1-foreground: #11181c;
  --heroui-v2-content2: #f4f4f5;
  --heroui-v2-content2-foreground: #27272a;
  --heroui-v2-content3: #e4e4e7;
  --heroui-v2-content3-foreground: #3f3f46;
  --heroui-v2-content4: #d4d4d8;
  --heroui-v2-content4-foreground: #52525b;
  --heroui-v2-default: #d4d4d8;
  --heroui-v2-default-foreground: #11181c;
  --heroui-v2-primary: #006fee;
  --heroui-v2-primary-foreground: #ffffff;
  --heroui-v2-secondary: #7828c8;
  --heroui-v2-secondary-foreground: #ffffff;

  /* Compatibility aliases consumed by the production stylesheet. */
  --accent-strong: #2475c9;
  --field-background: var(--heroui-v2-content2);
  --ease-out-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --radius-2xl: var(--heroui-v2-radius-large);
  --radius-3xl: var(--heroui-v2-radius-large);
  --radius-4xl: var(--heroui-v2-radius-large);
  --shadow-sm: var(--heroui-v2-shadow-small);
}

.dark,
[data-theme="dark"] {
  --heroui-v2-hover-opacity: 0.9;
  --heroui-v2-background: #000000;
  --heroui-v2-foreground: #ecedee;
  --heroui-v2-divider: rgb(255 255 255 / 0.15);
  --heroui-v2-content1: #0d182a;
  --heroui-v2-content1-foreground: #eef6ff;
  --heroui-v2-content2: #102a4d;
  --heroui-v2-content2-foreground: #eef6ff;
  --heroui-v2-content3: #132f55;
  --heroui-v2-content3-foreground: #dcecff;
  --heroui-v2-content4: #173864;
  --heroui-v2-content4-foreground: #d7eaff;
  --heroui-v2-default: #132f55;
  --heroui-v2-default-foreground: #fafafa;
  --heroui-v2-shadow-small:
    0 0 5px rgb(0 0 0 / 0.05),
    0 2px 10px rgb(0 0 0 / 0.2),
    inset 0 0 1px rgb(255 255 255 / 0.15);
  --heroui-v2-shadow-medium:
    0 0 15px rgb(0 0 0 / 0.06),
    0 2px 30px rgb(0 0 0 / 0.22),
    inset 0 0 1px rgb(255 255 255 / 0.15);
  --heroui-v2-shadow-large:
    0 0 30px rgb(0 0 0 / 0.07),
    0 30px 60px rgb(0 0 0 / 0.26),
    inset 0 0 1px rgb(255 255 255 / 0.15);
}

.button {
  position: relative;
  display: inline-flex;
  min-width: 80px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--heroui-v2-radius-medium);
  padding-inline: 16px;
  background: var(--heroui-v2-default);
  color: var(--heroui-v2-default-foreground);
  cursor: pointer;
  font-size: var(--heroui-v2-font-small);
  font-weight: 650;
  line-height: var(--heroui-v2-line-small);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition-property: transform, opacity, background-color, border-color, box-shadow, color;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.button:hover:not(:disabled):not([aria-disabled="true"]) {
  opacity: var(--heroui-v2-hover-opacity);
}

.button:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(0.97);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: var(--heroui-v2-disabled-opacity);
  pointer-events: none;
}

.button--primary {
  background: var(--heroui-v2-primary);
  color: var(--heroui-v2-primary-foreground);
  box-shadow: var(--heroui-v2-shadow-small);
}

.button--secondary {
  background: var(--heroui-v2-content2);
  color: var(--heroui-v2-content2-foreground);
}

.button--outline {
  border: 1px solid var(--heroui-v2-divider);
  background: transparent;
  color: inherit;
}

.button--outline:hover:not(:disabled):not([aria-disabled="true"]),
.button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--heroui-v2-content2);
}

.button--ghost {
  background: transparent;
  color: inherit;
}

.button--sm {
  min-width: 64px;
  height: 32px;
  padding-inline: 12px;
  font-size: var(--heroui-v2-font-tiny);
  line-height: var(--heroui-v2-line-tiny);
}

.button--lg {
  min-width: 96px;
  height: 48px;
  padding-inline: 20px;
  font-size: var(--heroui-v2-font-medium);
  line-height: var(--heroui-v2-line-medium);
}

.card {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border-radius: var(--heroui-v2-radius-large);
  padding: 16px;
  background: var(--heroui-v2-content1);
  color: var(--heroui-v2-content1-foreground);
  box-shadow: var(--heroui-v2-shadow-small);
}

.card--default {
  background: var(--heroui-v2-content1);
}

.card--secondary {
  background: var(--heroui-v2-content2);
  color: var(--heroui-v2-content2-foreground);
}

.button:focus-visible,
.card:focus-visible {
  outline: 2px solid var(--heroui-v2-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition-duration: 120ms;
  }

  .button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }
}