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

:root {
  --c-base: 250 250 250;
  --c-surface: 255 255 255;
  --c-raised: 245 245 245;
  --c-edge: 229 229 229;
  --c-ink: 23 23 23;
  --c-muted: 115 115 115;
  --c-accent: 23 23 23;
  --c-accent-strong: 10 10 10;
  --c-danger: 220 38 38;
  --c-ok: 22 163 74;
}

.dark {
  --c-base: 10 10 10;
  --c-surface: 23 23 23;
  --c-raised: 38 38 38;
  --c-edge: 64 64 64;
  --c-ink: 250 250 250;
  --c-muted: 163 163 163;
  --c-accent: 250 250 250;
  --c-accent-strong: 229 229 229;
  --c-danger: 248 113 113;
  --c-ok: 74 222 128;
}

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body {
    @apply bg-base text-ink font-sans;
    min-height: 100vh;
  }

  ::selection {
    background: rgba(0, 0, 0, 0.12);
  }

  .dark ::selection {
    background: rgba(255, 255, 255, 0.2);
  }

  summary {
    list-style: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }
}

@layer components {
  .card {
    @apply rounded-lg border border-edge bg-surface;
  }

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium
      transition-colors disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-primary {
    @apply bg-accent text-surface hover:bg-accent-strong;
  }

  .btn-ghost {
    @apply border border-edge bg-surface text-ink hover:bg-raised;
  }

  .btn-danger {
    @apply border border-edge bg-surface text-danger hover:border-danger/40;
  }

  .field {
    @apply w-full rounded-md border border-edge bg-surface px-3 py-2.5 text-sm text-ink
      placeholder:text-muted outline-none transition-colors focus:border-ink;
  }
}