/* Space / Nebula theme — override Shoelace dark base tokens */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Shoelace token overrides (applied under sl-theme-dark) ─────────────── */
:root,
.sl-theme-dark {
  /* Fonts */
  --sl-font-sans: 'Space Grotesk', system-ui, sans-serif;
  --sl-font-mono: 'Space Mono', 'Courier New', monospace;
  --sl-letter-spacing-normal: 0.02em;

  /* Gray scale — purple-tinted deep space */
  --sl-color-gray-50:  hsl(258 30% 8%);
  --sl-color-gray-100: hsl(258 28% 12%);
  --sl-color-gray-200: hsl(258 25% 18%);
  --sl-color-gray-300: hsl(258 22% 26%);
  --sl-color-gray-400: hsl(258 18% 38%);
  --sl-color-gray-500: hsl(258 14% 50%);
  --sl-color-gray-600: hsl(258 12% 62%);
  --sl-color-gray-700: hsl(258 10% 72%);
  --sl-color-gray-800: hsl(258 8%  82%);
  --sl-color-gray-900: hsl(258 6%  90%);
  --sl-color-gray-950: hsl(258 4%  96%);

  /* Neutral base */
  --sl-color-neutral-0:   hsl(258 35% 6%);
  --sl-color-neutral-50:  var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);
  --sl-color-neutral-1000: hsl(258 4% 98%);

  /* Primary — electric violet */
  --sl-color-primary-50:  hsl(265 70% 12%);
  --sl-color-primary-100: hsl(265 68% 18%);
  --sl-color-primary-200: hsl(265 66% 26%);
  --sl-color-primary-300: hsl(265 64% 36%);
  --sl-color-primary-400: hsl(265 70% 48%);
  --sl-color-primary-500: hsl(265 80% 58%);
  --sl-color-primary-600: hsl(265 82% 65%);
  --sl-color-primary-700: hsl(265 80% 73%);
  --sl-color-primary-800: hsl(265 70% 82%);
  --sl-color-primary-900: hsl(265 60% 90%);
  --sl-color-primary-950: hsl(265 50% 95%);

  /* Danger — nebula hot pink / fuchsia */
  --sl-color-danger-50:  hsl(300 60% 10%);
  --sl-color-danger-100: hsl(300 58% 16%);
  --sl-color-danger-200: hsl(300 56% 24%);
  --sl-color-danger-300: hsl(300 60% 34%);
  --sl-color-danger-400: hsl(300 65% 46%);
  --sl-color-danger-500: hsl(300 72% 56%);
  --sl-color-danger-600: hsl(300 74% 64%);
  --sl-color-danger-700: hsl(300 70% 72%);
  --sl-color-danger-800: hsl(300 62% 82%);
  --sl-color-danger-900: hsl(300 52% 90%);
  --sl-color-danger-950: hsl(300 44% 95%);

  /* Success — cosmic teal */
  --sl-color-success-50:  hsl(175 60% 8%);
  --sl-color-success-100: hsl(175 58% 13%);
  --sl-color-success-200: hsl(175 56% 20%);
  --sl-color-success-300: hsl(175 58% 30%);
  --sl-color-success-400: hsl(175 62% 40%);
  --sl-color-success-500: hsl(175 68% 48%);
  --sl-color-success-600: hsl(175 66% 56%);
  --sl-color-success-700: hsl(175 60% 67%);
  --sl-color-success-800: hsl(175 52% 78%);
  --sl-color-success-900: hsl(175 44% 88%);
  --sl-color-success-950: hsl(175 36% 94%);

  /* Warning — keep starlight amber */
  --sl-color-warning-50:  hsl(38 80% 10%);
  --sl-color-warning-100: hsl(38 78% 16%);
  --sl-color-warning-200: hsl(38 76% 24%);
  --sl-color-warning-300: hsl(38 78% 34%);
  --sl-color-warning-400: hsl(38 82% 46%);
  --sl-color-warning-500: hsl(38 88% 56%);
  --sl-color-warning-600: hsl(38 86% 64%);
  --sl-color-warning-700: hsl(38 80% 72%);
  --sl-color-warning-800: hsl(38 70% 82%);
  --sl-color-warning-900: hsl(38 60% 90%);
  --sl-color-warning-950: hsl(38 50% 95%);

  /* Focus ring — cyan glow */
  --sl-focus-ring-color: hsl(190 80% 55%);
  --sl-focus-ring-style: 0 0 0 2px hsl(190 80% 55% / 50%);

  /* Input surfaces */
  --sl-input-background-color:         hsl(258 30% 10%);
  --sl-input-background-color-hover:   hsl(258 28% 13%);
  --sl-input-background-color-focus:   hsl(258 28% 12%);
  --sl-input-border-color:             hsl(258 25% 28%);
  --sl-input-border-color-hover:       hsl(265 40% 42%);
  --sl-input-border-color-focus:       hsl(265 70% 55%);
  --sl-input-focus-ring-color:         hsl(265 80% 60% / 40%);

  /* Panel surfaces */
  --sl-panel-background-color: hsl(258 30% 10%);
  --sl-panel-border-color:     hsl(258 25% 22%);

  /* Shadows — purple glow */
  --sl-shadow-x-small: 0 1px 2px  hsl(265 50% 5% / 0.6),  0 0 0 1px hsl(265 30% 20% / 0.2);
  --sl-shadow-small:   0 2px 6px  hsl(265 50% 5% / 0.7),  0 0 0 1px hsl(265 30% 20% / 0.2);
  --sl-shadow-medium:  0 4px 14px hsl(265 50% 5% / 0.8),  0 0 12px hsl(265 60% 30% / 0.15);
  --sl-shadow-large:   0 8px 28px hsl(265 50% 5% / 0.9),  0 0 24px hsl(265 60% 30% / 0.2);
  --sl-shadow-x-large: 0 16px 48px hsl(265 50% 5% / 0.95), 0 0 40px hsl(265 60% 35% / 0.25);
}

/* ── Body ────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--sl-font-sans);
  color: var(--sl-color-gray-800);
  background:
    radial-gradient(ellipse at 15% 25%, hsl(265 70% 18% / 0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 75%, hsl(215 80% 18% / 0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 65% 10%, hsl(295 60% 15% / 0.3) 0%, transparent 45%),
    hsl(258 35% 6%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ── Shared utility classes ─────────────────────────────────────────────── */

.mono {
  font-family: var(--sl-font-mono, 'Space Mono', monospace);
}

/* Layout */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--sl-color-gray-200);
  background: var(--sl-color-neutral-0);
}

.site-main {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.site-footer {
  border-top: 1px solid var(--sl-color-gray-200);
  text-align: center;
}

/* Surfaces */
.surface {
  background: var(--sl-color-gray-100);
  border: 1px solid var(--sl-color-gray-300);
  border-radius: var(--sl-border-radius-large, 0.5rem);
}

/* Inputs */
.input {
  background: var(--sl-color-gray-100);
  border: 1px solid var(--sl-color-gray-300);
  border-radius: var(--sl-border-radius-large, 0.5rem);
  color: var(--sl-color-gray-800);
}

.input::placeholder {
  color: var(--sl-color-gray-400);
}

.input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--sl-color-primary-500);
  border-color: transparent;
}

/* Buttons */
.btn-primary {
  background: var(--sl-color-primary-500);
  color: white;
  border: none;
  border-radius: var(--sl-border-radius-large, 0.5rem);
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary:hover {
  background: var(--sl-color-primary-400);
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--sl-color-gray-300);
  border-radius: var(--sl-border-radius-medium, 0.375rem);
  color: var(--sl-color-gray-800);
  cursor: pointer;
  transition: background 0.15s;
}

.btn-ghost:hover {
  background: var(--sl-color-gray-200);
}

/* Typography */
.text-heading {
  color: var(--sl-color-gray-950);
}

.text-body {
  color: var(--sl-color-gray-800);
}

.text-muted {
  color: var(--sl-color-gray-600);
}

.text-faint {
  color: var(--sl-color-gray-500);
}

/* Labels & tags */
.label {
  font-family: var(--sl-font-mono, 'Space Mono', monospace);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sl-color-gray-600);
  text-transform: uppercase;
}

.tag {
  font-family: var(--sl-font-mono, 'Space Mono', monospace);
  font-size: 0.75rem;
  background: var(--sl-color-gray-200);
  color: var(--sl-color-gray-700);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

/* Cards */
.bit-card {
  display: block;
  border-radius: 0.75rem;
  padding: 1.25rem;
  text-decoration: none;
  background: var(--sl-color-gray-100);
  border: 1px solid var(--sl-color-gray-300);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.bit-card:hover {
  transform: translateY(-2px);
  border-color: var(--sl-color-primary-400);
  box-shadow: 0 4px 24px hsl(265 80% 50% / 0.2), 0 0 12px hsl(265 60% 40% / 0.15);
}