/* ============================================================
   Design Tokens — single source of truth for all CSS variables.
   Load this file FIRST, before any component stylesheets.
   ============================================================ */

:root {
  /* ── Colours ──────────────────────────────────────────────── */
  --color-bg:           #F7F8FA;
  --color-sidebar-bg:   #F5F6F7;
  --color-card:         #FFFFFF;
  --color-header-bg:    #FFFFFF;
  --color-border:       #E6E8EC;
  --color-primary:      #2D5BE5;
  --color-text:         #1A1D23;
  --color-text-muted:   #6B7280;
  --color-icon:         #6B7280;
  --color-icon-active:  #2D5BE5;
  --color-hover-bg:     rgba(45, 91, 229, 0.07);
  --color-active-bg:    rgba(45, 91, 229, 0.12);

  /* ── Icon filters (grey muted → blue active) ──────────────── */
  /* Derived from #6B7280 and #2D5BE5 via filter calculator.    */
  --icon-filter:        invert(46%) sepia(8%) saturate(497%) hue-rotate(182deg) brightness(94%) contrast(86%);
  --icon-filter-active: invert(27%) sepia(84%) saturate(1706%) hue-rotate(211deg) brightness(94%) contrast(93%);

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-width-expanded:  240px;
  --sidebar-width-collapsed: 64px;
  --header-height:           56px;

  /* ── Sidebar component ────────────────────────────────────── */
  --sidebar-header-height: 56px;
  --sidebar-icon-slot:     32px;
  --sidebar-icon-size:     18px;
  --sidebar-item-height:   40px;
  --sidebar-item-radius:   6px;
  --sidebar-item-gap:      10px;
  --sidebar-item-px:       8px;
  --sidebar-item-mx:       6px;
  --sidebar-transition:    width 0.25s ease, transform 0.25s ease;

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-card: 8px;
  --radius-btn:  6px;
}

/* ── Utility: suppress all transitions (used during initial load) ── */
/* Apply .no-transition to any element to freeze animations instantly. */
/* sidebar.js adds/removes this class to prevent FOUC on page load.   */
.no-transition,
.no-transition * {
  transition: none !important;
}