/**
 * GetSync design tokens — single source of truth for Bootstrap overrides.
 * Loaded before app.css. See docs/design/README.md
 */

:root,
[data-bs-theme="light"] {
  /* Brand (mint — aligned with fitsync.io / landing) */
  --getsync-primary-50: #e6f4f1;
  --getsync-primary-100: #c0e4dc;
  --getsync-primary-600: rgb(41, 145, 125);
  --getsync-primary-700: #237d6c;
  --getsync-primary-900: #14473d;

  /* Text & surfaces */
  --getsync-text: #1f2d1f;
  --getsync-text-muted: #4b554b;
  --getsync-bg-warm: #fdfaf7;
  --getsync-border: #f3f4f3;
  --getsync-surface: #ffffff;
  --getsync-surface-muted: #f8f9fa;

  /* Sync status (badges, calendar heatmap — 2.3) */
  --getsync-status-synced: #198754;
  --getsync-status-error: #dc3545;
  --getsync-status-pending: #ffc107;
  --getsync-status-neutral: #6c757d;

  /* Layout */
  --getsync-radius-sm: 0.5rem;
  --getsync-radius-md: 0.75rem;
  --getsync-radius-lg: 1rem;
  --getsync-content-max: 72rem;
  --getsync-page-max: 64rem; /* site / auth only; cabinet uses full width */

  /* Spacing scale (use in custom components; Bootstrap utilities unchanged) */
  --getsync-space-1: 0.25rem;
  --getsync-space-2: 0.5rem;
  --getsync-space-3: 0.75rem;
  --getsync-space-4: 1rem;
  --getsync-activities-gutter-x: 3px;
  --getsync-space-5: 1.25rem;
  --getsync-space-6: 1.5rem;
  --getsync-space-8: 2rem;

  /* Shadows */
  --getsync-shadow-sm: 0 1px 2px rgba(31, 45, 31, 0.06);
  --getsync-shadow-md: 0 10px 15px -3px rgba(31, 45, 31, 0.08);

  /* Bootstrap bridge */
  --bs-primary: var(--getsync-primary-600);
  --bs-primary-rgb: 41, 145, 125;
  --bs-primary-text-emphasis: var(--getsync-primary-900);
  --bs-primary-bg-subtle: var(--getsync-primary-50);
  --bs-primary-border-subtle: var(--getsync-primary-100);
  --bs-link-color: var(--getsync-primary-700);
  --bs-link-hover-color: var(--getsync-primary-900);
  --bs-focus-ring-color: rgba(41, 145, 125, 0.25);
  --bs-body-color: var(--getsync-text);
  --bs-body-color-rgb: 31, 45, 31;
  --bs-body-bg: var(--getsync-surface);
  --bs-secondary-color: var(--getsync-text-muted);
  --bs-border-color: var(--getsync-border);
}

html {
  scrollbar-gutter: stable;
}