/* ==========================================================================
   BUCKET CHAT — DESIGN SYSTEM & TOKENS
   Refined Warm Cream & Earthy Architectural Palette (No Dark Mode)
   ========================================================================== */

:root {
  /* Foundation & Surfaces */
  --bg-app: #f0e3c6;              /* Cream base */
  --bg-surface: #f9f9f5;          /* Off-white highlight surface */
  --bg-surface-elevated: #ffffff; /* Pure card elevation */
  --bg-surface-subtle: #e9dcbe;   /* Cream depth / hover tint */
  --bg-surface-active: #dfd0af;   /* Active selection */
  --bg-overlay: rgba(81, 68, 46, 0.45);

  /* Structure & Borders */
  --border-subtle: #d3b480;       /* Tan / Sand */
  --border-medium: #ba986d;       /* Warm Khaki */
  --border-strong: #575040;       /* Charcoal Olive */
  --border-focus: #ab3f22;        /* Burnt Rust Red Focus */

  /* Typography Colors */
  --text-primary: #51442e;        /* Deep Umber Brown (High Contrast) */
  --text-secondary: #575040;      /* Charcoal Olive */
  --text-tertiary: #8a5a38;       /* Warm Chestnut Brown */
  --text-muted: #9b9578;          /* Dusty Olive Gray */
  --text-inverse: #f9f9f5;        /* Off-white on dark/accent */

  /* Functional Accents */
  --accent-primary: #ab3f22;       /* Burnt Rust Red (Primary Action/Host) */
  --accent-primary-hover: #8f341b;
  --accent-primary-muted: rgba(171, 63, 34, 0.10);

  --accent-secondary: #b56d46;     /* Terracotta Orange */
  --accent-secondary-hover: #9c5c39;
  --accent-secondary-muted: rgba(181, 109, 70, 0.12);

  --accent-gold: #dfb449;          /* Muted Mustard Gold (Attention/PIN) */
  --accent-gold-muted: rgba(223, 180, 73, 0.18);

  --accent-sage: #74877a;          /* Muted Sage Green (Connected / Online / Success) */
  --accent-sage-muted: rgba(116, 135, 122, 0.16);

  --accent-chestnut: #8a5a38;      /* Warm Chestnut (Whispers/Badges) */
  --accent-chestnut-muted: rgba(138, 90, 56, 0.12);

  --accent-danger: #ab3f22;        /* Burnt Rust for Danger */
  --accent-danger-muted: rgba(171, 63, 34, 0.12);

  /* Typography Scale */
  --font-family-base: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", monospace;

  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1.0625rem;   /* 17px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Strict Radii Tokens (Max 3 tokens) */
  --radius-sm: 4px;   /* Badges, tags, reaction pills */
  --radius-md: 8px;   /* Inputs, buttons, chat bubbles */
  --radius-lg: 12px;  /* Cards, modals, containers */

  /* Shadows (Natural, subtle depth) */
  --shadow-sm: 0 1px 3px rgba(81, 68, 46, 0.08);
  --shadow-md: 0 4px 12px rgba(81, 68, 46, 0.10);
  --shadow-lg: 0 10px 24px rgba(81, 68, 46, 0.14);

  /* Motion & Easing Curves */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 240ms;
}

/* Base Reset & Typography Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

button {
  cursor: pointer;
  user-select: none;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-surface-subtle);
}

::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}