:root {
  /* Palette (dark mode default) */
  --color-primary: #e30613; /* Brand red */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text: #e8e8ea;
  --color-muted: #9aa1ad;
  --color-bg: #0f1115;
  --color-surface: #171a21;
  --color-border: rgba(255,255,255,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,0.5);

  /* Card styling */
  --card-gradient: linear-gradient(135deg, rgba(227,6,19,0.18), rgba(227,6,19,0.00) 60%);
  --card-bg: var(--card-gradient), var(--color-surface);

  /* Card gradient maps (light = active, dark = completed) */
  --grad-default-light: linear-gradient(135deg, rgba(227,6,19,0.18), rgba(227,6,19,0) 60%);
  --grad-default-dark:  linear-gradient(135deg, rgba(227,6,19,0.32), rgba(227,6,19,0) 60%);

  --grad-green-light:   linear-gradient(135deg, rgba(27 255 80 / 47%), rgba(16,185,129,0) 60%);
  --grad-green-dark:    linear-gradient(135deg, rgba(7 93 27 / 66%), rgba(16,185,129,0) 60%);

  --grad-yellow-light:  linear-gradient(135deg, rgba(159, 146, 1, 0.95), rgba(234,179,8,0) 60%);
  --grad-yellow-dark:   linear-gradient(135deg, rgba(107, 126, 0, 0.91), rgba(234,179,8,0) 60%);

  --grad-blue-light:    linear-gradient(135deg, rgba(90,146,237,0.63), rgba(59,130,246,0) 60%);
  --grad-blue-dark:     linear-gradient(135deg, rgba(59,130,246,0.32), rgba(59,130,246,0) 60%);

  --grad-red-light:     linear-gradient(135deg, rgba(255,0,0,0.65), rgba(239,68,68,0) 60%);
  --grad-red-dark:      linear-gradient(135deg, rgba(109,0,0,0.65), rgba(239,68,68,0) 60%);

  --grad-orange-light:  linear-gradient(135deg, rgba(255,129,0,0.75), rgba(249,115,22,0) 60%);
  --grad-orange-dark:   linear-gradient(135deg, rgba(211,107,0,0.75), rgba(249,115,22,0) 60%);

  --grad-gray-light:    linear-gradient(135deg, rgba(156,163,175,0.18), rgba(156,163,175,0) 60%);
  --grad-gray-dark:     linear-gradient(135deg, rgba(156,163,175,0.32), rgba(156,163,175,0) 60%);

  --grad-purple-light:  linear-gradient(135deg, rgba(139, 19, 250, 0.64), rgba(147,51,234,0) 60%);
  --grad-purple-dark:   linear-gradient(135deg, rgba(103, 8, 185, 0.32), rgba(147,51,234,0) 60%);

  --grad-pink-light:    linear-gradient(135deg, rgba(252, 0, 126, 0.55), rgba(236,72,153,0) 60%);
  --grad-pink-dark:     linear-gradient(135deg, rgba(108, 9, 59, 0.46), rgba(236,72,153,0) 60%);

  --grad-brown-light:   linear-gradient(135deg, rgba(120, 72, 48, 0.58), rgba(120,72,48,0) 60%);
  --grad-brown-dark:    linear-gradient(135deg, rgba(66, 33, 14, 0.32), rgba(120,72,48,0) 60%);

  --grad-white-light:   linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%);
  --grad-white-dark:    linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 60%);

  /* Layout tokens */
  --radius: 14px;
  --space: 12px;
}