/* Shared premium design-system tokens and semantic utilities */
:root {
  --color-bg-base: #101827;
  --color-bg-base-strong: #0b1220;
  --color-bg-alt: #182233;
  --color-surface: rgba(20, 30, 46, 0.82);
  --color-surface-elevated: rgba(28, 40, 60, 0.9);
  --color-surface-strong: rgba(39, 53, 77, 0.96);
  --color-border-soft: rgba(160, 175, 199, 0.18);
  --color-border-strong: rgba(160, 175, 199, 0.3);
  --color-text-primary: #f6f8fc;
  --color-text-secondary: #d7deea;
  --color-text-muted: #9ba9bf;
  --color-text-inverse: #101827;
  --color-primary: #8da6ff;
  --color-primary-strong: #6f89ea;
  --color-accent: #d6b4ff;
  --color-accent-strong: #bc8ff5;
  --color-success: #63c89a;
  --color-warning: #e6aa63;
  --color-stress: #e38d96;
  --gradient-app:
    radial-gradient(circle at top left, rgba(141, 166, 255, 0.16), transparent 30%),
    radial-gradient(circle at top right, rgba(214, 180, 255, 0.11), transparent 28%),
    radial-gradient(circle at bottom right, rgba(99, 200, 154, 0.1), transparent 26%),
    linear-gradient(180deg, #101827 0%, #162133 52%, #0d1524 100%);
  --gradient-surface:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  --gradient-primary:
    linear-gradient(135deg, #9ab0ff 0%, #86cdd1 100%);
  --gradient-accent:
    linear-gradient(135deg, #d6b4ff 0%, #efb1c9 100%);
  --gradient-success:
    linear-gradient(135deg, #63c89a 0%, #86d8bc 100%);
  --gradient-warning:
    linear-gradient(135deg, #e6aa63 0%, #f2c181 100%);
  --gradient-stress:
    linear-gradient(135deg, #e38d96 0%, #efb1b6 100%);
  --shadow-soft: 0 18px 40px rgba(3, 10, 22, 0.32);
  --shadow-glow: 0 0 0 1px rgba(141, 166, 255, 0.12), 0 24px 54px rgba(11, 18, 32, 0.34);
  --motion-quick: 140ms;
  --motion-standard: 220ms;
  --motion-slow: 340ms;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

  --brand-primary: var(--color-primary);
  --brand-primary-strong: var(--color-primary-strong);
  --brand-secondary: #86cdd1;
  --brand-accent: var(--color-accent);
  --surface: var(--color-surface);
  --surface-elevated: var(--color-surface-elevated);
  --surface-strong: var(--color-surface-strong);
  --surface-border: var(--color-border-soft);
  --surface-border-strong: var(--color-border-strong);
  --text-main: var(--color-text-primary);
  --text-body: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --text-inverse: var(--color-text-inverse);
  --accent-primary: var(--color-primary);
  --accent-primary-strong: var(--color-primary-strong);
  --accent-secondary: #86cdd1;
  --accent-warm: var(--color-accent);
  --accent-success: var(--color-success);
  --accent-warning: var(--color-warning);
  --accent-danger: var(--color-stress);
  --page-width: 1120px;
}

:root[data-theme='light'] {
  --color-bg-base: #f4f6fb;
  --color-bg-base-strong: #eef3f9;
  --color-bg-alt: #e7edf7;
  --color-surface: rgba(255, 255, 255, 0.9);
  --color-surface-elevated: rgba(247, 250, 255, 0.96);
  --color-surface-strong: rgba(234, 240, 248, 0.98);
  --color-border-soft: rgba(122, 139, 170, 0.2);
  --color-border-strong: rgba(122, 139, 170, 0.3);
  --color-text-primary: #162033;
  --color-text-secondary: #41506a;
  --color-text-muted: #66758f;
  --color-text-inverse: #f7f9fc;
  --gradient-app:
    radial-gradient(circle at top left, rgba(141, 166, 255, 0.12), transparent 30%),
    radial-gradient(circle at top right, rgba(214, 180, 255, 0.09), transparent 26%),
    radial-gradient(circle at bottom right, rgba(99, 200, 154, 0.08), transparent 24%),
    linear-gradient(180deg, #f7f9fd 0%, #eef3f9 52%, #e8eef7 100%);
  --gradient-surface:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(245, 248, 252, 0.92));
  --shadow-soft: 0 18px 38px rgba(38, 53, 82, 0.12);
  --shadow-glow: 0 0 0 1px rgba(141, 166, 255, 0.08), 0 18px 42px rgba(83, 104, 138, 0.16);
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-body);
  background: var(--gradient-app);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, color-mix(in srgb, var(--accent-primary) 10%, transparent), transparent 42%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-standard) var(--ease-premium);
  z-index: 5;
}

body.page-transitioning::before {
  opacity: 1;
}

body.page-ready [data-page-shell],
body.page-ready .main-content,
body.page-ready main {
  animation: luma-page-enter var(--motion-slow) var(--ease-premium) both;
}

body.page-transitioning [data-page-shell],
body.page-transitioning .main-content,
body.page-transitioning main {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--motion-standard) ease, transform var(--motion-standard) var(--ease-premium);
}

body.light-theme,
:root[data-theme='light'] body {
  color-scheme: light;
}

.container-narrow,
.ui-container {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--space-16, 1rem);
}

.ui-stack-8 > * + * {
  margin-top: var(--space-8, 0.5rem);
}

.ui-stack-16 > * + * {
  margin-top: var(--space-16, 1rem);
}

.ui-stack-24 > * + * {
  margin-top: var(--space-24, 1.5rem);
}

.ui-card,
.card {
  background:
    var(--gradient-surface),
    var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg, 1.25rem);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--motion-standard) var(--ease-premium),
    box-shadow var(--motion-standard) var(--ease-premium),
    border-color var(--motion-standard) ease,
    background-color var(--motion-standard) ease;
}

.ui-card--elevated {
  background: var(--surface-elevated);
  box-shadow: var(--shadow-glow, 0 0 0 1px rgba(99, 102, 241, 0.10), 0 20px 50px rgba(37, 99, 235, 0.20));
}

.ui-card:hover,
.card:hover,
.card-hover:hover,
[data-interactive-card]:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

.ui-card:active,
.card:active,
[data-interactive-card]:active {
  transform: scale(0.992);
}

.btn,
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8, 0.5rem);
  font-weight: 700;
  border-radius: var(--radius-md, 1rem);
  padding: 0.875rem 1.25rem;
  min-height: 48px;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--motion-quick) ease,
    box-shadow var(--motion-standard) var(--ease-premium),
    background-color var(--motion-standard) ease,
    opacity var(--motion-standard) ease;
}

.btn:hover,
.ui-btn:hover {
  transform: translateY(-1px);
}

.btn:active,
.ui-btn:active,
.tap-feedback:active,
[data-pressable="true"]:active {
  transform: scale(0.975);
}

.btn::after,
.ui-btn::after,
.tap-feedback::after,
[data-pressable="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 55%);
  opacity: 0;
  transition: opacity var(--motion-standard) ease;
  pointer-events: none;
}

.btn:hover::after,
.ui-btn:hover::after,
.tap-feedback:hover::after,
[data-pressable="true"]:hover::after {
  opacity: 1;
}

.btn-primary,
.ui-btn-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 14px 28px rgba(111, 137, 234, 0.24);
}

.btn-primary:hover,
.ui-btn-primary:hover {
  box-shadow: 0 18px 36px rgba(111, 137, 234, 0.28);
}

.btn-secondary,
.ui-btn-secondary {
  background:
    var(--gradient-surface),
    var(--surface-elevated);
  border: 1px solid var(--surface-border);
  color: var(--text-main);
}

.tap-feedback,
.glass-surface,
.pro-card,
.pro-btn,
.nav-item,
.pro-nav-item {
  will-change: transform;
}

.tap-feedback.is-pressed,
[data-pressable="true"].is-pressed {
  transform: scale(0.972);
}

.luma-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-warm));
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 55%, transparent);
  opacity: 0;
  transition:
    transform 520ms var(--ease-premium),
    opacity var(--motion-standard) ease;
  z-index: 9999;
}

.luma-loading-bar.is-visible {
  opacity: 1;
  transform: scaleX(0.72);
}

.luma-loading-bar.is-complete {
  opacity: 0;
  transform: scaleX(1);
}

.luma-loading-overlay {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: color-mix(in srgb, var(--surface-elevated) 90%, transparent);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-soft);
  color: var(--text-main);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity var(--motion-standard) ease,
    transform var(--motion-standard) var(--ease-premium);
  z-index: 9998;
}

.luma-loading-overlay.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.luma-loading-dots {
  display: inline-flex;
  gap: 4px;
}

.luma-loading-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  animation: luma-dot-pulse 1s infinite ease-in-out;
}

.luma-loading-dots span:nth-child(2) {
  animation-delay: 120ms;
}

.luma-loading-dots span:nth-child(3) {
  animation-delay: 240ms;
}

.luma-loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.luma-loading-inline::before {
  content: "";
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--accent-primary) 28%, transparent);
  border-top-color: var(--accent-primary);
  animation: luma-spin 0.8s linear infinite;
}

[aria-busy="true"] {
  cursor: progress;
}

.is-loading {
  pointer-events: none;
  opacity: 0.82;
}

.is-loading > .loading-label-text {
  opacity: 0;
}

.is-loading::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--text-main) 20%, transparent);
  border-top-color: currentColor;
  animation: luma-spin 0.8s linear infinite;
  position: absolute;
}

@keyframes luma-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes luma-dot-pulse {
  0%, 80%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes luma-page-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .ui-card,
  .card,
  .btn,
  .ui-btn,
  .tap-feedback,
  .luma-loading-bar,
  .luma-loading-overlay {
    transition: none !important;
    animation: none !important;
  }
}

.ui-btn-accent {
  background: var(--gradient-accent);
  color: #fff;
}

.ui-btn-success {
  background: var(--gradient-success);
  color: #fff;
}

.ui-btn-warning {
  background: var(--gradient-warning);
  color: var(--text-inverse);
}

.ui-btn-stress {
  background: var(--gradient-stress);
  color: #fff;
}

.ui-kicker {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.ui-h1 {
  color: var(--text-main);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ui-icon-primary { color: var(--color-primary); }
.ui-icon-accent { color: var(--color-accent); }
.ui-icon-success { color: var(--color-success); }
.ui-icon-warning { color: var(--color-warning); }
.ui-icon-stress { color: var(--color-stress); }

.text-primary-blue,
.text-primary-indigo,
.text-accent-blue,
.text-accent-indigo {
  color: var(--color-primary);
}

.text-primary-purple,
.text-accent-purple {
  color: var(--color-accent);
}

.text-success-green {
  color: var(--color-success);
}

.text-warning-amber {
  color: var(--color-warning);
}

.text-error-red {
  color: var(--color-stress);
}

.bg-primary-blue\/20 {
  background-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.bg-success-green\/20 {
  background-color: color-mix(in srgb, var(--color-success) 18%, transparent);
}

.bg-error-red\/20 {
  background-color: color-mix(in srgb, var(--color-stress) 18%, transparent);
}

.bg-accent-purple\/20 {
  background-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.bg-warning-amber\/20 {
  background-color: color-mix(in srgb, var(--color-warning) 18%, transparent);
}

.ui-h2 {
  color: var(--text-main);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.ui-body {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.6;
}

.ui-caption,
.footer-muted {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

input,
select,
textarea,
.ui-input {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md, 1rem);
  color: var(--text-main);
}

input::placeholder,
select::placeholder,
textarea::placeholder,
.ui-input::placeholder {
  color: var(--text-muted);
}

input:focus,
select:focus,
textarea:focus,
.ui-input:focus {
  outline: none;
  border-color: rgba(124, 156, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(124, 156, 255, 0.12);
}

.header-blur {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--surface-border);
}