/* VibeLab Design Tokens
 * Dark mode: GitHub dark inspired
 * Light mode: W&B brand inspired
 */

:root {
  /* Layout dimensions */
  --navbar-height: 56px;
  --footer-height: 36px;

  /* Spacing scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-normal: 150ms ease;
  --transition-slow: 200ms ease;

  /* Font families */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, monospace;

  /* Font sizes */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;

  /* Line heights */
  --leading-xs: 16px;
  --leading-sm: 18px;
  --leading-base: 20px;
  --leading-lg: 24px;
  --leading-xl: 28px;
  --leading-2xl: 32px;
}

/* Dark theme (default) - GitHub dark inspired for better contrast */
:root,
[data-theme="dark"] {
  /* Surfaces - GitHub dark palette */
  --color-canvas: #0d1117;
  --color-surface: #161b22;
  --color-surface-2: #21262d;
  --color-surface-3: #30363d;

  /* Borders - visible */
  --color-border: #30363d;
  --color-border-muted: #21262d;
  --color-border-focus: #f0883e;

  /* Text - high contrast */
  --color-text-primary: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-tertiary: #6e7681;
  --color-text-disabled: #484f58;

  /* Accent - warm orange */
  --color-accent: #f0883e;
  --color-accent-hover: #ffa657;
  --color-accent-muted: rgba(240, 136, 62, 0.2);

  /* Status colors - vibrant for dark bg */
  --color-status-success: #3fb950;
  --color-status-success-muted: rgba(63, 185, 80, 0.2);
  --color-status-error: #f85149;
  --color-status-error-muted: rgba(248, 81, 73, 0.2);
  --color-status-warning: #d29922;
  --color-status-warning-muted: rgba(210, 153, 34, 0.2);
  --color-status-info: #58a6ff;
  --color-status-info-muted: rgba(88, 166, 255, 0.2);
  --color-status-stale: #db6d28;
  --color-status-stale-muted: rgba(219, 109, 40, 0.2);
  --color-status-pending: #8b949e;
  --color-status-pending-muted: rgba(139, 148, 158, 0.15);

  /* Text on accent backgrounds */
  --color-on-accent: #0d1117;
}

/* Light theme - W&B inspired with warm accent */
[data-theme="light"] {
  --color-canvas: #F8F9FA;
  --color-surface: #FFFFFF;
  --color-surface-2: #F3F4F6;
  --color-surface-3: #E5E7EB;

  /* Borders */
  --color-border: #D1D5DB;
  --color-border-muted: #E5E7EB;
  --color-border-focus: #D97706;

  /* Text */
  --color-text-primary: #171A1F;
  --color-text-secondary: #4B5563;
  --color-text-tertiary: #6B7280;
  --color-text-disabled: #9CA3AF;

  /* Accent - warm amber/gold */
  --color-accent: #D97706;
  --color-accent-hover: #B45309;
  --color-accent-muted: rgba(217, 119, 6, 0.1);

  /* Status colors - darker for light bg */
  --color-status-success: #059669;
  --color-status-success-muted: rgba(5, 150, 105, 0.1);
  --color-status-error: #DC2626;
  --color-status-error-muted: rgba(220, 38, 38, 0.1);
  --color-status-warning: #D97706;
  --color-status-warning-muted: rgba(217, 119, 6, 0.1);
  --color-status-info: #2563EB;
  --color-status-info-muted: rgba(37, 99, 235, 0.1);
  --color-status-stale: #EA580C;
  --color-status-stale-muted: rgba(234, 88, 12, 0.1);
  --color-status-pending: #6B7280;
  --color-status-pending-muted: rgba(107, 114, 128, 0.1);

  /* Text on accent backgrounds */
  --color-on-accent: #FFFFFF;
}
