/* =========================================================
   NeedAHost — Design Tokens
   Single source of truth for colors, spacing, type, motion.
   ========================================================= */

:root {
  /* Brand palette */
  --ink: #1a1208;
  --ink-2: #2d2010;
  --sand: #f5f0e8;
  --warm: #e8dcc8;
  --amber: #c8800a;
  --amber-light: #fdf3e0;
  --muted: #7a6e5f;

  /* Surfaces */
  --card-bg: #ffffff;
  --border: rgba(26, 18, 8, 0.10);
  --border-strong: rgba(26, 18, 8, 0.20);

  /* Status */
  --success: #3bb273;
  --danger: #c0392b;

  /* Avatar palette */
  --av-1: #c8800a;
  --av-2: #2d6a4f;
  --av-3: #553772;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 100px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(26, 18, 8, 0.06);
  --shadow-md: 0 4px 24px rgba(26, 18, 8, 0.10);
  --shadow-lg: 0 8px 32px rgba(26, 18, 8, 0.12);

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Layout */
  --nav-h: 72px;
  --max-w: 1240px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s;
  --t-base: 0.2s;
  --t-slow: 0.4s;
}