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

/* ── Design tokens ──────────────────────────────────────────────────────────
   Colors are stored as RGB triplets so Tailwind's opacity modifier syntax
   (e.g. bg-primary/10) works correctly.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand / interactive */
  --color-primary:       37 99 235;    /* #2563EB  blue-600  */
  --color-primary-hover: 29 78 216;    /* #1D4ED8  blue-700  */
  --color-accent:        234 179 8;    /* #EAB308  yellow-500 */
  --color-accent-hover:  202 138 4;    /* #CA8A04  yellow-600 */

  /* Layout */
  --color-background:    248 250 252;  /* #F8FAFC  slate-50  */
  --color-surface:       255 255 255;  /* #FFFFFF            */
  --color-border:        226 232 240;  /* #E2E8F0  slate-200 */

  /* Text */
  --color-text-primary:  15 23 42;     /* #0F172A  slate-900 */
  --color-text-muted:    100 116 139;  /* #64748B  slate-500 */

  /* Shape */
  --radius: 0.5rem;
}

.dark {
  /* Brand / interactive */
  --color-primary:       59 130 246;   /* #3B82F6  blue-500  */
  --color-primary-hover: 37 99 235;    /* #2563EB  blue-600  */
  --color-accent:        250 204 21;   /* #FACC15  yellow-400 */
  --color-accent-hover:  234 179 8;    /* #EAB308  yellow-500 */

  /* Layout */
  --color-background:    15 23 42;     /* #0F172A  slate-900 */
  --color-surface:       30 41 59;     /* #1E293B  slate-800 */
  --color-border:        51 65 85;     /* #334155  slate-700 */

  /* Text */
  --color-text-primary:  203 213 225;  /* #CBD5E1  slate-300 */
  --color-text-muted:    148 163 184;  /* #94A3B8  slate-400 */
}

/* ── Base resets ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  @apply bg-background text-foreground;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Unstyled <button> elements ─────────────────────────────────────────────
   Tailwind Preflight strips all native button appearance. Any <button> that
   has no Tailwind className (i.e. the older inline-styled pages) gets a
   visible baseline so it is always recognisable as a button.
   ────────────────────────────────────────────────────────────────────────── */

button:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-text-primary));
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}

button:not([class]):hover:not(:disabled) {
  background-color: rgb(var(--color-text-muted) / 0.12);
  border-color: rgb(var(--color-text-muted) / 0.5);
}

button:not([class]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}