@import "tailwindcss";

@theme {
  --font-mono: var(--font-fira-mono), ui-monospace, monospace;
  --color-bg: #0a0a0a;
  --color-surface: #141414;
  --color-surface-hover: #1c1c1c;
  --color-border: #262626;
  --color-text: #ededed;
  --color-text-secondary: #a0a0a0;
  --color-accent: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-success: #22c55e;
  --color-tag-bg: #1e293b;
  --color-tag-text: #a1b2c8;
  --color-code-bg: #111111;
  --color-transport-stdio: #22c55e;
  --color-transport-stdio-bg: color-mix(in srgb, #22c55e 10%, transparent);
  --color-transport-remote: #a855f7;
  --color-transport-remote-bg: color-mix(in srgb, #a855f7 10%, transparent);
  --color-official: #3b82f6;
  --color-official-bg: color-mix(in srgb, #3b82f6 10%, transparent);
  --color-warning: #f59e0b;
  --color-warning-bg: color-mix(in srgb, #f59e0b 10%, transparent);
  --color-warning-border: color-mix(in srgb, #f59e0b 30%, transparent);
  --color-warning-subtle: color-mix(in srgb, #f59e0b 12%, transparent);
  --color-warning-light: color-mix(in srgb, #f59e0b 80%, white);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html {
  scroll-padding-block-start: 6rem;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus-visible ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Remove default focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Smooth selection color */
::selection {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* CRT sweeping scanline */
@keyframes scanline-sweep {
  0% {
    top: -5%;
  }
  100% {
    top: 105%;
  }
}

/* Customizable select — progressive enhancement for Chrome 135+ */
@supports (appearance: base-select) {
  .select-custom,
  .select-custom::picker(select) {
    appearance: base-select !important;
  }

  .select-custom::picker(select) {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.25rem;
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.04);
    transition:
      opacity 200ms ease,
      scale 200ms ease;
    transition-behavior: allow-discrete;
    opacity: 1;
    scale: 1;
  }

  .select-custom:not(:open)::picker(select) {
    opacity: 0;
    scale: 1 0.9;
  }

  @starting-style {
    .select-custom:open::picker(select) {
      opacity: 0;
      scale: 1 0.9;
    }
  }

  .select-custom::picker-icon {
    display: block;
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--color-text-secondary);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E")
      center / contain no-repeat;
    transition: rotate 200ms ease;
  }

  .select-custom:open::picker-icon {
    rotate: 180deg;
  }

  .select-custom option {
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    color: var(--color-text-secondary);
    transition:
      background-color 100ms ease,
      color 100ms ease;
  }

  .select-custom option:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
  }

  .select-custom option:checked {
    color: var(--color-accent);
    background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }

  .select-custom option::checkmark {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .select-custom::picker(select) {
      transition: none;
    }

    .select-custom::picker-icon {
      transition: none;
    }
  }
}
