@import "tailwindcss";

:root {
  --background: #f3f4f6;
  --foreground: #0b1220;
  --surface: #ffffff;
  --surface-muted: #e0e7ff;
  --surface-dark: #0f172a;
  --card-border: rgba(15, 23, 42, 0.08);
  --card-shadow: rgba(15, 23, 42, 0.08);
  --primary-start: #6366f1;
  --primary-end: #4338ca;
  --accent-emerald: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --signal-1: #22c55e;
  --signal-2: #84cc16;
  --signal-3: #f59e0b;
  --signal-4: #f97316;
  --signal-5: #ef4444;
  --font-sans: "SF Pro Text", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0b1220;
    --foreground: #f8fafc;
    --surface: #0f172a;
    --surface-muted: #1e293b;
    --card-border: rgba(148, 163, 184, 0.35);
    --card-shadow: rgba(8, 47, 73, 0.35);
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  margin: 0;
  min-height: 100vh;
}

::selection {
  background: rgba(99, 102, 241, 0.35);
  color: var(--foreground);
}

@layer base {
  a {
    @apply text-indigo-500 transition hover:text-indigo-600 dark:text-indigo-300 dark:hover:text-indigo-200;
  }

  button {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent;
  }

  details summary {
    list-style: none;
  }

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

@layer utilities {
  .bg-surface {
    background: var(--surface);
  }

  .bg-surface-dark {
    background: var(--surface-dark);
  }

  .gradient-indigo {
    background-image: linear-gradient(135deg, var(--primary-start), var(--primary-end));
  }

  .gradient-teal {
    background-image: linear-gradient(135deg, #0ea5e9, #22d3ee);
  }

  .gradient-sunset {
    background-image: linear-gradient(135deg, #fb923c, #f97316);
  }

  .gradient-rose {
    background-image: linear-gradient(135deg, #f43f5e, #fb7185);
  }

  .card-surface {
    background: var(--surface);
    box-shadow: 0 18px 45px -30px var(--card-shadow);
  }

  .card-border {
    border: 1px solid var(--card-border);
  }

  .focus-ring {
    @apply focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent;
  }
}