/* ============================================================
   tokens.css — CSS Custom Properties (Design Tokens)
   Facebook Ads Editor
   ============================================================ */

:root {
  /* Brand / Primary */
  --color-meta-blue: #1877F2;
  --color-meta-blue-dark: #1359C4;
  --color-meta-blue-light: #EBF2FF;

  /* Row State Colors */
  --color-modified-bg: #FEF3C7;
  --color-modified-dot: #F59E0B;
  --color-new-bg: #D1FAE5;
  --color-new-badge: #10B981;
  --color-new-text: #065F46;
  --color-error-bg: #FEE2E2;
  --color-error-icon: #EF4444;

  /* Sidebar */
  --color-sidebar-bg: #1E2329;
  --color-sidebar-text: #E5E7EB;
  --color-sidebar-hover: #2D3440;
  --color-sidebar-active: #3A4452;
  --color-sidebar-border: #2D3440;

  /* Content */
  --color-content-bg: #F8F9FA;
  --color-panel-bg: #FFFFFF;
  --color-toolbar-bg: #1E2329;

  /* Borders */
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;

  /* Text */
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-text-disabled: #9CA3AF;
  --color-text-on-dark: #E5E7EB;

  /* Semantic */
  --color-success: #10B981;
  --color-success-bg: #D1FAE5;
  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  --color-danger: #EF4444;
  --color-danger-bg: #FEE2E2;
  --color-info: #3B82F6;
  --color-info-bg: #EFF6FF;

  /* Layout Dimensions */
  --height-toolbar: 48px;
  --height-tab-bar: 36px;
  --width-sidebar: 240px;
  --height-detail-panel: 280px;
  --width-settings-panel: 420px;

  /* Grid */
  --grid-row-height: 32px;
  --grid-header-height: 36px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-base: 1.5;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-index layers */
  --z-sidebar: 10;
  --z-toolbar: 20;
  --z-panel: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;
}