: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: #0A5A2A;
  --c-btn-secondary-border: #0A5A2A;
  --c-primary: #0A5A2A;
  --c-accent-1: #16A24A;
  --c-accent-2: #62C98A;
  --c-accent-3: #A5E4C4;
  --c-accent-4: #CDEDC5;
  --c-accent-5: #E3F6D8;
  --c-red: #ef4444;
  --c-red-light: #ffe7e7;
  --c-primary-original: #0A5A2A;
  --c-accent-1-original: #16A24A;
  --overlay-color-rgb: 255, 255, 255;
  --c-card-bg: color-mix(in srgb, #E3F6D8, white 70%);
  --c-input-bg: color-mix(in srgb, #E3F6D8, 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: 98, 201, 138;

  /* 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 */
  --top-overlay-size: .25;
  --left-overlay-size: 0;
  --mobile-zoom: 1.50;
  --tablet-zoom: 1.20;
  --bg-pin: bottom;
  --bg-mobile-offset-x: 30px;
  --bg-mobile-offset-y: 0px;
}