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

  /* Mobile brand: Colors.ts primaryBlue + ChatsScreen/chrome.ts pill tints.
     Small light-theme text and white-label actions use a deeper blue for contrast. */
  --uc-brand-blue: #5792FF;
  --uc-action-color: #2563EB;
  --uc-action-hover: #1D4ED8;
  --uc-action-pressed: #1E40AF;
  --uc-on-accent: #FFFFFF;
  --uc-accent-soft: color-mix(in srgb, var(--uc-accent-color) 16%, transparent);
  /* Anchor selected fills to the app ground to retain text contrast on panels. */
  --uc-accent-surface: color-mix(in srgb, var(--uc-accent-color) 16%, var(--uc-primary-bg));
  --uc-accent-border: color-mix(in srgb, var(--uc-accent-color) 50%, transparent);
  --uc-avatar-size-list: 45px;
  --uc-avatar-size-sm: 32px;
  --uc-avatar-radius: 50%;
  --uc-avatar-text: #FFFFFF;
  --uc-avatar-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --uc-avatar-font-weight: 600;
  --uc-avatar-font-size: 16px;
  --uc-avatar-number-font-size: 13px;
  --uc-avatar-bg: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);

  --uc-accent-color: #1D4ED8;
  --uc-ap-bg: #F1F5F9;
  --uc-primary-bg: #F1F5F9;
  --uc-secondary-bg: #FFFFFF;
  --uc-secondary-bg-light: #DBEAFE;
  --uc-text-color-grey: #B6B6B6;
  --uc-text-color-secondery: var(--uc-accent-color);

  --uc-primary-border-color-dimmed: var(--uc-accent-border);

  --uc-icon-border: var(--uc-accent-color);

  /* Text Colors */
  --uc-primary-text-color: #334155;
  --uc-secondary-text-color: #475569;
  --uc-white-text-color: #ffffff;
  --uc-hover-text-color: #172B4D;
  --uc-list-text-color: #475569;

  /* colors */
  --uc-primary-color: #334155;
  --uc-secondery-color: #475569;

  /* Border */
  --uc-primary-border-color: var(--uc-accent-color);
  --uc-secondary-border-color: #BFDBFE;
  --uc-border-bubble: #BFDBFE;
  --uc-main-border-color: #E2E8F0;
  --uc-hover-bg: #DBEAFE;
  --uc-icon : var(--uc-accent-color);
  --uc-icon-white: #475569;
  --uc-chat-bg: #F8FAFC;
  --uc-chat-bubble-bg: #ffffff;
  --uc-chat-bubble-own-bg: #EFF6FF;
  --uc-chat-bubble-own-text: #172B4D;
  --uc-chat-bubble-own-border: #BFDBFE;
  --uc-sms-bubble-bg: #e9eaed;
  --uc-sms-bubble-color: #000000;

  --uc-chat-divider-color: rgba(23, 43, 77, 0.12);
  --uc-chat-input-bg: #ffffff;
  --uc-chat-input-border: #DBEAFE;
  --uc-chat-input-placeholder: #64748B;

  --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: #DBEAFE;

  /* Settings dialog */
  --uc-dialog-bg: #EFF6FF;
  --uc-settings-row-bg: #FFFFFF;
  --uc-settings-row-text: var(--uc-accent-color);
  --uc-toggle-off-bg: #64748B;

  --uc-tab-bg: #fcfafa;
  --uc-type-tab-active-bg: var(--uc-action-color);

  /* Layout Dimensions */
  --uc-sidebar-width: 68px;
  --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: var(--uc-accent-color);           /* active tab underline / focus */
  --blf-pill-on-bg: var(--uc-accent-surface);       /* active filter pill */
  --blf-pill-on-fg: var(--uc-accent-color);
  --blf-online-fg: #0a6c43;        /* "N online" badge */
  --blf-online-bg: rgba(10, 108, 67, 0.12);

  /* Figma call panel: accessible light counterparts to the dark reference. */
  --acp-surface: #ffffff;
  --acp-surface-sunken: #f3f7fa;
  --acp-hover: #e4edf0;
  --acp-divider: #d5e2e4;
  --acp-border: #ccd8e5;
  --acp-text: #1d2939;
  --acp-text-secondary: #4f6378;
  --acp-control-icon: #4f6378;
  --acp-text-muted: #607387;
  --acp-live-text: #08734f;
  --acp-live-start: #e2f5ed;
  --acp-live-border: #83bda6;
  --acp-held-text: #835606;
  --acp-danger-text: #bc2946;
  --acp-incoming-start: #e8f0f8;
  --acp-incoming-end: #f5f8fc;
  --acp-incoming-border: #b9cdde;
  --acp-ignore-start: #b92d45;
  --acp-ignore-end: #982b3d;
  --acp-ignore-border: #a3263b;
  --acp-answer-bg: #16784d;
  --acp-answer-border: #11643f;
  --acp-shadow: rgba(31, 52, 77, 0.14);

  /* Settings modal + Quick Settings (Figma "Ui-fix" — Settings/* variables).
     Consumed by uc-app-setting/settings-primitives.styles.ts via --uc-set-*. */
  --uc-set-modal-bg: rgba(255, 255, 255, 0.898);
  --uc-set-modal-border: rgba(15, 23, 42, 0.078);
  --uc-set-scrim: rgba(15, 23, 42, 0.4);
  --uc-set-sidebar-bg: rgba(241, 245, 249, 0.722);
  --uc-set-surface: #ffffff;
  --uc-set-control-bg: #ffffff;
  --uc-set-control-disabled-bg: #e9edf2;
  --uc-set-nav-selected-bg: rgba(34, 89, 225, 0.078);
  --uc-set-hover-bg: rgba(15, 23, 42, 0.04);
  --uc-set-pressed-bg: rgba(15, 23, 42, 0.07);
  --uc-set-tint: #dbe6fb;
  --uc-set-tint-pressed: #c9d8f7;
  --uc-set-track-off: #cbd5e1;
  --uc-set-track: #dfe3e7;
  --uc-set-brand: #2259e1;
  --uc-set-brand-hover: #1c49b8;
  --uc-set-success: #10b981;
  --uc-set-danger: #dc2626;
  --uc-set-preview-bg: #0f172a;
  --uc-set-overlay-pill: rgba(255, 255, 255, 0.141);
  --uc-set-border-subtle: rgba(15, 23, 42, 0.059);
  --uc-set-border: rgba(15, 23, 42, 0.102);
  --uc-set-border-strong: rgba(15, 23, 42, 0.18);
  --uc-set-border-brand: #8ab4ff;
  --uc-set-border-brand-subtle: #bccbf0;
  --uc-set-border-brand-glass: rgba(34, 89, 225, 0.3);
  --uc-set-border-focus: #2f6bf0;
  --uc-set-focus-ring: rgba(34, 89, 225, 0.3);
  --uc-set-text: #0f172a;
  --uc-set-text-secondary: #64748b;
  --uc-set-text-tertiary: #94a3b8;
  --uc-set-text-nav: #475569;
  --uc-set-text-brand: #1c49b8;
  --uc-set-text-disabled: #94a3b8;
  --uc-set-text-on-brand: #ffffff;
  --uc-set-text-on-dark: rgba(255, 255, 255, 0.922);
  --uc-set-icon: #64748b;
  --uc-set-icon-brand: #2259e1;
}

/* 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 */