/* ============================================
   AffiliaUp — Design Tokens & CSS Variables
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Background Colors */
  --bg-primary: #0C0F14;
  --bg-secondary: #141922;
  --bg-card: #1B212C;
  --bg-input: #232B38;
  --bg-hover: #2A3341;

  /* Text Colors */
  --text-primary: #E8EDF4;
  --text-secondary: #8A98AC;
  --text-muted: #5B6879;

  /* Accent (AffiliaUp Orange) */
  --accent: #F97316;
  --accent-hover: #FFB86B;
  --accent-deep: #C2410C;
  --accent-light: rgba(249, 115, 22, 0.16);

  /* Status Colors */
  --success: #2BD576;
  --success-light: rgba(43, 213, 118, 0.15);
  --warning: #F5B841;
  --warning-light: rgba(245, 184, 65, 0.15);
  --danger: #F0554B;
  --danger-light: rgba(240, 85, 75, 0.15);
  --info: #3B82F6;
  --info-light: rgba(59, 130, 246, 0.15);

  /* Borders */
  --border: #2A3341;

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed: 70px;
  --topbar-height: 60px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);

  /* Transitions */
  --transition: all 0.2s ease;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Select option bg */
  --select-option-bg: #1B212C;

  /* Surface / border aliases used by inline kanban styles */
  --bg-surface: #141922;
  --border-color: #2A3341;
}

/* ── Light Mode ──────────────────────────── */
[data-theme="light"] {
  --bg-primary: #F1F5F9;
  --bg-secondary: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-input: #F1F5F9;
  --bg-hover: #E8EDF4;

  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  --accent: #F97316;
  --accent-hover: #EA580C;
  --accent-deep: #C2410C;
  --accent-light: rgba(249, 115, 22, 0.12);

  --success: #16A34A;
  --success-light: rgba(22, 163, 74, 0.1);
  --warning: #D97706;
  --warning-light: rgba(217, 119, 6, 0.1);
  --danger: #DC2626;
  --danger-light: rgba(220, 38, 38, 0.1);
  --info: #2563EB;
  --info-light: rgba(37, 99, 235, 0.1);

  --border: #E2E8F0;

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);

  --select-option-bg: #FFFFFF;

  --bg-surface: #F1F5F9;
  --border-color: #E2E8F0;
}