/**
 * ri-tokens.css — Design Tokens / CSS Custom Properties
 * ======================================================
 * Implementation Guide Reference: § 3 (CSS Load Order), § 1 (Design System)
 *
 * LOAD THIS FILE FIRST before all other ri-*.css files.
 * All other stylesheets reference these variables — never hardcode values.
 *
 * AI Agent note: Do not modify token names; only change values here to re-theme.
 */

:root {
  /* ─── Backgrounds ─────────────────────────────────────── */
  --color-bg-base:     #ffffff;   /* outermost page background */
  --color-bg-surface:  #f8f9fa;   /* sidebar, card backgrounds */
  --color-bg-elevated: #e9ecef;   /* hover states, inner panels */
  --color-bg-panel:    #ffffff;   /* top navigation bar */

  /* ─── Borders ─────────────────────────────────────────── */
  --color-border:      #dee2e6;

  /* ─── Brand Accent ────────────────────────────────────── */
  --color-accent:       #0d6efd;  /* primary CTA, active nav, progress bars */
  --color-accent-hover: #0b5ed7;

  /* ─── Semantic Colours ────────────────────────────────── */
  --color-danger:  #dc3545;       /* overdue counts, alerts */
  --color-success: #198754;       /* positive delta indicators */
  --color-new-badge: #0dcaf0;     /* "New" import badge */

  /* ─── Typography ──────────────────────────────────────── */
  --color-text-primary:   #212529;
  --color-text-secondary: #6c757d;
  --color-text-muted:     #adb5bd;

  /* ─── Fonts (loaded via Google Fonts in index.php) ─────── */
  --font-display: 'Space Grotesk', sans-serif;  /* headings, stat numbers */
  --font-body:    'Inter', sans-serif;           /* body, labels, nav */

  /* ─── Border Radii ────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* ─── Shadows ─────────────────────────────────────────── */
  --shadow-card:  0 2px 12px rgba(0, 0, 0, 0.10);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.18);

  /* ─── Spacing scale ───────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ─── Sidebar / layout dimensions ────────────────────── */
  --topbar-height:       56px;
  --sidebar-icon-width:  64px;
  --sidebar-label-width: 220px;

  /* ─── Transitions ─────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
}

/* ── Global reset scoped to the dark theme ─────────────── */
.ri-dark-theme,
.ri-dark-theme * {
  box-sizing: border-box;
}

.ri-dark-theme {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

/* ── Scrollbar styling (Webkit) ─────────────────────────── */
.ri-dark-theme ::-webkit-scrollbar { width: 6px; height: 6px; }
.ri-dark-theme ::-webkit-scrollbar-track  { background: var(--color-bg-base); }
.ri-dark-theme ::-webkit-scrollbar-thumb  {
  background: var(--color-border);
  border-radius: 3px;
}
.ri-dark-theme ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }