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

:root {
  --bg: #0c1117;
  --bg-elevated: #151b24;
  --bg-panel: #1a222e;
  --border: #2a3544;
  --text: #e8eef6;
  --text-muted: #8b9bb0;
  --accent: #3d8bfd;
  --accent-soft: rgba(61, 139, 253, 0.15);
  --danger: #f07178;
  --success: #7fd992;
}

html,
body,
#__nuxt {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(61, 139, 253, 0.18), transparent),
    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(127, 217, 146, 0.08), transparent),
    linear-gradient(180deg, #0c1117 0%, #0a0e14 100%);
  background-attachment: fixed;
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition;
  }

  .panel {
    @apply rounded-lg border backdrop-blur;
    border-color: var(--border);
    background-color: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  }

  .btn-primary {
    @apply btn text-white hover:brightness-110 disabled:opacity-50;
    background-color: var(--accent);
  }

  .btn-ghost {
    @apply btn bg-transparent hover:brightness-125;
    border: 1px solid var(--border);
    color: var(--text);
  }

  .btn-danger {
    @apply btn text-white hover:brightness-110;
    background-color: color-mix(in srgb, var(--danger) 90%, transparent);
  }

  .input {
    @apply w-full rounded-md px-3 py-2 text-sm outline-none;
    border: 1px solid var(--border);
    background-color: var(--bg-elevated);
    color: var(--text);
  }

  .input:focus {
    box-shadow: 0 0 0 2px var(--accent);
  }

  .input::placeholder {
    color: var(--text-muted);
  }
}