:root {
  /* Colors */
  --color-primary: #7c3aed;
  --color-primary-hover: #8b5cf6;
  --color-primary-dark: #5b21b6;
  --color-primary-tint: #f3eeff;
  --color-header-bg: #1e1b4b;
  --color-text-primary: #23272f;
  --color-text-secondary: #666;
  --color-text-tertiary: #999;
  --color-background: #ffffff;
  --color-background-secondary: #f6f7fa;
  --color-background-tertiary: #f9f9f9;
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;
  --color-error: #e53e3e;
  --color-error-light: #e53935;
  --color-success: #10b981;

  /* Message Colors.
     User bubble is brand-driven (set by branding API).
     Bot bubble is FIXED by product decision — always neutral light grey with
     near-black text, never overridden by dashboard branding, so the bot's
     replies stay visually distinct from the user's brand-coloured messages.
     branding.js deliberately does NOT set the two --bot-* vars. */
  --user-message-color: var(--color-primary);
  --user-font-color: #ffffff;
  --bot-message-color: #F3F4F6;
  --bot-font-color: #1F2937;

  /* Theme color — single source for header, buttons, widget (set by branding API) */
  --theme-color: var(--color-primary);
  --theme-font-color: #ffffff;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;

  /* Typography */
  --font-family: "Inter", "DM Sans", Roboto, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  --line-height-tight: 1.3;

  /* Layout */
  --header-height: 56px;
  --header-height-mobile: 64px;
  --header-height-mobile-small: 60px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 18px;
  --border-radius-full: 50%;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(60, 60, 60, 0.06);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-primary: 0 2px 8px rgba(124, 58, 237, 0.1);
  --shadow-primary-hover: 0 4px 12px rgba(124, 58, 237, 0.2);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease-out;

  /* Z-index */
  --z-modal: 9999;
  --z-header: 10;

  /* Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-mobile-small: 480px;

  /* Message */
  --message-max-width: 340px;
  --message-avatar-size: 28px;
  --message-avatar-size-header: 32px;

  /* Input */
  --input-max-length: 500;
  --input-padding: 12px 16px;
  --input-border-radius: 24px;

  /* Modal */
  --modal-max-width: 400px;
  --modal-backdrop-blur: 4px;

  /* Design System Variables (Hostinger-style) */
  --h-border-radius-xs: 4px;
  --h-border-radius-sm: 8px;
  --h-border-radius-md: 12px;
  --h-border-radius-lg: 16px;
  --h-border-radius-lg-alt: 20px;
  --h-border-radius-xl: 24px;
  --h-border-radius-2xl: 32px;
  --h-border-radius-full: 999px;

  /* Colors - Hostinger Design System */
  --h-color-neutral-0: #fff;
  --h-color-neutral-50: #f8f9fa;
  --h-color-neutral-100: #eeeef0;
  --h-color-neutral-200: #dedee2;
  --h-color-neutral-300: #c6c6cc;
  --h-color-neutral-400: #9d9ea4;
  --h-color-neutral-500: #797980;
  --h-color-neutral-600: #58585e;
  --h-color-neutral-700: #36363b;
  --h-color-neutral-800: #222225;
  --h-color-neutral-900: #18181a;
  --h-color-neutral-950: #101011;
  --h-color-neutral-1000: #000;

  --h-color-primary-500: #8b5cf6;
  --h-color-primary-600: #7c3aed;
  --h-color-primary-700: #6d28d9;

  /* Background Colors */
  --h-bg-neutral-default: var(--h-color-neutral-0);
  --h-bg-neutral-hover: var(--h-color-dark-a10, rgba(0, 0, 0, 0.1));
  --h-bg-neutral-disabled: var(--h-color-dark-a5, rgba(0, 0, 0, 0.05));
  --h-bg-neutral-secondary: var(--h-color-neutral-100);
  --h-bg-neutral-surface: var(--h-color-dark-a5, rgba(0, 0, 0, 0.05));
  --h-bg-neutral-surface-secondary: var(--h-color-dark-a20, rgba(0, 0, 0, 0.2));
  --h-bg-neutral-elevated: var(--h-color-neutral-0);
  --h-bg-neutral-inverse-default: var(--h-color-neutral-900);
  --h-bg-neutral-inverse-hover: var(--h-color-dark-a80, rgba(0, 0, 0, 0.8));
  --h-bg-neutral-inverse-disabled: var(--h-color-dark-a5, rgba(0, 0, 0, 0.05));
  --h-bg-brand-default: var(--h-color-primary-600);
  --h-bg-brand-hover: var(--h-color-primary-700);
  --h-bg-brand-disabled: var(--h-color-dark-a5, rgba(0, 0, 0, 0.05));
  --h-bg-brand-secondary: var(--h-color-primary-500);
  --h-bg-brand-tint-default: linear-gradient(var(--h-color-primary-a10, rgba(123, 102, 255, 0.1)), var(--h-color-primary-a10, rgba(123, 102, 255, 0.1))), linear-gradient(var(--h-color-neutral-0), var(--h-color-neutral-0));
  --h-bg-brand-tint-hover: linear-gradient(var(--h-color-primary-a15, rgba(123, 102, 255, 0.15)), var(--h-color-primary-a15, rgba(123, 102, 255, 0.15))), linear-gradient(var(--h-color-neutral-0), var(--h-color-neutral-0));
  --h-bg-brand-tint-disabled: var(--h-color-dark-a5, rgba(0, 0, 0, 0.05));

  /* Foreground Colors */
  --h-fg-neutral-default: var(--h-color-neutral-900);
  --h-fg-neutral-hover: var(--h-color-neutral-1000);
  --h-fg-neutral-disabled: var(--h-color-neutral-400);
  --h-fg-neutral-secondary: var(--h-color-neutral-600);
  --h-fg-neutral-inverse-default: var(--h-color-neutral-50);
  --h-fg-neutral-inverse-hover: var(--h-color-neutral-0);
  --h-fg-neutral-inverse-disabled: var(--h-color-neutral-400);
  --h-fg-brand-default: var(--h-color-primary-600);
  --h-fg-brand-hover: var(--h-color-primary-700);
  --h-fg-brand-disabled: var(--h-color-neutral-400);
  --h-fg-brand-secondary: var(--h-color-primary-500);
  --h-fg-brand-inverse-default: var(--h-color-neutral-0);
  --h-fg-brand-inverse-hover: var(--h-color-neutral-200);
  --h-fg-brand-inverse-disabled: var(--h-color-neutral-400);
  --h-fg-danger-default: #fc5185;
  --h-fg-danger-hover: #be1025;
  --h-fg-danger-disabled: var(--h-color-neutral-400);
  --h-fg-danger-secondary: #e73a47;
  --h-fg-danger-inverse-default: var(--h-color-neutral-0);
  --h-fg-danger-inverse-hover: var(--h-color-neutral-200);
  --h-fg-danger-inverse-disabled: var(--h-color-neutral-400);

  /* Stroke/Border Colors */
  --h-stroke-strong: var(--h-color-neutral-950);
  --h-stroke-strong-inverse: var(--h-color-neutral-50);
  --h-stroke-default: var(--h-color-dark-a10, rgba(0, 0, 0, 0.1));
  --h-stroke-default-inverse: var(--h-color-light-a10, rgba(255, 255, 255, 0.1));
  --h-stroke-subtle: var(--h-color-dark-a5, rgba(0, 0, 0, 0.05));
  --h-stroke-brand: var(--h-color-primary-500);
  --h-stroke-danger: #e73a47;
  --h-stroke-success: #009e5b;
  --h-stroke-warning: #e69800;

  /* Typography Variables - Hostinger Design System */
  --font-size-body-1: 16px;
  --line-height-body-1: 24px;
  --font-weight-body-1: 399;
  --letter-spacing-body-1: 0;
  --font-size-body-1-bold: 16px;
  --line-height-body-1-bold: 24px;
  --font-weight-body-1-bold: 599;
  --letter-spacing-body-1-bold: 0;
  --font-size-body-2: 14px;
  --line-height-body-2: 20px;
  --font-weight-body-2: 399;
  --letter-spacing-body-2: 0;
  --font-size-body-2-bold: 14px;
  --line-height-body-2-bold: 20px;
  --font-weight-body-2-bold: 599;
  --letter-spacing-body-2-bold: 0;
  --font-size-body-3: 12px;
  --line-height-body-3: 16px;
  --font-weight-body-3: 399;
  --letter-spacing-body-3: 0;
  --font-size-heading-2: 20px;
  --line-height-heading-2: 28px;
  --font-weight-heading-2: 599;
  --letter-spacing-heading-2: -0.005em;
  --font-size-heading-3: 18px;
  --line-height-heading-3: 26px;
  --font-weight-heading-3: 599;
  --letter-spacing-heading-3: -0.005em;
  --font-size-button-2: 14px;
  --line-height-button-2: 24px;
  --font-weight-button-2: 699;
  --letter-spacing-button-2: 0;

  /* Color Alpha Values */
  --h-color-dark-a5: rgba(0, 0, 0, 0.05);
  --h-color-dark-a10: rgba(0, 0, 0, 0.1);
  --h-color-dark-a15: rgba(0, 0, 0, 0.15);
  --h-color-dark-a20: rgba(0, 0, 0, 0.2);
  --h-color-dark-a25: rgba(0, 0, 0, 0.25);
  --h-color-dark-a50: rgba(0, 0, 0, 0.5);
  --h-color-dark-a75: rgba(0, 0, 0, 0.75);
  --h-color-dark-a80: rgba(0, 0, 0, 0.8);
  --h-color-dark-a90: rgba(0, 0, 0, 0.9);
  --h-color-light-a0: rgba(255, 255, 255, 0);
  --h-color-light-a5: rgba(255, 255, 255, 0.05);
  --h-color-light-a10: rgba(255, 255, 255, 0.1);
  --h-color-light-a15: rgba(255, 255, 255, 0.15);
  --h-color-light-a20: rgba(255, 255, 255, 0.2);
  --h-color-light-a25: rgba(255, 255, 255, 0.25);
  --h-color-light-a50: rgba(255, 255, 255, 0.5);
  --h-color-light-a75: rgba(255, 255, 255, 0.75);
  --h-color-light-a80: rgba(255, 255, 255, 0.8);
  --h-color-light-a90: rgba(255, 255, 255, 0.9);
  --h-color-primary-a10: rgba(124, 58, 237, 0.1);
  --h-color-primary-a15: rgba(124, 58, 237, 0.15);
  --h-color-primary-a20: rgba(124, 58, 237, 0.2);
  --h-color-primary-a25: rgba(124, 58, 237, 0.25);

  /* Button Variables */
  --h-button-contain-primary-color: var(--h-fg-brand-inverse-default);
  --h-button-contain-primary-bg: var(--h-bg-brand-default);
  --h-button-contain-primary-border: 1px solid transparent;
  --h-button-contain-primary-color-hover: var(--h-fg-brand-inverse-default);
  --h-button-contain-primary-bg-hover: var(--h-bg-brand-hover);
  --h-button-contain-primary-border-hover: 1px solid transparent;
  --h-button-contain-primary-color-disabled: var(--h-fg-brand-inverse-disabled);
  --h-button-contain-primary-bg-disabled: var(--h-bg-brand-disabled);
  --h-button-contain-primary-border-disabled: 1px solid transparent;
  --h-button-text-primary-color: var(--h-fg-brand-default);
  --h-button-text-primary-bg: transparent;
  --h-button-text-primary-border: 1px solid transparent;
  --h-button-text-primary-color-hover: var(--h-fg-brand-default);
  --h-button-text-primary-bg-hover: var(--h-bg-brand-tint-default);
  --h-button-text-primary-border-hover: 1px solid transparent;
  --h-button-text-primary-color-disabled: var(--h-fg-brand-disabled);
  --h-button-text-primary-bg-disabled: transparent;
  --h-button-text-primary-border-disabled: 1px solid transparent;

  /* Spacing - Hostinger Design System */
  --h-spacing-4xs: 2px;
  --h-spacing-3xs: 4px;
  --h-spacing-2xs: 8px;
  --h-spacing-xs: 12px;
  --h-spacing-sm: 16px;
  --h-spacing-md-alt: 20px;
  --h-spacing-md: 24px;
  --h-spacing-lg: 32px;
  --h-spacing-xl: 40px;
  --h-spacing-2xl: 48px;
  --h-spacing-3xl: 64px;
  --h-spacing-4xl: 80px;
}