:root {
  /* Tenant-specific brand colors (from database: website_css table) */
  /* Mode: light | Context: public */

  --c-background: #fff;
  --c-foreground: #0c0c0c;
  --c-text: #111827;
  --c-muted: #6b7280;
  --c-super-muted: #e5e7eb;
  --c-border: #d1d5db;
  --c-btn-text: #ffffff;
  --c-btn-secondary-text: #21408C;
  --c-btn-secondary-border: #21408C;
  --c-primary: #21408C;
  --c-accent-1: #4E8EC8;
  --c-accent-2: #7FB2DD;
  --c-accent-3: #A9CEE9;
  --c-accent-4: #CFE6F4;
  --c-accent-5: #E6F4FD;
  --c-red: #ef4444;
  --c-red-light: #ffe7e7;
  --c-primary-original: #21408C;
  --c-accent-1-original: #4E8EC8;
  --overlay-color-rgb: 255, 255, 255;
  --c-card-bg: color-mix(in srgb, #E6F4FD, white 70%);
  --c-input-bg: color-mix(in srgb, #E6F4FD, white 70%);
  --c-give-card-bg: color-mix(in srgb, #fff 95%, black 5%);
  --c-border-subtle: color-mix(in srgb, #fff 80%, black 20%);
  --c-border-light: color-mix(in srgb, #fff 90%, black 10%);
  --c-selected-bg: color-mix(in srgb, #fff 90%, black 10%);
  --c-text-muted: color-mix(in srgb, #fff 50%, black 50%);
  --c-time-label: color-mix(in srgb, #fff 50%, black 50%);
  --c-time-label-bg: color-mix(in srgb, #fff 98%, black 2%);
  --c-main-bg: color-mix(in srgb, #fff 95%, black 5%);
  --c-label-text: color-mix(in srgb, #0c0c0c 80%, white 20%);
  --c-input-text: color-mix(in srgb, #fff 97%, black 3%);
  --c-placeholder: color-mix(in srgb, #fff 75%, black 25%);
  --c-accent-2-rgb: 127, 178, 221;

  /* Gray scale */
  --c-white: #ffffff;
  --c-gray-50: #f9fafb;
  --c-gray-100: #f3f4f6;
  --c-gray-200: #e5e7eb;
  --c-gray-300: #d1d5db;
  --c-gray-400: #9ca3af;
  --c-gray-500: #6b7280;
  --c-gray-600: #4b5563;
  --c-gray-700: #374151;
  --c-gray-800: #1f2937;
  --c-gray-900: #111827;

  /* Layout variables */
  --overlay-height: .33;
  --mobile-zoom: 1.50;
  --tablet-zoom: 1.20;
  --bg-pin: top;
  --bg-mobile-offset-x: 0px;
  --bg-mobile-offset-y: 0px;
}