/* =============================================================
   JustCall Design System — Colors & Type
   Source: design-system-spec.md (Design System 2.0, Figma key FBWaoEoUfhOZqAhxIuJHqd)
   Font: Inter (loaded via Google Fonts — see index at bottom)
   ============================================================= */

#convo-mount {
  /* ─── Color · text ─── */
  --text-primary: #101828;
  --text-secondary: #667085;
  --text-disabled: #98A2B3;
  --text-placeholder: #98A2B3;
  --text-white: #FFFFFF;
  --text-brand: #004CE6;

  /* ─── Color · background ─── */
  --bg-primary: #FFFFFF;
  --bg-primary-hover: #F9FAFB;
  --bg-secondary: #F9FAFB;
  --bg-secondary-hover: #F2F4F7;
  --bg-tertiary: #E4E7EC;
  --bg-disabled: #F2F4F7;
  --bg-brand-primary: #004CE6;
  --bg-brand-primary-hover: #003BB3;
  --bg-brand-secondary: #EFF8FF;

  /* ─── Color · border ─── */
  --border-primary: #E4E7EC;
  --border-secondary: #D0D5DD;
  --border-tertiary: #98A2B3;
  --border-disabled: #E4E7EC;
  --border-brand: #004CE6;
  --border-brand-hover: #003BB3;

  /* ─── Color · icon ─── */
  --icon-primary: #101828;
  --icon-secondary: #667085;
  --icon-disabled: #98A2B3;
  --icon-white: #FFFFFF;
  --icon-premium: #FEC84B;
  --icon-brand: #004CE6;

  /* ─── Color · status · error ─── */
  --error-primary: #D92D20;
  --error-primary-hover: #B42318;
  --error-secondary: #FEF3F2;
  --error-text: #D92D20;
  --error-border: #FEE4E2;

  /* ─── Color · status · warning ─── */
  --warning-primary: #F79009;
  --warning-primary-hover: #DC6803;
  --warning-secondary: #FFFAEB;
  --warning-text: #B54708;
  --warning-border: #FEF0C7;

  /* ─── Color · status · success ─── */
  --success-primary: #12B76A;
  --success-primary-hover: #039855;
  --success-secondary: #ECFDF3;
  --success-text: #027A48;
  --success-border: #A6F4C5;

  /* ─── Color · status · info ─── */
  --info-primary: #004CE6;
  --info-primary-hover: #003BB3;
  --info-secondary: #E6EEFF;
  --info-text: #175CD3;
  --info-border: #CCDEFF;

  /* ─── Color · accent · blue-grey ─── */
  --accent-blue-grey-text: #363F72;
  --accent-blue-grey-bg: #EAECF5;
  --accent-blue-grey-border: #AFB5D9;

  /* ─── Color · accent · pink ─── */
  --accent-pink-text: #C11574;
  --accent-pink-bg: #FDF2FA;
  --accent-pink-border: #FAA7E0;
  --accent-pink-badge: #EE46BC;

  /* ─── Color · accent · purple ─── */
  --accent-purple-text: #5925DC;
  --accent-purple-bg: #F4F3FF;
  --accent-purple-border: #BDB4FE;

  /* ─── Color · accent · indigo ─── */
  --accent-indigo-text: #3538CD;
  --accent-indigo-bg: #EEF4FF;
  --accent-indigo-border: #A4BCFD;

  /* ─── Color · accent · grey ─── */
  --accent-grey-text: #344054;
  --accent-grey-bg: #F2F4F7;
  --accent-grey-border: #D0D5DD;

  /* ─── Color · accent · orange ─── */
  --accent-orange-text: #EC4A0A;
  --accent-orange-bg: #FFF6ED;
  --accent-orange-border: #FEB273;

  /* ─── Color · Inverse (dark surfaces) ─── */
  --inverse-button-primary: #4D8BFF;
  --inverse-layer-02: #344054;
  --inverse-layer-03: #101828;
  --inverse-layer-disabled: #475467;
  --inverse-layer-01-hover: #101828;

  /* ─── Color · Gradients (solid fallbacks) ─── */
  --gradient-feature-core-shape-fill: #DDEEFF;
  --gradient-feature-highlighted-shape-fill: #A6D3FF;
  --gradient-illustration-blue: #2D72FF;

  /* Illustrative gradients (approximate — see Figma for exact stops) */
  --ai-primary-gradient: linear-gradient(135deg, #673BFF 0%, #2D72FF 100%);
  --ai-bg-gradient: linear-gradient(135deg, #F4F3FF 0%, #EFF8FF 100%);

  /* ─── Sidebar (production values, from §4.11 code drift table) ─── */
  --sidebar-bg: #0F1629;
  --sidebar-width: 230px;
  --sidebar-width-collapsed: 68px;
  --sidebar-nav-default: #98A2B3;
  --sidebar-nav-hover: #A0AAB8;
  --sidebar-active-accent: #3B82F6; /* NOTE: differs from bg/brand-primary — see spec §4.11 */
  --sidebar-surface-hover: rgba(255, 255, 255, 0.04);
  --sidebar-surface-active: rgba(255, 255, 255, 0.06);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-tooltip-bg: #1E293B;

  /* ─── Typography · family ─── */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ─── Typography · weights ─── */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ─── Typography · heading scale ─── */
  --font-heading-xxxlarge-size: 24px;
  --font-heading-xxxlarge-line-height: 32px;
  --font-heading-xxxlarge-weight: 600;

  --font-heading-xxlarge-size: 20px;
  --font-heading-xxlarge-line-height: 28px;
  --font-heading-xxlarge-weight: 600;

  --font-heading-xlarge-semi-size: 18px;
  --font-heading-xlarge-semi-line-height: 26px;
  --font-heading-xlarge-semi-weight: 600;

  --font-heading-xlarge-med-size: 18px;
  --font-heading-xlarge-med-line-height: 26px;
  --font-heading-xlarge-med-weight: 500;

  --font-heading-large-semi-size: 16px;
  --font-heading-large-semi-line-height: 24px;
  --font-heading-large-semi-weight: 600;

  --font-heading-large-med-size: 16px;
  --font-heading-large-med-line-height: 24px;
  --font-heading-large-med-weight: 500;

  /* ─── Typography · label scale ─── */
  --font-label-medium-semi-size: 14px;
  --font-label-medium-semi-line-height: 20px;
  --font-label-medium-semi-weight: 600;

  --font-label-medium-med-size: 14px;
  --font-label-medium-med-line-height: 20px;
  --font-label-medium-med-weight: 500;

  --font-label-small-size: 12px;
  --font-label-small-line-height: 16px;
  --font-label-small-weight: 500;

  --font-label-xsmall-size: 10px;
  --font-label-xsmall-line-height: 14px;
  --font-label-xsmall-weight: 500;

  /* ─── Typography · paragraph scale ─── */
  --font-paragraph-large-size: 16px;
  --font-paragraph-large-line-height: 24px;
  --font-paragraph-large-weight: 400;

  --font-paragraph-medium-size: 14px;
  --font-paragraph-medium-line-height: 20px;
  --font-paragraph-medium-weight: 400;

  --font-paragraph-small-size: 12px;
  --font-paragraph-small-line-height: 16px;
  --font-paragraph-small-weight: 400;

  --font-paragraph-xsmall-size: 10px;
  --font-paragraph-xsmall-line-height: 12px;
  --font-paragraph-xsmall-weight: 400;

  /* ─── Shadows · default ─── */
  --shadow-100: 0 0 1px rgba(48, 49, 51, 0.05), 0 1px 1px rgba(48, 49, 51, 0.10);
  --shadow-200: 0 0 1px rgba(48, 49, 51, 0.05), 0 2px 4px rgba(48, 49, 51, 0.10);
  --shadow-300: 0 0 1px rgba(48, 49, 51, 0.05), 0 4px 8px rgba(48, 49, 51, 0.10);
  --shadow-400: 0 0 1px rgba(48, 49, 51, 0.05), 0 8px 16px rgba(48, 49, 51, 0.10);
  --shadow-500: 0 0 1px rgba(48, 49, 51, 0.05), 0 16px 24px rgba(48, 49, 51, 0.09);
  --shadow-600: 0 0 1px rgba(48, 49, 51, 0.05), 0 24px 40px rgba(48, 49, 51, 0.08);

  /* ─── Shadows · AI ─── */
  --ai-shadow-100: 0 0 1px rgba(103, 59, 255, 0.05), 0 1px 1px rgba(103, 59, 255, 0.10);
  --ai-shadow-200: 0 0 1px rgba(103, 59, 255, 0.05), 0 2px 4px rgba(103, 59, 255, 0.10);
  --ai-shadow-300: 0 0 1px rgba(103, 59, 255, 0.05), 0 4px 8px rgba(103, 59, 255, 0.10);
  --ai-shadow-400: 0 0 1px rgba(103, 59, 255, 0.05), 0 8px 16px rgba(103, 59, 255, 0.10);
  --ai-shadow-500: 0 0 1px rgba(103, 59, 255, 0.05), 0 16px 24px rgba(103, 59, 255, 0.09);
  --ai-shadow-600: 0 0 1px rgba(103, 59, 255, 0.05), 0 24px 40px rgba(103, 59, 255, 0.08);

  /* ─── Radii ─── */
  --radius-xs: 2px;
  --radius-sm: 4px;   /* canonical — buttons, inputs, cards */
  --radius-md: 6px;   /* bulk selector */
  --radius-lg: 8px;
  --radius-xl: 12px;  /* modals, sidebar credits card */
  --radius-pill: 500px;

  /* ─── Spacing (inferred 4px base) ─── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

/* =============================================================
   Base / reset
   ============================================================= */



#convo-mount {
  font-family: var(--font-family-base);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============================================================
   Semantic type classes — mirror spec tokens
   ============================================================= */

.t-h-xxxl {
  font-size: var(--font-heading-xxxlarge-size);
  line-height: var(--font-heading-xxxlarge-line-height);
  font-weight: var(--font-heading-xxxlarge-weight);
  color: var(--text-primary);
  margin: 0;
} #convo-mount .t-h-xxl {
  font-size: var(--font-heading-xxlarge-size);
  line-height: var(--font-heading-xxlarge-line-height);
  font-weight: var(--font-heading-xxlarge-weight);
  color: var(--text-primary);
  margin: 0;
} #convo-mount .t-h-xl-semi {
  font-size: var(--font-heading-xlarge-semi-size);
  line-height: var(--font-heading-xlarge-semi-line-height);
  font-weight: var(--font-heading-xlarge-semi-weight);
  color: var(--text-primary);
  margin: 0;
} #convo-mount .t-h-xl-med {
  font-size: var(--font-heading-xlarge-med-size);
  line-height: var(--font-heading-xlarge-med-line-height);
  font-weight: var(--font-heading-xlarge-med-weight);
  color: var(--text-primary);
  margin: 0;
} #convo-mount .t-h-l-semi {
  font-size: var(--font-heading-large-semi-size);
  line-height: var(--font-heading-large-semi-line-height);
  font-weight: var(--font-heading-large-semi-weight);
  color: var(--text-primary);
  margin: 0;
} #convo-mount .t-h-l-med {
  font-size: var(--font-heading-large-med-size);
  line-height: var(--font-heading-large-med-line-height);
  font-weight: var(--font-heading-large-med-weight);
  color: var(--text-primary);
  margin: 0;
} #convo-mount .t-label-m-semi {
  font-size: var(--font-label-medium-semi-size);
  line-height: var(--font-label-medium-semi-line-height);
  font-weight: var(--font-label-medium-semi-weight);
} #convo-mount .t-label-m-med {
  font-size: var(--font-label-medium-med-size);
  line-height: var(--font-label-medium-med-line-height);
  font-weight: var(--font-label-medium-med-weight);
} #convo-mount .t-label-s {
  font-size: var(--font-label-small-size);
  line-height: var(--font-label-small-line-height);
  font-weight: var(--font-label-small-weight);
} #convo-mount .t-label-xs {
  font-size: var(--font-label-xsmall-size);
  line-height: var(--font-label-xsmall-line-height);
  font-weight: var(--font-label-xsmall-weight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
} #convo-mount .t-p-l {
  font-size: var(--font-paragraph-large-size);
  line-height: var(--font-paragraph-large-line-height);
  font-weight: var(--font-paragraph-large-weight);
} #convo-mount .t-p-m {
  font-size: var(--font-paragraph-medium-size);
  line-height: var(--font-paragraph-medium-line-height);
  font-weight: var(--font-paragraph-medium-weight);
} #convo-mount .t-p-s {
  font-size: var(--font-paragraph-small-size);
  line-height: var(--font-paragraph-small-line-height);
  font-weight: var(--font-paragraph-small-weight);
} #convo-mount .t-p-xs {
  font-size: var(--font-paragraph-xsmall-size);
  line-height: var(--font-paragraph-xsmall-line-height);
  font-weight: var(--font-paragraph-xsmall-weight);
} #convo-mount .text-primary { color: var(--text-primary); } #convo-mount .text-secondary { color: var(--text-secondary); } #convo-mount .text-disabled { color: var(--text-disabled); } #convo-mount .text-brand { color: var(--text-brand); } #convo-mount .text-white { color: var(--text-white); }