:root,
:host,
.uc-theme-light {
  color-scheme: light;

  --uc-accent-color: #6366F1;
  --uc-ap-bg: #ebeaf1;
  --uc-primary-bg: #ebeaf1;
  --uc-secondary-bg: #FFFFFF;
  --uc-secondary-bg-light: #d3c5e5;
  --uc-text-color-grey: #B6B6B6;
  --uc-text-color-secondery: #2F277F;

  /* Text Colors */
  --uc-primary-text-color: #2F277F;
  --uc-secondary-text-color: #2F277F;
  --uc-white-text-color: #ffffff;
  --uc-hover-text-color: #2F277F;
  --uc-list-text-color: #766FC5;

  /* colors */
  --uc-primary-color: #2F277F;
  --uc-secondery-color: #422868;

  /* Border */
  --uc-primary-border-color: #ABB7FF;
  --uc-secondary-border-color: #564eab;
  --uc-border-bubble: #3e285c;
  --uc-main-border-color: #F2EFFD;
  --uc-hover-bg: #d3c5e5;
  --uc-icon : #2F277F;
  --uc-icon-white: #ABB7FF;
  --uc-chat-bg: #F9FAFC;
  --uc-chat-bubble-bg: #ffffff;
  --uc-chat-bubble-own-bg: #FBF5FF;
  --uc-chat-bubble-own-text: #000000;
  --uc-chat-bubble-own-border: #F5E9FF;
  --uc-sms-bubble-bg: #e9eaed;
  --uc-sms-bubble-color: #000000;

  --uc-chat-divider-color: rgba(47, 39, 127, 0.1);
  --uc-chat-input-bg: #ffffff;
  --uc-chat-input-border: #ffffff;
  --uc-chat-input-placeholder: rgba(47, 39, 127, 0.45);

  --uc-chat-bubble-other-bg: #FFFFFF;
  --uc-chat-bubble-other-border: #ECF1F8;
  --uc-chat-bubble-other-text: #000000;

  /* Action Colours  */
  --uc-success-bg: #219653;
  --uc-danger-bg: #ff0000;
  --uc-notification-color: #f83e47;

  --uc-app-font-size: 16px;

  --uc-highlight-bg: #b8b4f3;

  /* Settings dialog */
  --uc-dialog-bg: #DCE1FF;
  --uc-settings-row-bg: #FFFFFF;
  --uc-settings-row-text: #6366F1;
  --uc-toggle-off-bg: #766FC5;

  --uc-tab-bg: #fcfafa;
  --uc-type-tab-active-bg: #615BFC;

  /* Layout Dimensions */
  --uc-sidebar-width: 60px;
  --uc-channel-list-width: 277px;
  --uc-channel-list-min-width: 277px;
  --uc-channel-list-max-width: 320px;
  --uc-active-caller-bar-height: 48px;
  --uc-layout-gap: 10px;
  --uc-content-padding: 10px;
  --uc-panel-border-radius: 10px;
  --height-offset: 32px;
  --bottom-bar-height: 32px;

    /* Common colors */
  --uc-solid-bg: #efefef;

  /* Active call panel — WCAG-compliant colors for light bg */
  --uc-call-green: #0A6C43;
  --uc-call-border: rgba(10, 108, 67, 0.35);
  --uc-call-glow-md: rgba(10, 108, 67, 0.10);
  --uc-call-glow-sm: rgba(10, 108, 67, 0.05);
  --uc-call-glow-inset: rgba(10, 108, 67, 0.08);
  --uc-call-icon-bg: rgba(10, 108, 67, 0.12);
  --uc-call-icon-border: rgba(10, 108, 67, 0.40);
  --uc-call-pulse-start: rgba(10, 108, 67, 0.35);
  --uc-call-pulse-end: rgba(10, 108, 67, 0);

  /* Hold/Paused state */
  --uc-call-hold: #B45309;
  --uc-call-hold-bg: rgba(180, 83, 9, 0.12);
  --uc-call-hold-border: rgba(180, 83, 9, 0.40);

  /* Call panel text */
  --uc-call-text-primary: #374151;
  --uc-call-text-secondary: #6B7280;
  --uc-call-text-inactive: #9CA3AF;

  /* Presence / BLF panel — light equivalents of the mockup palette
     (vinix-blf-responsive-stable.html). Consumed by presence styles.ts via
     --blf-* so the panel keeps the same structure in the light theme. */
  --blf-surface: #ffffff;          /* panel background */
  --blf-surface-sunken: #f4f5f7;   /* search box / sunken inputs */
  --blf-card: #f7f8fa;             /* presence card background */
  --blf-line: rgba(0, 0, 0, 0.08);
  --blf-line-strong: rgba(0, 0, 0, 0.16);
  --blf-fg: #1d2430;               /* primary text */
  --blf-fg-2: #5b6170;             /* secondary text */
  --blf-fg-3: #8a8f9c;             /* tertiary text */
  --blf-muted: rgba(0, 0, 0, 0.04);        /* hover wash */
  --blf-accent: #7c3aed;           /* active tab underline / focus */
  --blf-pill-on-bg: #ece9fb;       /* active filter pill */
  --blf-pill-on-fg: #46406e;
  --blf-online-fg: #0a6c43;        /* "N online" badge */
  --blf-online-bg: rgba(10, 108, 67, 0.12);

  /* Active call panel — light surfaces (dark themes use the mockup literals
     from vinix-presence-mockup.html; text/lines bridge via --blf-*). */
  --acp-surface: #ffffff;          /* section slab */
  --acp-surface-sunken: #f4f5f7;   /* call cards (sunken on the slab) */
  --acp-hover: rgba(0, 0, 0, 0.04); /* control button hover wash */
  --acp-glow-lift: color-mix(in srgb, var(--blf-accent) 30%, transparent); /* purple-tinted depth under the glow slab (mockup light) */
}

/* Stream Chat SDK v2 bubble overrides — must target .str-chat to beat SDK specificity */
.uc-theme-light .str-chat,
.uc-theme-light.str-chat {
  --str-chat__message-bubble-color: var(--uc-primary-text-color);
  --str-chat__message-bubble-background-color: var(--uc-chat-bubble-bg);
  --str-chat__own-message-bubble-color: var(--uc-chat-bubble-own-text);
  --str-chat__message-bubble-border-radius: 14px;
}

/* _utility.css */