/* ==========================================================================
   Design Tokens — Apple-inspired B2B Portal
   ========================================================================== */

:root {
  /* ---- Color: Backgrounds ---- */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F7;
  --bg-tertiary: #E8E8ED;

  /* ---- Color: Text ---- */
  --text-primary: #1D1D1F;
  --text-secondary: #86868B;
  --text-tertiary: #AEAEB2;

  /* ---- Color: Accent ---- */
  --accent-blue: #0071E3;
  --accent-blue-hover: #0077ED;

  /* ---- Color: Status ---- */
  --status-green: #34C759;
  --status-yellow: #FF9F0A;
  --status-red: #FF3B30;

  /* ---- Color: UI ---- */
  --border-color: #D2D2D7;
  --card-bg: #FFFFFF;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --sidebar-bg: #F5F5F7;
  --sidebar-active: rgba(0, 113, 227, 0.1);
  --overlay-bg: rgba(0, 0, 0, 0.48);

  /* ---- Spacing ---- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ---- Border Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* ---- Sidebar dimensions ---- */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --top-header-height: 56px;

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

[data-theme="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #1C1C1E;
  --bg-tertiary: #2C2C2E;

  --text-primary: #F5F5F7;
  --text-secondary: #86868B;
  --text-tertiary: #636366;

  --accent-blue: #2997FF;
  --accent-blue-hover: #40A9FF;

  --border-color: #38383A;
  --card-bg: #1C1C1E;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5);
  --sidebar-bg: #1C1C1E;
  --sidebar-active: rgba(41, 151, 255, 0.15);
  --overlay-bg: rgba(0, 0, 0, 0.72);
}