/**
 * EnjoyTheFloor theme tokens — Locked by Rama 2026-09-25
 * SoR: https://app.notion.com/p/3e75d14f4660818da28be1ce76b3e73f
 * Website + in-app share this set (one SPA).
 * Hard-gate: do not invent off-token hex in UI PRs.
 */

:root {
  /* Surfaces */
  --background: #fbf6ee;
  --foreground: #2a211c;
  --card: #fffdf9;
  --card-foreground: #2a211c;

  /* Muted */
  --muted: #f1e8dc;
  --muted-foreground: #6e6158;

  /* Borders / controls */
  --border: #e7dccd;
  --input: #d9cbb8;
  --ring: #c9563a;

  /* Brand */
  --primary: #c9563a;
  --primary-foreground: #ffffff;
  --secondary: #f1e8dc;
  --secondary-foreground: #2a211c;
  --accent: #fbe3d9;
  --accent-foreground: #8e3b26;

  /* Feedback */
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --success: #4f8a5b;
  --success-soft: #e1eedf;
  --success-soft-foreground: #2f5a38;
  --warning: #c7851f; /* Tonight / soft nudge — not panic red */
  --warning-soft: #fbebc8;
  --warning-soft-foreground: #5e3e0a;
  --info: #4a6fa5;

  --radius: 0.75rem;
}

.dark {
  --background: #1c1714;
  --foreground: #fbf6ee;
  --card: #241e1a;
  --card-foreground: #fbf6ee;
  --muted: #2a211c;
  --muted-foreground: #a89a8e;
  --border: #3a312a;
  --input: #3a312a;
  --ring: #c9563a;
  --primary: #c9563a;
  --primary-foreground: #ffffff;
  --secondary: #2a211c;
  --secondary-foreground: #fbf6ee;
  --accent: #3a241c;
  --accent-foreground: #fbe3d9;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --success: #4f8a5b;
  --success-soft: #1e2e22;
  --success-soft-foreground: #c5e0cb;
  --warning: #c7851f;
  --warning-soft: #2e2414;
  --warning-soft-foreground: #f5e0b8;
  --info: #4a6fa5;
}

/* Utility helpers for early screens before Tailwind theme wiring */
.etf-bg {
  background-color: var(--background);
  color: var(--foreground);
}
.etf-card {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.etf-btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius);
}
.etf-muted {
  background-color: var(--muted);
  color: var(--muted-foreground);
}