/* Design tokens — light + dark. All colors and elevation go through here. */

:root,
:root[data-theme='dark'] {
  --bg:           #0b0e16;
  --bg-elev:      #11151f;
  --surface:      #161b27;
  --surface-2:    #1c2230;
  --border:       #232a3a;
  --border-soft:  #1a2030;

  --text-primary:   #ecf0fb;
  --text-secondary: #9aa3b8;
  --text-muted:     #6b7388;

  --accent:        #7c5cff;
  --accent-soft:   #2a2347;
  --accent-strong: #9b85ff;
  --accent-2:      #46c8ff;

  --success:       #4ade80;
  --warning:       #facc15;
  --danger:        #f87171;
  --danger-soft:   #3a1c20;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.35);
  --shadow-md:  0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.45);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --sidebar-w:           240px;
  --sidebar-w-collapsed: 72px;
  --topbar-h:            64px;
  --content-max:         1100px;

  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --transition: 180ms cubic-bezier(.2,.6,.3,1);

  /* Heatmap levels */
  --heat-0: transparent;
  --heat-1: #1b3a2a;
  --heat-2: #1f6b3a;
  --heat-3: #2aa14a;
  --heat-4: #3ad063;
  --heat-5: #6cf08a;
}

:root[data-theme='light'] {
  --bg:           #f6f7fb;
  --bg-elev:      #ffffff;
  --surface:      #ffffff;
  --surface-2:    #f1f3f9;
  --border:       #e3e6ef;
  --border-soft:  #eef0f6;

  --text-primary:   #131722;
  --text-secondary: #5c6275;
  --text-muted:     #8c93a5;

  --accent:        #5d3dff;
  --accent-soft:   #efeaff;
  --accent-strong: #432bd6;
  --accent-2:      #1ea7ff;

  --success:       #16a34a;
  --warning:       #d97706;
  --danger:        #dc2626;
  --danger-soft:   #fee2e2;

  --shadow-sm:  0 1px 2px rgba(15,23,42,.06);
  --shadow-md:  0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:  0 20px 60px rgba(15,23,42,.10);

  --heat-0: transparent;
  --heat-1: #d6f1de;
  --heat-2: #9fdcb1;
  --heat-3: #5cc081;
  --heat-4: #2da45a;
  --heat-5: #117a3c;
}