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

:root {
  --color-bg: 246 248 252;
  --color-surface: 255 255 255;
  --color-panel: 244 247 252;
  --color-elevated: 255 255 255;
  --color-border: 203 213 225;
  --color-foreground: 15 23 42;
  --color-muted: 71 85 105;
  --color-subtle: 100 116 139;
  --color-accent: 37 99 235;
  --color-warm: 217 119 6;
  --color-success: 22 163 74;
  --color-warning: 202 138 4;
  --color-danger: 220 38 38;
}

:root[data-theme='dark'] {
  --color-bg: 11 14 20;
  --color-surface: 18 23 33;
  --color-panel: 18 23 33;
  --color-elevated: 24 31 45;
  --color-border: 48 59 78;
  --color-foreground: 246 248 251;
  --color-muted: 158 170 190;
  --color-subtle: 111 124 145;
  --color-accent: 76 141 255;
  --color-warm: 255 176 76;
  --color-success: 52 211 153;
  --color-warning: 251 191 36;
  --color-danger: 248 113 113;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: rgb(var(--color-bg));
  color-scheme: dark light;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 16% -10%, rgb(var(--color-accent) / 0.16), transparent 34rem),
    radial-gradient(circle at 88% 2%, rgb(var(--color-warm) / 0.1), transparent 28rem),
    linear-gradient(180deg, rgb(var(--color-bg)), rgb(var(--color-bg)));
  color: rgb(var(--color-foreground));
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings:
    'cv02' 1,
    'cv03' 1,
    'cv04' 1,
    'tnum' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

button {
  -webkit-tap-highlight-color: transparent;
}

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

::selection {
  background: rgb(var(--color-accent) / 0.28);
  color: rgb(var(--color-foreground));
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--color-bg));
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--color-border));
  border: 3px solid rgb(var(--color-bg));
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-accent) / 0.7);
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@layer base {
  #root {
    min-height: 100vh;
  }
}

@layer components {
  .skip-link {
    @apply sr-only fixed left-4 top-4 z-[100] rounded-xl border border-accent/50 bg-panel px-4 py-2 text-sm font-semibold text-foreground shadow-glow;
  }

  .skip-link:focus,
  .skip-link:focus-visible {
    @apply not-sr-only;
  }

  .glass-panel {
    @apply border border-border/70 bg-panel/85 shadow-panel backdrop-blur-xl;
  }

  .elevated-panel {
    @apply border border-border/70 bg-elevated shadow-panel;
  }

  .hairline {
    @apply border-border/70;
  }

  .interactive-ring {
    @apply transition duration-200 ease-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent;
  }

  .text-balance {
    text-wrap: balance;
  }

  .surface-grid {
    background-image:
      linear-gradient(rgb(var(--color-border) / 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgb(var(--color-border) / 0.08) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
  }

  .skeleton-shimmer {
    @apply relative overflow-hidden bg-border/30;
  }

  .skeleton-shimmer::after {
    position: absolute;
    inset: 0;
    content: '';
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      transparent,
      rgb(var(--color-foreground) / 0.08),
      transparent
    );
    animation: shimmer 1.7s infinite;
  }

  .thumbnail-radial {
    background:
      radial-gradient(circle at 24% 20%, rgb(var(--color-accent) / 0.24), transparent 34%),
      radial-gradient(circle at 78% 18%, rgb(var(--color-warm) / 0.18), transparent 26%),
      linear-gradient(145deg, rgb(var(--color-surface) / 0.9), rgb(var(--color-panel) / 0.9));
  }
}