/* ==========================================================================
   Bespoke Enterprise Design System - Tokens & Primitives
   Crafted with precision: High-end Slate & Sapphire Palette
   Inspired by Superhuman, Linear & Apple Mail
   ========================================================================== */

:root {
  /* Typography */
  --font-sans: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Sizes with optical scaling */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.78125rem; /* 12.5px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 0.9375rem;/* 15px */
  --text-md: 1.0625rem;  /* 17px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 1.875rem;  /* 30px */

  /* Neutral Backgrounds (Curated Off-white / Cool Slate) */
  --bg-app: #f8fafc;
  --bg-sidebar: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f1f5f9;
  --bg-surface-active: #e2e8f0;
  --bg-surface-elevated: #ffffff;
  --bg-surface-unread: #f0f7ff;
  --bg-surface-selected: #ebf3ff;

  /* Borders & Dividers */
  --border-subtle: #f1f5f9;
  --border-default: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-focus: #3b82f6;

  /* Text Hierarchy */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --text-inverted: #ffffff;

  /* Brand Colors (Royal Sapphire / Deep Executive Navy) */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-active: #1e40af;
  --primary-light: #eff6ff;
  --primary-border: #bfdbfe;
  --primary-ring: rgba(37, 99, 235, 0.18);

  /* Status & Functional Accents */
  --emerald: #10b981;
  --emerald-light: #ecfdf5;
  --emerald-border: #a7f3d0;
  
  --rose: #ef4444;
  --rose-light: #fef2f2;
  --rose-border: #fecaca;
  
  --amber: #f59e0b;
  --amber-light: #fffbeb;
  --amber-border: #fde68a;

  --violet: #8b5cf6;
  --violet-light: #f5f3ff;

  /* Design System Aliases & Compatibility */
  --color-bg: var(--bg-app);
  --color-surface: var(--bg-surface);
  --color-surface-hover: var(--bg-surface-hover);
  --color-surface-active: var(--bg-surface-active);
  --color-border: var(--border-default);
  --color-border-subtle: var(--border-subtle);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-subtle: var(--text-subtle);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-danger: var(--rose);
  --color-success: var(--emerald);
  --color-warning: var(--amber);
  --font-family-base: var(--font-sans);

  /* Multi-Stop Craft Shadows */
  --shadow-subtle: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 0 0 1px rgba(226, 232, 240, 0.8), 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.8);
  --shadow-dropdown: 0 10px 20px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(226, 232, 240, 0.9);

  /* Radiuses */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-full: 9999px;

  /* Layout Dimensions */
  --header-height: 58px;
  --sidebar-width: 236px;
  --list-width: 375px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 140ms var(--ease-out);
  --transition-normal: 220ms var(--ease-out);

  /* Layering */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 40;
  --z-sidebar: 50;
  --z-backdrop: 90;
  --z-modal: 100;
  --z-popover: 120;
  --z-toast: 150;

  /* Animation Durations */
  --anim-fast: 200ms;
  --anim-normal: 350ms;
  --anim-slow: 500ms;
  --anim-stagger: 50ms;

  /* Animation Easings */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ===== Global Animation Keyframes ===== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-4px); }
  30%, 70% { transform: translateX(4px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(30px); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

@keyframes skeletonPulse {
  0% { background-color: #e2e8f0; }
  50% { background-color: #f1f5f9; }
  100% { background-color: #e2e8f0; }
}