@import "tailwindcss";

/* ─────────────────────────────────────────────────────────────────────────
   Design tokens — three layers (§12). Markup references ROLES only
   (bg-surface, text-primary, text-positive), never the raw palette. Re-theming
   is then a one-file edit to the :root role map below.
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Primitives — the raw palette. "What colors exist." Rarely touched. */
@theme {
  --color-cream-50: #fdfbf7;
  --color-cream-100: #f6efe3;
  --color-terracotta-400: #e8917b;
  --color-terracotta-500: #e07a5f;
  --color-terracotta-600: #cf5f43;
  --color-stone-200: #e7e2da;
  --color-stone-300: #d6cfc4;
  --color-stone-500: #8a8178;
  --color-stone-700: #4a443d;
  --color-stone-800: #2b2622;
  --color-stone-900: #1c1916;
  --color-money-500: #16a34a;
  --color-money-600: #15803d;
  --color-coral-400: #f4836b;
  --color-amber-500: #f59e0b;
  --color-blue-500: #3b82f6;
  --color-red-500: #ef4444;

  /* Shape + depth tokens (warmth lives here too). */
  --radius-card: 0.9rem;
  --radius-pill: 9999px;
  --shadow-card: 0 1px 3px rgb(43 38 34 / 0.08), 0 1px 2px rgb(43 38 34 / 0.04);
}

/* 2. Semantic roles — what each color is FOR. THE re-theme layer. */
:root {
  --background: var(--color-cream-50);
  --surface: #ffffff;
  --surface-muted: var(--color-cream-100);
  --foreground: var(--color-stone-800);
  --muted: var(--color-stone-500);
  --border: var(--color-stone-200);
  --primary: var(--color-terracotta-500);
  --primary-hover: var(--color-terracotta-600);
  --primary-foreground: #ffffff;
  --positive: var(--color-money-600);
  --attention: var(--color-coral-400);
  --warning: var(--color-amber-500);
  --info: var(--color-blue-500);
  --danger: var(--color-red-500);
}

/* 3. Bridge — `inline` makes the bg- and text- utilities emit var() so a role
   can be swapped at runtime (dark mode / per-business theme later). */
@theme inline {
  --color-background: var(--background);
  --color-surface: var(--surface);
  --color-surface-muted: var(--surface-muted);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-border: var(--border);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-foreground: var(--primary-foreground);
  --color-positive: var(--positive);
  --color-attention: var(--attention);
  --color-warning: var(--warning);
  --color-info: var(--info);
  --color-danger: var(--danger);
}

/* Toast notifications: slide+fade in/out. Colors reference roles. */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  background: var(--surface);
  border-left: 4px solid var(--info);
  color: var(--foreground);
  opacity: 0;
  transform: translateX(120%);
  transition: opacity 300ms ease, transform 300ms ease;
}

.toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.toast--leaving {
  opacity: 0;
  transform: translateX(120%);
}

.toast--success { border-left-color: var(--positive); }
.toast--error   { border-left-color: var(--danger); }
.toast--warning { border-left-color: var(--warning); }
.toast--info    { border-left-color: var(--info); }