/* public/theme/css/tokens.css
   Design tokens for the EziPay theme. Change values here to restyle
   everything that consumes them — nothing else should hardcode a color,
   radius, shadow, or spacing value. */

:root {
  /* Brand */
  --color-primary: #5b4fe6;
  --color-primary-dark: #4a3fd0;
  --color-gradient-start: #4f46e5;
  --color-gradient-end: #8b7cf0;

  /* Sidebar (light) */
  --color-sidebar-bg: #ffffff;
  --color-sidebar-text: #4b5563;
  --color-sidebar-text-hover: var(--color-primary);
  --color-sidebar-text-active: #ffffff;
  --color-sidebar-hover-bg: var(--color-bg);

  /* Surfaces */
  --color-bg: #f7f7fc;
  --color-surface: #ffffff;
  --color-border: #e6e6f0;

  /* Text */
  --color-text: #12123b;
  --color-text-muted: #6b7280;

  /* Status (base / subtle-bg / subtle-border / text-emphasis — matches Bootstrap 5.3's color-mode variable set) */
  --color-primary-bg-subtle: #f7f5fd;
  --color-primary-border-subtle: #e3dcf9;
  --color-primary-emphasis: #332b8a;

  --color-success: #16a34a;
  --color-success-bg: #f2faf4;
  --color-success-border-subtle: #d3ecda;
  --color-success-emphasis: #0f6b32;

  --color-warning: #d97706;
  --color-warning-bg: #fdf8ef;
  --color-warning-border-subtle: #f2e2c4;
  --color-warning-emphasis: #7a4405;

  --color-danger: #dc2626;
  --color-danger-bg: #fdf3f3;
  --color-danger-border-subtle: #f2d4d2;
  --color-danger-emphasis: #7a1414;

  --color-info: #2563eb;
  --color-info-bg: #f2f6fe;
  --color-info-border-subtle: #d7e3fa;
  --color-info-emphasis: #123a82;

  /* Pastel tints (aliases of the -bg values above, kept for readability in markup/comments) */
  --tint-red: var(--color-danger-bg);
  --tint-blue: var(--color-info-bg);
  --tint-peach: var(--color-warning-bg);
  --tint-green: var(--color-success-bg);
  --tint-purple: var(--color-primary-bg-subtle);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(18, 18, 59, 0.06);
  --shadow-md: 0 4px 12px rgba(18, 18, 59, 0.08);
  --shadow-lg: 0 8px 24px rgba(18, 18, 59, 0.10);

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

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;

  /* Shell dimensions */
  --sidebar-width: 260px;
  --topbar-height: 64px;
}