:root {
  /* Colors */
  --color-primary: #ff6ef9;
  --color-text: #fff;
  --color-text-secondary: rgba(255, 255, 255, 0.75);
  --color-background: #000;
  --color-border: #494949;
  --color-card-bg: #1B1B1B;
  --color-gold: #FFD700;
  --glass-background: rgba(25, 25, 25, 0.18);
  --glass-background-hover: rgba(35, 35, 35, 0.25);
  --glass-blur: blur(25px);
  --glass-border-color: rgba(73, 73, 73, 0.5);
  --glass-border: 1px solid var(--glass-border-color);
  --icon-filter: brightness(0) invert(1); /* Makes icons white */
  /* --theme-border-strong: 1px solid rgba(255,255,255,0.35); */
  --theme-border-panel: 1px solid rgba(255,255,255,0.18); /* Subtle white border for dark backgrounds */
  --theme-border-divider: 1px solid rgba(255,255,255,0.1);

  /* Typography */
  --font-family: "Google Sans Flex", sans-serif;
  --font-weight-thin: 300;
  --font-weight-ultra-light: 200;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-3xs: 10px;
  --font-size-2xs: 12px;
  --font-size-xs: 16px;
  --font-size-sm: 20px;
  --font-size-md: 24px;
  --font-size-md-plus: 28px;
  --font-size-lg: 32px;
  --font-size-xl: 48px;
  --font-size-xl-plus: 56px;
  --font-size-2xl: 64px;
  --font-size-2xl-plus: 72px;
  --font-size-3xl: 80px;
  --font-size-3xl-plus: 120px;
  --font-size-4xl: 160px;
  --font-size-hero: 64px;
  --letter-spacing-2xs: 0.2px;
  --line-height-sm: 16px;
  --line-height-md: 24px;
  --line-height-md-plus: 36px;
  --line-height-lg: 32px;
  --line-height-xl: 40px;
  --line-height-xl-plus: 64px;
  --line-height-2xl: 48px;
  --line-height-2xl-plus: 80px;
  --line-height-3xl: 72px;
  --line-height-3xl-plus: 120px;
  --line-height-4xl: 88px;
  --line-height-5xl: 104px;
  --line-height-6xl: 160px;
  --line-height-hero: 72px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2x: 42px;
  --spacing-3x: 48px;
  --spacing-4x: 64px;
  --spacing-4-5x: 88px;
  --spacing-5x: 120px;
  --spacing-6x: 160px;
  --spacing-7x: 200px;
  --spacing-8x: 240px;
  --spacing-9x: 320px;
  --gutter-width-sm: 8px;
  --gutter-width-md: 16px;
  --gutter-width-xs: 4px;
  --section-spacing: var(--spacing-5x);
  --major-section-spacing: var(--spacing-7x); /* Global control for spacing between major sections */

  /* Sizing */
  --width-xs: 20px;
  --width-sm: 32px;
  --width-md: 48px;
  --width-lg: 80px;
  --width-xl: 104px;
  --height-xs: 20px;
  --height-sm: 32px;
  --height-md: 48px;
  --height-lg: 80px;
  --height-xl: 220px;
  --height-xxl: 503px;
  --max-width-sm: 640px;
  --max-width-md: 800px;
  --max-width-lg: 1080px;
  --max-width-xl: 1400px;
  --max-width-testimonial: 1140px;
  --grid-column-sm: 341px;

  /* Borders */
  --border-radius: 16px; /* Classic even 16px corners */
  --border-radius-outer: calc(16px + var(--gutter-width-sm));
  --border-radius-full: 50%;
  --corner-shape: round; /* For future use with corner-shape property */
  --border-width: 1px;
  --border-style: solid;
  --border-default: var(--border-width) var(--border-style) var(--color-border);

  /* Layout */
  /* --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 991px;
  --breakpoint-xl: 1200px; */

  /* Testimonial Page Styles */
  --navy-dark: #0D1021;
  --green: #00FF5F;
  --zing-green: #59FF60;
  --theme-primary-zing: var(--zing-green);

  /* Avatar Background Colors */
  --avatar-bg-blue: rgba(0, 149, 255, 0.1);
  --avatar-bg-purple: rgba(190, 75, 255, 0.1);
  --avatar-bg-green: rgba(80, 255, 128, 0.1);
  --avatar-bg-gold: rgba(255, 199, 0, 0.1);
  --avatar-bg-red: rgba(255, 55, 95, 0.1);
}

/* Responsive Type Scale */
/* @media (min-width: 1025px) {
  :root {
    --font-size-3xs: 12px;
    --font-size-2xs: 14px;
    --font-size-xs: 20px;
    --font-size-sm: 24px;
    --font-size-md: 28px;
    --font-size-lg: 40px;
    --font-size-xl: 56px;
    --font-size-2xl: 72px;
    --font-size-3xl: 96px;
    
    --line-height-sm: 18px;
    --line-height-md: 28px;
    --line-height-lg: 36px;
    --line-height-xl: 48px;
    --line-height-2xl: 64px;
    --line-height-3xl: 84px;
    --line-height-4xl: 100px;
    
    --border-radius-outer: calc(var(--border-radius) + var(--gutter-width-sm));
  }
} */

@media (max-width: 1024px) {
  :root {
    --font-size-sm: 16px;
    --font-size-md: 20px;
    --font-size-md-plus: 24px;
    --font-size-lg: 28px;
    --font-size-xl: 36px;
    --font-size-2xl: 48px;
    --font-size-3xl: 56px;
    
    --border-radius-outer: calc(var(--border-radius) + var(--gutter-width-xs));
    --major-section-spacing: var(--spacing-6x); /* Tablet spacing */
  }
}

@media (max-width: 740px) {
  :root {
    --major-section-spacing: var(--spacing-4x); /* Mobile spacing */
  }
}


/* More moderate text sizes for largest breakpoints */
@media (min-width: 1241px) {
  :root {
    --font-size-3xs: 11px;
    --font-size-2xs: 13px;
    --font-size-xs: 18px;
    --font-size-sm: 20px;
    --font-size-md: 24px;
    --font-size-lg: 40px;
    --font-size-xl: 64px;
    --font-size-2xl: 104px;
    --font-size-3xl: 142px;
  }
}

/* ====================
THEME SYSTEM
==================== */

/* Default theme (dark) */
:root {
  --theme-background: rgb(14, 4, 29);
  /* --theme-card-background: var(--glass-background); */
  --theme-card-background: rgb(17, 17, 17);
  --theme-text: var(--color-text);
  --theme-text-secondary: var(--color-text-secondary);
  --theme-primary: var(--color-primary);
  --theme-glass-background: var(--glass-background);
  --theme-glass-border: var(--glass-border);
  --theme-showcase-gradient: linear-gradient(155deg, #0D0426 0%, #080219 100%);
  --theme-subtle-background: rgba(25, 25, 25, 0.2);
  --zing-dark-background: #070116;
  /* Product hub panels (Zing/Monese bridge); alias until body theme applies */
  --hub-panel-background: var(--zing-dark-background);
  --hub-sticky-chrome: rgba(7, 1, 22, 0.6);
  --text-color-primary: var(--theme-text);
}

/* Monese theme (dark) */
.theme-monese-dark {
  --theme-background: #070116;
  /* --theme-card-background: rgb(17, 17, 17); */
  --theme-text: #ffffff;
  --theme-text-secondary: rgba(255,255,255,0.7);
  --theme-primary: #0066cc;
  --theme-glass-background: rgba(0,0,0,0.7);
  --theme-glass-border: 1px solid rgba(73, 73, 73, 0.5);
  --theme-showcase-gradient: linear-gradient(155deg, #070116 0%, #03000D 100%);
  /* --theme-border-panel: 1px solid rgba(255,255,255,0.18); */
  /* --theme-border-divider: 1px solid rgba(255,255,255,0.1); */
}

/* Monese theme (light) */
.theme-monese {
  --theme-background: #fff;
  --theme-card-background: #fff;
  --theme-text: #181A1B;
  --theme-text-secondary: rgba(24,26,27,0.7);
  --theme-primary: #0B72FD;
  --theme-glass-background: rgba(255,255,255,0.18);
  --theme-glass-border: 1px solid rgba(24,26,27,0.10);
  --theme-showcase-gradient: linear-gradient(155deg, #eaf3ff 0%, #f5faff 100%);
  /* Legacy tokens mapped to light theme values */
  --color-primary: var(--theme-primary);
  --color-background: var(--theme-background);
  --color-text: var(--theme-text);
  --color-text-secondary: var(--theme-text-secondary);
  --color-border: rgba(24, 26, 27, 0.1);
  /* --theme-border-panel: 1px solid rgba(255,255,255,0.18);  */
  /* --theme-border-divider: 1px solid rgba(255,255,255,0.18); */
}

/* Monese theme (light) - alternative class name */
.theme-monese-light {
  --theme-background: #ffffff;
  --theme-card-background: #ffffff;
  --theme-text: #181A1B;
  --theme-text-secondary: rgba(24,26,27,0.7);
  --theme-primary: #0B72FD;
  /* Bridge / Monese surfaces: use brand blue instead of global pink (--color-primary on :root) */
  --color-primary: var(--theme-primary);
  /* Legacy tokens that still reference dark defaults — remap to the light theme
     so older components (image-grid, testimonial, how-it-began, etc.) follow the theme. */
  --color-background: var(--theme-background);
  --color-text: var(--theme-text);
  --color-text-secondary: var(--theme-text-secondary);
  --color-border: rgba(24, 26, 27, 0.1);
  --theme-glass-background: rgba(255,255,255,0.18);
  --theme-glass-border: 1px solid rgba(24,26,27,0.09);
  --theme-showcase-gradient: linear-gradient(155deg, #eaf3ff 0%, #f5faff 100%);
  --theme-border-divider: 1px solid rgba(24,26,27,0.075);
  --theme-border-panel: 1px solid rgba(24,26,27,0.11);
  /* Hub / case-study tiles: white panels, slightly stronger hairlines */
  --hub-panel-background: #ffffff;
  --zing-dark-background: #ffffff; /* legacy hub rules that still reference this token */
  --glass-background: #ffffff;
  --glass-background-hover: #fafbfc;
  --glass-border-color: rgba(24, 26, 27, 0.1);
  --glass-border: 1px solid var(--glass-border-color);
  --icon-filter: none;
  --theme-subtle-background: rgba(11, 114, 253, 0.06);
  --hub-sticky-chrome: rgba(255, 255, 255, 0.88);
  --text-color-primary: var(--theme-text);
}

/* Zing theme (dark) — bridge page canvas is true black */
.theme-zing {
  --theme-background: #000000;
  --theme-card-background: rgb(17, 17, 17);
  --theme-text: var(--color-text);
  --theme-text-secondary: var(--color-text-secondary);
  --theme-primary: var(--zing-green);
  --color-primary: var(--theme-primary);
  --theme-glass-background: var(--glass-background);
  --theme-glass-border: var(--glass-border);
  --theme-showcase-gradient: linear-gradient(155deg, #000000 0%, #000000 100%);
  --theme-subtle-background: rgba(25, 25, 25, 0.2);
  --theme-border-panel: 1px solid rgba(255,255,255,0.18);
  --theme-border-divider: 1px solid rgba(255,255,255,0.1);
  --zing-dark-background: #070116;
  --hub-panel-background: #070116;
  --hub-sticky-chrome: rgba(0, 0, 0, 0.6);
  --text-color-primary: var(--theme-text);
}