/* ============================================
   DESIGN TOKENS — SkrivSikkert Design System
   Source of truth for sidebar colors, spacing,
   typography, and radii across ALL pages.
   Load AFTER variables.css. New names, no conflicts.
   ============================================ */

:root {
  /* ---- Sidebar chrome ---- */
  --sidebar-bg: #f7f7f4;
  --sidebar-hover: rgba(0, 0, 0, 0.04);
  --sidebar-active: rgba(0, 0, 0, 0.07);
  --sidebar-border: rgba(31, 31, 30, 0.15);

  /* ---- Text hierarchy (neutral — never brand-colored) ---- */
  --text-primary: rgb(19, 19, 19);
  --text-secondary: rgb(60, 60, 58);
  --text-muted: rgb(115, 113, 108);
  --text-faint: rgb(143, 142, 138);

  /* ---- Surface & borders ---- */
  --surface: rgba(0, 0, 0, 0);
  --surface-white: #ffffff;
  --border: #d9d4ca;
  --border-light: #e8e4dc;

  /* ---- Dimensions ---- */
  --sidebar-width: 288px;
  --sidebar-collapsed: 3.05rem;

  /* ---- Radii ---- */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* ---- Timing ---- */
  --transition: 180ms ease;
  --sidebar-transition: 300ms cubic-bezier(0.165, 0.85, 0.45, 1);

  /* ---- Calendar heatmap (purple scale) ---- */
  --cal-empty: #ebedf0;
  --cal-l1: #c4b5fd;
  --cal-l2: #8b5cf6;
  --cal-l3: #7c3aed;
  --cal-l4: #5b21b6;
}

/* ---- Dark mode (warm charcoal) ---- */
[data-theme="dark"] {
  --sidebar-bg: #232220;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active: rgba(255, 255, 255, 0.10);
  --sidebar-border: rgba(255, 255, 255, 0.08);

  --text-primary: #e8e6e1;
  --text-secondary: #a3a19b;
  --text-muted: #7a7872;
  --text-faint: #5c5a55;

  --surface: rgba(255, 255, 255, 0);
  --surface-white: #2b2a27;
  --border: rgba(255, 255, 255, 0.12);
  --border-light: rgba(255, 255, 255, 0.08);

  /* ---- Calendar heatmap (purple scale — dark) ---- */
  --cal-empty: #2d333b;
  --cal-l1: #3b2772;
  --cal-l2: #5b21b6;
  --cal-l3: #7c3aed;
  --cal-l4: #a78bfa;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cal-empty: #2d333b;
    --cal-l1: #3b2772;
    --cal-l2: #5b21b6;
    --cal-l3: #7c3aed;
    --cal-l4: #a78bfa;
  }
}