/* ============================================================
   Design tokens — Maintenis
   Single source of truth for colors, typography & radii.
   Link this BEFORE style.css / dashboard.css on every page.
   ============================================================ */

:root {
  /* Brand / interactive */
  --primary: #3B82F6;
  --primary-hover: #2563EB;
  --primary-soft: rgba(59, 130, 246, 0.1);
  --primary-ring: rgba(59, 130, 246, 0.15);

  /* Brand accent */
  --brand-yellow: #FFD21E;
  --brand-yellow-soft: #FFF9E6;
  --brand-yellow-pulse: rgba(255, 210, 30, 0.45);

  /* Text */
  --text: #1C1C1C;
  --text-muted: #6B7280;
  --text-soft: #9CA3AF;

  /* Surfaces & borders */
  --bg: #FFFFFF;
  --bg-alt: #F9FAFB;
  --surface: #FFFFFF;
  --border: #E5E7EB;
  --divider: #F0F1F3;
  --on-primary: #FFFFFF;

  /* Semantic / status */
  --success: #10B981;
  --success-dark: #059669;
  --success-soft: #ECFDF5;
  --success-border: #A7F3D0;
  --success-text: #065F46;
  --error: #EF4444;
  --warning: #F59E0B;
  --warning-ring: rgba(245, 158, 11, 0.18);

  /* Effects */
  --footer-bg: rgba(255, 255, 255, 0.7);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);

  /* Radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-full: 9999px;

  /* Layout (dashboard) */
  --nav-h: 56px;
  --side-w: 248px;
  --foot-h: 40px;
}