@import './tokens.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body, #root {
    @apply h-full;
  }
  body {
    @apply antialiased;
    background-color: rgb(var(--bg));
    color: white;
    font-family: 'Segoe UI', 'Inter', sans-serif;
  }
  @media (prefers-color-scheme: light) {
    body {
      color: black;
    }
  }
}

@layer components {
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  .card {
    @apply rounded-2xl backdrop-blur-md border p-6;
    background-color: rgb(var(--surface));
    border-color: rgb(var(--border));
    box-shadow: var(--shadow);
  }
  .btn {
    @apply inline-flex items-center justify-center rounded-xl px-4 py-2 font-semibold transition focus:outline-none focus:ring-2;
  }
  .btn-primary {
    background-color: rgb(var(--accent));
    color: rgb(var(--accent-contrast));
    @apply focus:ring-[color:rgb(var(--ring)/0.6)];
  }
  .btn-ghost {
    @apply bg-transparent text-white hover:bg-white/10 focus:ring-[color:rgb(var(--ring)/0.6)];
  }
  input, select, textarea {
    @apply w-full rounded-lg px-3 py-2 bg-transparent focus:outline-none focus:ring-2;
    background-color: rgb(var(--surface));
    border: 1px solid rgb(var(--border));
    color: white;
  }
  @media (prefers-color-scheme: light) {
    input, select, textarea {
      color: black;
    }
  }
  label {
    @apply block text-sm font-medium mb-1;
    color: rgb(var(--muted));
  }
  .subtle {
    color: rgb(var(--muted));
  }
  .header {
    @apply sticky top-0 z-10 backdrop-blur-md border-b shadow-sm;
    background-color: rgb(var(--surface));
    border-color: rgb(var(--border));
  }
  .header-inner {
    @apply container flex items-center justify-between py-3;
  }
  .header-title {
    @apply text-sm font-semibold;
  }
  .flag-selector {
    @apply flex justify-center items-center gap-4 mb-4;
  }
  .flag-option {
    @apply flex flex-col items-center gap-2 rounded-md px-2 py-1 text-xs font-medium text-white/80 transition;
    background: transparent;
    border: none;
  }
  .flag-option img {
    @apply w-20 rounded-md transition-transform shadow;
  }
  .flag-option:hover img {
    @apply scale-105;
  }
  .flag-option.selected {
    @apply ring-2 ring-accent text-white;
  }
  .dashboard {
    @apply grid gap-6 mt-6 grid-cols-1;
  }
  .side-cards {
    @apply grid gap-6 md:grid-cols-3;
  }
  .preview-card {
    @apply bg-white/60 dark:bg-neutral-800/60 backdrop-blur-md rounded-2xl p-8 text-center;
  }
  .toast {
    @apply fixed bottom-6 right-6 bg-neutral-900 text-white px-4 py-3 rounded-lg shadow-lg;
  }
  .stat-card {
    @apply text-center;
  }
  .stat-value {
    @apply text-3xl font-bold text-accent;
  }
  .stat-label {
    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
  }
  .button-row {
    @apply flex gap-2 flex-wrap mt-4;
  }
  .plate-block {
    @apply mb-6 pb-6 border-b border-gray-200 last:border-b-0 flex flex-col gap-4 md:flex-row md:gap-8;
  }
  .mt {
    @apply mt-4;
  }
  .mb {
    @apply mb-2;
  }
  .mb-lg {
    @apply mb-6;
  }
  .ml {
    @apply ml-2;
  }
  .form-row {
    @apply flex flex-col gap-2 mb-2;
  }
  .form-row.checkbox {
    @apply flex-row items-center;
  }
  .start-container {
    @apply flex items-center justify-center h-[calc(100vh-4rem)];
  }
  .start-card {
    @apply flex flex-col gap-4 w-full max-w-xs;
  }
}