/* ============================================================
   EderE Design Tokens
   Palette drawn from two real West African textile traditions:
   - Adire (Yoruba indigo resist-dye cloth)  -> deep indigo surfaces
   - Kente (Akan woven gold/clay cloth)      -> gold + clay accents
   Not decoration: indigo = night/privacy, gold = signal/presence,
   clay = community/warmth, unbleached cloth = light surface.
   ============================================================ */

:root {
  /* --- Adire indigo (dark surfaces) --- */
  --indigo-950: #0B1220;
  --indigo-900: #121B2E;
  --indigo-850: #16213A;
  --indigo-800: #1C2A46;
  --indigo-700: #263856;

  /* --- Kente gold (brand / primary accent) --- */
  --gold-300: #F3CE84;
  --gold-500: #E8A93C;
  --gold-600: #C98A22;
  --gold-700: #9C6B18;

  /* --- Clay (secondary accent / community warmth) --- */
  --clay-400: #D97A47;
  --clay-500: #C4622D;
  --clay-600: #9E4C20;

  /* --- Unbleached cloth (light surfaces) --- */
  --cloth-50: #FCFAF5;
  --cloth-100: #F7F3EA;
  --cloth-200: #EFE8D8;
  --cloth-300: #E2D6BC;

  /* --- Ink (text) --- */
  --ink-900: #1B1B1B;
  --ink-700: #3A3A3A;
  --ink-500: #6B6B6B;

  /* --- Signal colors --- */
  --success-500: #3FA66B;
  --warn-500: #E0A83A;
  --danger-500: #D64545;
  --info-500: #4E8FE0;

  /* --- Semantic (theme-independent defaults; overridden by [data-theme]) --- */
  --bg: var(--indigo-950);
  --bg-elevated: var(--indigo-900);
  --bg-surface: var(--indigo-850);
  --bg-surface-2: var(--indigo-800);
  --border: rgba(247, 243, 234, 0.10);
  --border-strong: rgba(247, 243, 234, 0.18);
  --text-primary: var(--cloth-100);
  --text-secondary: rgba(247, 243, 234, 0.64);
  --text-muted: rgba(247, 243, 234, 0.42);
  --accent: var(--gold-500);
  --accent-strong: var(--gold-300);
  --accent-contrast: #1B1300;
  --accent-2: var(--clay-500);
  --bubble-out: linear-gradient(135deg, #2A3A5C, #1E2C48);
  --bubble-in: var(--indigo-800);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.24);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.32);
  --shadow-lift: 0 16px 48px rgba(0,0,0,0.40);
  --focus-ring: 0 0 0 3px rgba(232, 169, 60, 0.45);

  /* --- Type --- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8375rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.3rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;

  /* --- Spacing scale --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* --- Radius --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;

  /* --- Layout --- */
  --sidebar-w: 320px;
  --topbar-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="light"] {
  --bg: var(--cloth-100);
  --bg-elevated: var(--cloth-50);
  --bg-surface: #FFFFFF;
  --bg-surface-2: var(--cloth-200);
  --border: rgba(27, 27, 27, 0.10);
  --border-strong: rgba(27, 27, 27, 0.16);
  --text-primary: var(--ink-900);
  --text-secondary: rgba(27, 27, 27, 0.62);
  --text-muted: rgba(27, 27, 27, 0.40);
  --accent: var(--gold-600);
  --accent-strong: var(--gold-700);
  --accent-contrast: #FFFDF7;
  --accent-2: var(--clay-600);
  --bubble-out: linear-gradient(135deg, #F3DFAE, #EACB84);
  --bubble-in: #FFFFFF;
  --shadow-1: 0 1px 2px rgba(27,27,27,0.06);
  --shadow-2: 0 8px 24px rgba(27,27,27,0.08);
  --shadow-lift: 0 16px 48px rgba(27,27,27,0.14);
}

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