:root {
  /* Brand colors - TeamHub Emerald & Mint Palette */
  --color-primary: #00B074;
  --color-primary-hover: #009663;
  --color-primary-focus: rgba(0, 176, 116, 0.22);
  --color-primary-light: #E8F8F2;
  --color-primary-border: #A7F3D0;
  --color-deep-blue: #064E3B;
  --color-accent: #10B981;
  --color-accent-hover: #059669;
  --color-accent-light: #ECFDF5;
  --color-accent-border: #D1FAE5;

  /* Surfaces & Backgrounds */
  --color-bg: #F6FAF7;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F1F8F4;
  --color-surface-active: #E8F8F2;
  --color-surface-card: #FFFFFF;
  --color-sidebar: #FFFFFF;
  --color-sidebar-surface: #F8FAF9;
  --color-sidebar-hover: #F1F8F4;
  --color-sidebar-text: #475569;
  --color-sidebar-muted: #8E9F97;
  --color-sidebar-active: #00B074;

  /* Borders */
  --color-border: #E5EBE8;
  --color-border-subtle: #F0F4F2;
  --color-border-strong: #CBD9D2;

  /* Typography Colors */
  --color-text-primary: #111827;
  --color-text-secondary: #5F6F67;
  --color-text-muted: #8E9F97;
  --color-text-inverted: #FFFFFF;

  /* Status Colors */
  --color-success: #00B074;
  --color-success-bg: #E8F8F2;
  --color-success-border: #A7F3D0;
  --color-success-text: #007D53;

  --color-warning: #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-warning-border: #FDE68A;
  --color-warning-text: #92400E;

  --color-danger: #EF4444;
  --color-danger-bg: #FEF2F2;
  --color-danger-border: #FECACA;
  --color-danger-text: #991B1B;

  --color-info: #0EA5E9;
  --color-info-bg: #F0F9FF;
  --color-info-border: #BAE6FD;
  --color-info-text: #0369A1;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace;
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.84375rem;  /* 13.5px */
  --font-size-base: 0.9375rem; /* 15px */
  --font-size-md: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 5px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
  --shadow-md: 0 6px 16px -2px rgba(0, 176, 116, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 12px 28px -4px rgba(0, 176, 116, 0.09), 0 4px 8px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 32px -6px rgba(0, 176, 116, 0.12), 0 8px 12px -4px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 22px rgba(0, 176, 116, 0.28);

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 26px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-width: 255px;
  --sidebar-width-collapsed: 72px;
  --header-height: 68px;
  --z-sidebar: 40;
  --z-header: 30;
  --z-modal-backdrop: 50;
  --z-toast: 70;
  --z-tooltip: 80;
}

/* Dark mode theme */
[data-theme="dark"] {
  --color-bg: #0B0F19;
  --color-surface: #111827;
  --color-surface-hover: #1E293B;
  --color-surface-active: #334155;
  --color-surface-card: #131D31;

  --color-sidebar: #070B13;
  --color-sidebar-surface: #0E1626;
  --color-sidebar-hover: #1E293B;
  --color-sidebar-text: #F1F5F9;
  --color-sidebar-muted: #64748B;

  --color-border: #1E293B;
  --color-border-subtle: #172033;
  --color-border-strong: #334155;

  --color-text-primary: #F8FAFC;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;

  --color-primary-light: #172554;
  --color-primary-border: #1E3A8A;
  --color-accent-light: #2E1065;
  --color-accent-border: #581C87;

  --color-success-bg: #064E3B;
  --color-success-border: #047857;
  --color-success-text: #A7F3D0;

  --color-warning-bg: #78350F;
  --color-warning-border: #B45309;
  --color-warning-text: #FDE68A;

  --color-danger-bg: #7F1D1D;
  --color-danger-border: #B91C1C;
  --color-danger-text: #FECACA;

  --color-info-bg: #0C4A6E;
  --color-info-border: #0284C7;
  --color-info-text: #BAE6FD;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}