@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* ── Surface (backgrounds) ─────────────────────────── */
  --color-surface-0:   #f8fafc;
  --color-surface-50:  #f1f5f9;
  --color-surface-100: #ffffff;
  --color-surface-200: #f1f5f9;
  --color-surface-300: #e2e8f0;
  --color-surface-400: #cbd5e1;

  /* ── Brand (maroon base: #88184d on buttons = brand-600) ─ */
  --color-brand:      #88184d;
  --color-brand-dark: #52102f;
  --color-brand-50:  #fdf2f7;
  --color-brand-100: #fae8f0;
  --color-brand-200: #f2c9dc;
  --color-brand-300: #e89bbf;
  --color-brand-400: #d66297;
  --color-brand-500: #bc3472;
  --color-brand-600: #88184d;
  --color-brand-700: #6d143e;
  --color-brand-800: #52102f;
  --color-brand-900: #380a20;

  /* ── Status ────────────────────────────────────────── */
  --color-success: #059669;
  --color-warning: #d97706;
  --color-danger:  #dc2626;

  /*
   * Remap zinc so existing classes (text-zinc-100 etc.)
   * produce correct contrast on a light background.
   * Low numbers → dark (text), high numbers → light (bg).
   */
  --color-zinc-50:  #020617;
  --color-zinc-100: #111827;
  --color-zinc-200: #1f2937;
  --color-zinc-300: #374151;
  --color-zinc-400: #4b5563;
  --color-zinc-500: #6b7280;
  --color-zinc-600: #9ca3af;
  --color-zinc-700: #d1d5db;
  --color-zinc-800: #f3f4f6;
  --color-zinc-900: #f9fafb;
  --color-zinc-950: #ffffff;

  /*
   * Remap status-accent shades so 400-level (used for
   * text in the dark theme) is readable on white.
   */
  --color-emerald-400: #059669;
  --color-red-400:     #dc2626;
  --color-amber-400:   #d97706;
  --color-fuchsia-500: #7c3aed;
  --color-fuchsia-600: #6d28d9;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

body {
  font-family: var(--font-sans);
  background: var(--color-surface-0);
  color: #111827;
}

/* Simple text emphasis — replaces old gradient-text */
.gradient-text {
  color: #1e293b;
  font-weight: 700;
}

.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: #e2e8f0;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
}

@utility glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Default elevation for cards / panels */
.card-surface {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 2px 8px rgba(15, 23, 42, 0.055),
    0 0 0 1px rgba(15, 23, 42, 0.02);
}

.card-hover {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.card-hover:hover {
  border-color: #cbd5e1;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 8px 20px rgba(15, 23, 42, 0.09),
    0 0 0 1px rgba(15, 23, 42, 0.03);
}
