/* =====================================================================
   Neighborhood Table — design tokens
   Warm, restrained product-UI system. One brand color, warm-cast neutrals,
   display+body type pairing, soft warm-tinted shadows.

   HOW TO RE-SKIN (make it yours):
     1. Replace the 11 --brand-* ramp values with your brand's ramp.
     2. Swap --font-display / --font-sans.
     3. (Optional) retint --surface + neutrals toward your brand's hue.
   Everything else — components, shadows, radii, motion — follows.

   Two ways to consume:
     • Tailwind v4: keep the @theme block (delete the :root block if you want
       Tailwind's stone scale for neutrals). Utilities like `bg-brand-600`,
       `text-brand-800`, `shadow-card`, `font-display` come for free.
     • Plain CSS / any framework: keep the :root block; reference the vars
       directly (see components.css). Delete the @theme block.
   ===================================================================== */

/* ---- Tailwind v4 (paste after `@import "tailwindcss";`) ---------------- */
@theme {
  /* BRAND ramp — swap these 11 to re-skin the whole system */
  --color-brand-50: #f1f9f2;
  --color-brand-100: #ddf1e0;
  --color-brand-200: #bde3c4;
  --color-brand-300: #90ce9c;
  --color-brand-400: #62b471;
  --color-brand-500: #41a34d;
  --color-brand-600: #328140;
  --color-brand-700: #2a6736;
  --color-brand-800: #25532e;
  --color-brand-900: #1f4527;
  --color-brand-950: #102615;

  /* Warm off-white page surface — never stark white */
  --color-surface: #faf9f6;

  /* Type — swap to re-skin. Neutrals use Tailwind's built-in `stone` scale. */
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-josefin), var(--font-inter), ui-sans-serif, sans-serif;

  /* Warm-tinted shadows (rgb of stone-900), never cool black */
  --shadow-card: 0 1px 2px rgb(28 25 23 / 0.05), 0 4px 16px rgb(28 25 23 / 0.06);
  --shadow-raised: 0 2px 4px rgb(28 25 23 / 0.06), 0 12px 32px rgb(28 25 23 / 0.1);
}

/* ---- Plain CSS (framework-agnostic) ----------------------------------- */
:root {
  /* Brand */
  --brand-50: #f1f9f2;
  --brand-100: #ddf1e0;
  --brand-200: #bde3c4;
  --brand-300: #90ce9c;
  --brand-400: #62b471;
  --brand: #41a34d;         /* brand-500, the identity color */
  --brand-action: #328140;  /* brand-600, primary buttons */
  --brand-deep: #2a6736;    /* brand-700, hover/emphasis */
  --brand-800: #25532e;
  --brand-900: #1f4527;
  --brand-950: #102615;

  /* Surface + warm-cast neutral ramp (Tailwind `stone`) */
  --surface: #faf9f6;       /* the page — white is only for floating surfaces */
  --ink: #1c1917;           /* stone-900 — headings */
  --body: #292524;          /* stone-800 — default reading text (not light gray) */
  --muted: #57534e;         /* stone-600 — secondary text that must still read */
  --faint: #78716c;         /* stone-500 — smallest meta only (labels/timestamps) */
  --border: #e7e5e4;        /* stone-200 — hairline dividers/edges */
  --border-hover: #d6d3d1;  /* stone-300 — border on hover */
  --hover-surface: #f5f5f4; /* stone-100 — ghost hover fill */

  /* Semantic (used ONLY for meaning, never decoration) */
  --amber: #b45309;         /* referrals, warnings, time-sensitive */
  --amber-tint: #fef3c7;
  --danger: #b91c1c;        /* destructive, risk, do-not */
  --danger-tint: #fee2e2;
  --info: #1d4ed8;          /* informational accent */

  /* Radii */
  --radius-control: 0.5rem; /* buttons, inputs, tabs */
  --radius-callout: 0.75rem;/* insets, callouts */
  --radius-card: 1rem;      /* cards, tables, panels */
  --radius-sheet: 1.5rem;   /* modal top edge on mobile */
  --radius-full: 9999px;    /* pills, badges */

  /* Elevation (warm-tinted) */
  --shadow-card: 0 1px 2px rgb(28 25 23 / 0.05), 0 4px 16px rgb(28 25 23 / 0.06);
  --shadow-raised: 0 2px 4px rgb(28 25 23 / 0.06), 0 12px 32px rgb(28 25 23 / 0.1);

  /* Motion — exponential ease-out, no bounce */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 200ms;

  /* Type stacks — swap to re-skin */
  --font-display: "Josefin Sans", ui-sans-serif, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* One-shot entrances (pair with the reduced-motion reset below). */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}