@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark;
  --color-bg: #0b0e14;
  --color-bg-elevated: #121721;
  --color-bg-elevated-strong: #171e2b;
  --color-border: rgba(148, 163, 184, 0.18);
  --color-border-strong: rgba(148, 163, 184, 0.34);
  --color-text: #e5edf7;
  --color-text-muted: #8d99ae;
  --color-text-subtle: #657084;
  --color-accent: #4c8dff;
  --color-accent-strong: #79a9ff;
  --color-highlight: #ffb04c;
  --color-danger: #ff6b6b;
  --shadow-panel: 0 18px 70px rgba(0, 0, 0, 0.34);
  --shadow-glow: 0 0 42px rgba(76, 141, 255, 0.16);
  --font-sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

[data-theme="light"] {
  color-scheme: light;
  --color-bg: #eef3fa;
  --color-bg-elevated: #ffffff;
  --color-bg-elevated-strong: #f7faff;
  --color-border: rgba(15, 23, 42, 0.16);
  --color-border-strong: rgba(15, 23, 42, 0.28);
  --color-text: #111827;
  --color-text-muted: #475569;
  --color-text-subtle: #64748b;
  --shadow-panel: 0 20px 60px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 38px rgba(76, 141, 255, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(76, 141, 255, 0.14), transparent 34rem),
    radial-gradient(circle at 80% 10%, rgba(255, 176, 76, 0.08), transparent 30rem),
    var(--color-bg);
}

#root {
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: rgba(76, 141, 255, 0.35);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.glass-panel {
  border: 1px solid var(--color-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(18px);
}

.surface-card {
  border: 1px solid var(--color-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    var(--color-bg-elevated);
  box-shadow: 0 10px 42px rgba(0, 0, 0, 0.18);
}

.control-button {
  min-height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: 0.8rem;
  background: rgba(18, 23, 33, 0.76);
  color: var(--color-text);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.control-button:hover {
  border-color: rgba(76, 141, 255, 0.46);
  background: rgba(76, 141, 255, 0.12);
}

.control-button:active {
  transform: translateY(1px);
}

.control-button[aria-pressed="true"],
.control-button[data-active="true"] {
  border-color: rgba(76, 141, 255, 0.68);
  background: rgba(76, 141, 255, 0.18);
  color: #ffffff;
  box-shadow: var(--shadow-glow);
}

.input-field {
  border: 1px solid var(--color-border);
  border-radius: 0.9rem;
  background: rgba(11, 14, 20, 0.54);
  color: var(--color-text);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.input-field:focus {
  border-color: rgba(76, 141, 255, 0.72);
  background: rgba(11, 14, 20, 0.78);
  box-shadow: 0 0 0 4px rgba(76, 141, 255, 0.12);
  outline: none;
}

.engineering-scrollbar {
  scrollbar-color: rgba(76, 141, 255, 0.42) transparent;
  scrollbar-width: thin;
}

.engineering-scrollbar::-webkit-scrollbar {
  height: 0.65rem;
  width: 0.65rem;
}

.engineering-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.engineering-scrollbar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(76, 141, 255, 0.42);
  background-clip: padding-box;
}

.skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.08),
    rgba(148, 163, 184, 0.16),
    rgba(148, 163, 184, 0.08)
  );
  background-size: 220% 100%;
  animation: mechanica-shimmer 1.25s linear infinite;
}

@keyframes mechanica-shimmer {
  from {
    background-position: 120% 0;
  }

  to {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer {
    animation: none;
  }
}

[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

@media (max-width: 767px) {
  :root {
    --shadow-panel: 0 12px 42px rgba(0, 0, 0, 0.28);
  }

  body {
    background:
      radial-gradient(circle at top, rgba(76, 141, 255, 0.12), transparent 26rem),
      var(--color-bg);
  }
}