/* ============================================================
   DESIGN TOKENS — GLOBAL SYSTEM
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     SPACING SCALE (8px base)
     ------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ------------------------------------------------------------
     RADII
     ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ------------------------------------------------------------
     SHADOWS (premium, consistent)
     ------------------------------------------------------------ */
  --shadow-1: 0 2px 6px rgba(0,0,0,0.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-4: 0 12px 40px rgba(0,0,0,0.14);

  /* ------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------ */
  --font-family: system-ui, sans-serif;

  --font-xs: 12px;
  --font-sm: 13px;
  --font-md: 14px;
  --font-lg: 16px;
  --font-xl: 20px;
  --font-2xl: 24px;

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

  /* ------------------------------------------------------------
     NEUTRAL COLORS
     ------------------------------------------------------------ */
  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-alt: #f9f9f9;

  --color-border: #e5e7eb;
  --color-border-light: #eee;
  --color-border-dark: #ddd;

  --color-text: #111;
  --color-text-muted: #666;
  --color-text-light: #999;

  /* ------------------------------------------------------------
     BRAND / ACCENT COLORS
     ------------------------------------------------------------ */
  --color-accent: #111;
  --color-accent-hover: #000;

  --color-blue: #3b82f6;
  --color-yellow: #facc15;
  --color-purple: #a855f7;
  --color-green: #22c55e;
  --color-red: #ff4a4a;
  --color-orange: #ff9f1c;
  --color-teal: #2ec4b6;

  /* ------------------------------------------------------------
     KANBAN COLUMN COLORS
     ------------------------------------------------------------ */
  --kanban-todo: #4A90E2;
  --kanban-inprogress: #F5A623;
  --kanban-review: #9013FE;
  --kanban-done: #7ED321;

  /* ------------------------------------------------------------
     TASK TYPE COLORS
     ------------------------------------------------------------ */
  --task-design: #4a6cff;
  --task-bug: #ff4a4a;
  --task-content: #ff9f1c;
  --task-research: #2ec4b6;
  --task-default: #6B7280;

  /* ------------------------------------------------------------
     TIMELINE LANE COLORS
     ------------------------------------------------------------ */
  --lane-marcus: #E57373;
  --lane-ernan:  #64B5F6;
  --lane-sarah:  #FFB74D;
  --lane-john:   #81C784;
  --lane-alex:   #9575CD;
  --lane-maria:  #F06292;
  --lane-dev1:   #4FC3F7;
  --lane-qa:     #BA68C8;
  --lane-ops:    #FFD54F;

  /* ------------------------------------------------------------
     ANIMATION TIMING
     ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --normal: 0.25s;
}