/* ══════════════════════════════════════════════════════════════════
   WorkHub 2.0 — Theme system (3 palettes)
   Copper (warm premium) | Slate (cool neutral) | Espresso (warm dark)
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Fonts */
  --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-data: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Spacing (4px grid) */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;

  /* Typography scale */
  --text-xs: 0.75rem;     /* 10.5px */
  --text-sm: 0.8125rem;   /* 11.375px */
  --text-base: 0.875rem;  /* 12.25px */
  --text-lg: 1rem;        /* 14px */
  --text-xl: 1.125rem;    /* 15.75px */
  --text-2xl: 1.25rem;    /* 17.5px */
  --text-3xl: 1.5rem;     /* 21px */

  /* Easing & transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* decel for overlays */
  --tr-fast: 150ms;
  --tr: 250ms;

  /* Layout */
  --sidebar-w: 220px;
  --sidebar-collapsed-w: 56px;
  --header-h: 52px;

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

/* COPPER — warm, premium (default) */
[data-theme="copper"], :root {
  --bg: #F7F3EE; --bg-secondary: #F0EBE3; --bg-input: #FAF7F4;
  --surface: #FFFFFF; --surface-hover: #FFFDF9; --surface-inset: #EDE8E0;
  --accent: #B87333; --accent-hover: #A36429;
  --accent-light: #F5E6D3; --accent-subtle: #FAF0E4; --accent-text: #9A5F2A;
  --text: #2C2420; --text-secondary: #6B5E54; --text-muted: #9C8E82;
  --text-on-accent: #FFFFFF; --text-inverse: #FAF7F4;
  --border: #E4DDD4; --border-subtle: #EDE8E0; --border-strong: #C9BFB3; --border-focus: #B87333;
  --success: #6B8F71; --success-light: #EDF3EE;
  --warning: #C4912A; --warning-light: #FBF3E4;
  --error: #B85C5C; --error-light: #F9EDEC;
  --info: #6B8FA3; --info-light: #EEF3F6;
  --shadow-sm: 0 1px 3px 0 rgba(44,36,32,.06), 0 1px 2px -1px rgba(44,36,32,.04);
  --shadow-md: 0 4px 6px -1px rgba(44,36,32,.06), 0 2px 4px -2px rgba(44,36,32,.04);
  --shadow-lg: 0 10px 15px -3px rgba(44,36,32,.07), 0 4px 6px -4px rgba(44,36,32,.04);
  --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-full: 9999px;
  --sidebar-bg: #2C2420; --sidebar-hover: #3A322C; --sidebar-active-border: #B87333;
  --sidebar-text: rgba(250,247,244,.65); --sidebar-text-hover: #FAF7F4;
  --sidebar-divider: rgba(250,247,244,.08);
  --scrollbar-thumb: #C9BFB3; --scrollbar-thumb-hover: #9C8E82;
  --theme-label: 'Copper';
}

/* SLATE — cool neutral */
[data-theme="slate"] {
  --bg: #F8F9FB; --bg-secondary: #F1F3F5; --bg-input: #FAFBFC;
  --surface: #FFFFFF; --surface-hover: #FCFCFD; --surface-inset: #EDF0F3;
  --accent: #6B8FA3; --accent-hover: #5A7B8E;
  --accent-light: #E4EEF3; --accent-subtle: #F0F5F8; --accent-text: #4E7287;
  --text: #334155; --text-secondary: #64748B; --text-muted: #94A3B8;
  --text-on-accent: #FFFFFF; --text-inverse: #F8FAFC;
  --border: #E2E8F0; --border-subtle: #EDF1F5; --border-strong: #CBD5E1; --border-focus: #6B8FA3;
  --success: #5B9A6F; --success-light: #ECF5EE;
  --warning: #D49A2A; --warning-light: #FBF5E4;
  --error: #C25555; --error-light: #FAEDED;
  --info: #5B8FAA; --info-light: #EBF3F8;
  --shadow-sm: 0 1px 3px 0 rgba(51,65,85,.06), 0 1px 2px -1px rgba(51,65,85,.04);
  --shadow-md: 0 4px 6px -1px rgba(51,65,85,.07), 0 2px 4px -2px rgba(51,65,85,.04);
  --shadow-lg: 0 10px 15px -3px rgba(51,65,85,.08), 0 4px 6px -4px rgba(51,65,85,.04);
  --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-full: 9999px;
  --sidebar-bg: #2D3441; --sidebar-hover: #3B4454; --sidebar-active-border: #6B8FA3;
  --sidebar-text: rgba(248,250,252,.6); --sidebar-text-hover: #F8FAFC;
  --sidebar-divider: rgba(248,250,252,.08);
  --scrollbar-thumb: #CBD5E1; --scrollbar-thumb-hover: #94A3B8;
  --theme-label: 'Slate';
}

/* ESPRESSO — warm dark */
[data-theme="espresso"] {
  --bg: #1C1917; --bg-secondary: #231F1C; --bg-input: #292524;
  --surface: #292524; --surface-hover: #322E2B; --surface-inset: #1C1917;
  --accent: #D4A24E; --accent-hover: #C49340;
  --accent-light: rgba(212,162,78,.15); --accent-subtle: rgba(212,162,78,.08); --accent-text: #E0B86A;
  --text: #E7E5E4; --text-secondary: #A8A29E; --text-muted: #78716C;
  --text-on-accent: #1C1917; --text-inverse: #1C1917;
  --border: rgba(231,229,228,.1); --border-subtle: rgba(231,229,228,.06);
  --border-strong: rgba(231,229,228,.18); --border-focus: #D4A24E;
  --success: #7DB486; --success-light: rgba(125,180,134,.12);
  --warning: #E0A83A; --warning-light: rgba(224,168,58,.12);
  --error: #D46B6B; --error-light: rgba(212,107,107,.12);
  --info: #7BAFC4; --info-light: rgba(123,175,196,.12);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 2px -1px rgba(0,0,0,.15);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.25), 0 2px 4px -2px rgba(0,0,0,.15);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.3), 0 4px 6px -4px rgba(0,0,0,.2);
  --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-full: 9999px;
  --sidebar-bg: #1C1917; --sidebar-hover: #292524; --sidebar-active-border: #D4A24E;
  --sidebar-text: rgba(231,229,228,.55); --sidebar-text-hover: #E7E5E4;
  --sidebar-divider: rgba(231,229,228,.06);
  --scrollbar-thumb: rgba(231,229,228,.15); --scrollbar-thumb-hover: rgba(231,229,228,.25);
  --theme-label: 'Espresso';
}