:root {
  color-scheme: light;
  /*
   * Calm Clinic — superfícies 3 níveis + acento sereno
   * LCD boost leve (2026-07): +contraste/+saturação só o suficiente p/ legibilidade
   * em monitores de baixa fidelidade; não “neonizar” a UI.
   */
  --canvas: #EEF1F4;
  --bg: var(--canvas);
  --surface: #FFFFFF;
  --surface-soft: #F5F8FA;
  --surface-muted: #E8EDF0;
  --surface-2: var(--surface-muted);
  --ink: #121A20;
  --ink-soft: #4A5A64;
  --muted: var(--ink-soft);
  --line: #C9D4DB;
  --line-strong: #A8B8C2;
  --brand: #2F7A8C;
  --brand-hover: #256575;
  --brand-soft: #DFF0F4;
  --brand-mid: #5BA3B4; /* tom claro da paleta p/ swatch no modo claro */
  --primary: var(--brand);
  --primary-hover: var(--brand-hover);
  --primary-soft: var(--brand-soft);
  --accent: var(--brand);
  --accent-soft: var(--brand-soft);
  --gold: #A88428;
  --danger: #B04048;
  --danger-soft: #F9E8E9;
  --warn: #A87218;
  --warn-soft: #FBF0DC;
  --ok: #2F8A5E;
  --ok-soft: #E2F5EB;
  --success: var(--ok);
  --on-accent: #fff;
  --panel-2: var(--surface-soft);

  /* Chat Calm Clinic */
  --bubble-in: #FFFFFF;
  --bubble-out: #E2F2EC;
  --thread-bg: linear-gradient(180deg, #F3F6F8 0%, #E9EEF1 100%);
  /* WhatsApp reais (independentes de --bubble-out / acento) */
  --wa-out: #d9fdd3;
  --wa-out-text: #111b21;
  --wa-out-meta: rgba(17, 27, 33, 0.55);
  --wa-out-border: color-mix(in srgb, #99d4a0 55%, transparent);
  --wa-in: #ffffff;
  --wa-in-text: #111b21;
  --wa-in-meta: rgba(17, 27, 33, 0.5);
  --wa-in-border: color-mix(in srgb, #c5c9cc 70%, transparent);
  --wa-audio: #53bdeb;
  --wa-ack-read: #53bdeb;

  /* Chrome */
  --header-h: 48px;
  --panel-head-h: 40px;
  --bottom-nav-h: 58px;
  --rail-w: 60px;
  --thread-rail-w: calc(0.75rem + 36px + 0.4rem);
  --list-w: 300px;
  --crm-w: 340px;

  /* Espaçamento (base 4) */
  --space-1: 0.25rem;
  --space-2: 0.375rem;
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.5rem;

  /* Tipografia Calm — pesos 400/500/600 */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-base: 0.875rem;
  --fs-lg: 0.9375rem;
  --fs-xl: 1rem;
  --lh-tight: 1.25;
  --lh-body: 1.45;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Controles */
  --control-h-sm: 28px;
  --control-h-md: 32px;
  --control-h-lg: 36px;
  --textarea-h: calc(var(--fs-md) * 1.4 * 2 + 0.7rem);

  /* Raios Calm Clinic */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --radius-bubble: 10px;

  --shadow-sm: 0 1px 3px rgba(26, 35, 41, 0.06);
  --shadow: 0 10px 32px rgba(26, 35, 41, 0.09);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font);

  --ack-read: #2F7A8C;
  --ack-read-dark: #8BC4D0;
  --pin-active: var(--brand);
  --aura-neon: #4EB0C2;
  --aura-neon-glow: #8FD8E4;

  /* Aliases legados */
  --surface-0: var(--surface);
  --surface-1: var(--surface-2);
  --text: var(--ink);
  --text-muted: var(--muted);
  --border-subtle: var(--line);
}

/* Escuro: 3 camadas invertidas — saturação um pouco maior p/ LCD */
html.dark {
  color-scheme: dark;
  --canvas: #0C1014;
  --bg: var(--canvas);
  --surface: #141A20;
  --surface-soft: #1A222A;
  --surface-muted: #232C35;
  --surface-2: var(--surface-muted);
  --ink: #EEF4F7;
  --ink-soft: #A3B8C2;
  --muted: var(--ink-soft);
  --line: #33424C;
  --line-strong: #465864;
  --brand: #8BC4D0;
  --brand-hover: #A4D4DE;
  --brand-soft: #1A3038;
  --brand-mid: #8BC4D0; /* no escuro o swatch ≈ brand */
  --primary: var(--brand);
  --primary-hover: var(--brand-hover);
  --primary-soft: var(--brand-soft);
  --accent: var(--brand);
  --accent-soft: var(--brand-soft);
  --gold: #E0C472;
  --danger: #E89AA0;
  --danger-soft: #3E2428;
  --warn: #E0BA72;
  --warn-soft: #362C16;
  --ok: #7FE8B8;
  --ok-soft: #1A3226;
  --success: var(--ok);
  --panel-2: var(--surface-soft);
  --bubble-in: #1A222A;
  --bubble-out: #1A3830;
  --thread-bg: linear-gradient(180deg, #11181E 0%, #0C1014 100%);
  --wa-out: #005c4b;
  --wa-out-text: #e9edef;
  --wa-out-meta: rgba(233, 237, 239, 0.65);
  --wa-out-border: color-mix(in srgb, #0a7a64 50%, transparent);
  --wa-in: #202c33;
  --wa-in-text: #e9edef;
  --wa-in-meta: rgba(233, 237, 239, 0.6);
  --wa-in-border: color-mix(in srgb, #3b4a54 70%, transparent);
  --wa-audio: #53bdeb;
  --wa-ack-read: #53bdeb;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 10px 32px rgba(0, 0, 0, 0.42);
  --ack-read: var(--ack-read-dark);
  --surface-0: var(--surface);
  --surface-1: var(--surface-2);
  --text: var(--ink);
  --text-muted: var(--muted);
  --border-subtle: var(--line);
}

/* ========== Temas de acento (7 matizes bem distintos, tom calmo/clínico) ==========
 * Paleta: verde-água · verde · azul · lilás · rosa · bordô · dourado
 * --brand-mid: tom mid p/ swatch no modo claro.
 * Aliases legados (mist/sky/slate/…) mapeiam via CSS ou normalizeAccent no JS.
 */

/* 1. Teal — verde-água (padrão) */
html[data-accent="teal"],
html:not([data-accent]) {
  --brand: #1F7F86;
  --brand-hover: #196A70;
  --brand-soft: #DCF3F4;
  --brand-mid: #4AADB4;
  --accent: #1F7F86;
  --accent-soft: #DCF3F4;
  --primary: #1F7F86;
  --primary-hover: #196A70;
  --primary-soft: #DCF3F4;
  --bubble-out: #E0F4F2;
  --ack-read: #1F7F86;
}
html.dark[data-accent="teal"],
html.dark:not([data-accent]) {
  --brand: #6DC8CE;
  --brand-hover: #8AD6DA;
  --brand-soft: #163034;
  --brand-mid: #6DC8CE;
  --accent: #6DC8CE;
  --accent-soft: #163034;
  --primary: #6DC8CE;
  --primary-hover: #8AD6DA;
  --primary-soft: #163034;
  --bubble-out: #1A3430;
  --ack-read: #6DC8CE;
}

/* 2. Sage — verde */
html[data-accent="sage"],
html[data-accent="green"] {
  --brand: #2F8A52;
  --brand-hover: #267344;
  --brand-soft: #E0F4E8;
  --brand-mid: #58B87E;
  --accent: #2F8A52;
  --accent-soft: #E0F4E8;
  --primary: #2F8A52;
  --primary-hover: #267344;
  --primary-soft: #E0F4E8;
  --bubble-out: #E0F2E6;
  --ack-read: #2F8A52;
}
html.dark[data-accent="sage"],
html.dark[data-accent="green"] {
  --brand: #72D49A;
  --brand-hover: #90E0B0;
  --brand-soft: #162E20;
  --brand-mid: #72D49A;
  --accent: #72D49A;
  --accent-soft: #162E20;
  --primary: #72D49A;
  --primary-hover: #90E0B0;
  --primary-soft: #162E20;
  --bubble-out: #1A3024;
  --ack-read: #72D49A;
}

/* 3. Navy — azul (matiz azul puro; legado mist/sky) */
html[data-accent="navy"],
html[data-accent="mist"],
html[data-accent="sky"] {
  --brand: #2F5A9A;
  --brand-hover: #264A80;
  --brand-soft: #E4ECF8;
  --brand-mid: #5A8AD0;
  --accent: #2F5A9A;
  --accent-soft: #E4ECF8;
  --primary: #2F5A9A;
  --primary-hover: #264A80;
  --primary-soft: #E4ECF8;
  --bubble-out: #E4ECF6;
  --ack-read: #2F5A9A;
}
html.dark[data-accent="navy"],
html.dark[data-accent="mist"],
html.dark[data-accent="sky"] {
  --brand: #7AABE8;
  --brand-hover: #96C0F0;
  --brand-soft: #182838;
  --brand-mid: #7AABE8;
  --accent: #7AABE8;
  --accent-soft: #182838;
  --primary: #7AABE8;
  --primary-hover: #96C0F0;
  --primary-soft: #182838;
  --bubble-out: #1A2A38;
  --ack-read: #7AABE8;
}

/* 4. Violet — lilás */
html[data-accent="violet"] {
  --brand: #6B4F9E;
  --brand-hover: #584084;
  --brand-soft: #F0EAF8;
  --brand-mid: #9A82C8;
  --accent: #6B4F9E;
  --accent-soft: #F0EAF8;
  --primary: #6B4F9E;
  --primary-hover: #584084;
  --primary-soft: #F0EAF8;
  --bubble-out: #EEEAF6;
  --ack-read: #6B4F9E;
}
html.dark[data-accent="violet"] {
  --brand: #B8A0E8;
  --brand-hover: #CCC0F0;
  --brand-soft: #2A2438;
  --brand-mid: #B8A0E8;
  --accent: #B8A0E8;
  --accent-soft: #2A2438;
  --primary: #B8A0E8;
  --primary-hover: #CCC0F0;
  --primary-soft: #2A2438;
  --bubble-out: #2C2438;
  --ack-read: #B8A0E8;
}

/* 5. Rose — rosa */
html[data-accent="rose"] {
  --brand: #B04E6E;
  --brand-hover: #94405A;
  --brand-soft: #F8E8EE;
  --brand-mid: #D47A96;
  --accent: #B04E6E;
  --accent-soft: #F8E8EE;
  --primary: #B04E6E;
  --primary-hover: #94405A;
  --primary-soft: #F8E8EE;
  --bubble-out: #F6EAEF;
  --ack-read: #B04E6E;
}
html.dark[data-accent="rose"] {
  --brand: #E8A0B4;
  --brand-hover: #F0B8C6;
  --brand-soft: #342028;
  --brand-mid: #E8A0B4;
  --accent: #E8A0B4;
  --accent-soft: #342028;
  --primary: #E8A0B4;
  --primary-hover: #F0B8C6;
  --primary-soft: #342028;
  --bubble-out: #342028;
  --ack-read: #E8A0B4;
}

/* 6. Wine — bordô (legado slate/gray/burgundy) */
html[data-accent="wine"],
html[data-accent="burgundy"],
html[data-accent="slate"],
html[data-accent="gray"] {
  --brand: #8A2E42;
  --brand-hover: #722536;
  --brand-soft: #F4E4E8;
  --brand-mid: #B8586C;
  --accent: #8A2E42;
  --accent-soft: #F4E4E8;
  --primary: #8A2E42;
  --primary-hover: #722536;
  --primary-soft: #F4E4E8;
  --bubble-out: #F2E6EA;
  --ack-read: #8A2E42;
}
html.dark[data-accent="wine"],
html.dark[data-accent="burgundy"],
html.dark[data-accent="slate"],
html.dark[data-accent="gray"] {
  --brand: #D07888;
  --brand-hover: #E094A0;
  --brand-soft: #301820;
  --brand-mid: #D07888;
  --accent: #D07888;
  --accent-soft: #301820;
  --primary: #D07888;
  --primary-hover: #E094A0;
  --primary-soft: #301820;
  --bubble-out: #301820;
  --ack-read: #D07888;
}

/* 7. Sand — dourado / âmbar (legado terracotta) */
html[data-accent="sand"],
html[data-accent="terracotta"] {
  --brand: #B07A28;
  --brand-hover: #946620;
  --brand-soft: #F8F0DC;
  --brand-mid: #D4A84A;
  --accent: #B07A28;
  --accent-soft: #F8F0DC;
  --primary: #B07A28;
  --primary-hover: #946620;
  --primary-soft: #F8F0DC;
  --bubble-out: #F4EEDC;
  --ack-read: #B07A28;
}
html.dark[data-accent="sand"],
html.dark[data-accent="terracotta"] {
  --brand: #E0BC6A;
  --brand-hover: #ECD08A;
  --brand-soft: #2E2614;
  --brand-mid: #E0BC6A;
  --accent: #E0BC6A;
  --accent-soft: #2E2614;
  --primary: #E0BC6A;
  --primary-hover: #ECD08A;
  --primary-soft: #2E2614;
  --bubble-out: #2E2614;
  --ack-read: #E0BC6A;
}

/*
 * Swatches do seletor — cores FIXAS por accent (não herdam o tema ativo).
 * Claro: mid da paleta. Escuro: brand do modo claro (tom mais escuro).
 */
.accent-swatch[data-accent="teal"] { --swatch: #4AADB4; }
.accent-swatch[data-accent="sage"],
.accent-swatch[data-accent="green"] { --swatch: #58B87E; }
.accent-swatch[data-accent="navy"],
.accent-swatch[data-accent="mist"],
.accent-swatch[data-accent="sky"] { --swatch: #5A8AD0; }
.accent-swatch[data-accent="violet"] { --swatch: #9A82C8; }
.accent-swatch[data-accent="rose"] { --swatch: #D47A96; }
.accent-swatch[data-accent="wine"],
.accent-swatch[data-accent="burgundy"],
.accent-swatch[data-accent="slate"],
.accent-swatch[data-accent="gray"] { --swatch: #B8586C; }
.accent-swatch[data-accent="sand"],
.accent-swatch[data-accent="terracotta"] { --swatch: #D4A84A; }

html.dark .accent-swatch[data-accent="teal"] { --swatch: #1F7F86; }
html.dark .accent-swatch[data-accent="sage"],
html.dark .accent-swatch[data-accent="green"] { --swatch: #2F8A52; }
html.dark .accent-swatch[data-accent="navy"],
html.dark .accent-swatch[data-accent="mist"],
html.dark .accent-swatch[data-accent="sky"] { --swatch: #2F5A9A; }
html.dark .accent-swatch[data-accent="violet"] { --swatch: #6B4F9E; }
html.dark .accent-swatch[data-accent="rose"] { --swatch: #B04E6E; }
html.dark .accent-swatch[data-accent="wine"],
html.dark .accent-swatch[data-accent="burgundy"],
html.dark .accent-swatch[data-accent="slate"],
html.dark .accent-swatch[data-accent="gray"] { --swatch: #8A2E42; }
html.dark .accent-swatch[data-accent="sand"],
html.dark .accent-swatch[data-accent="terracotta"] { --swatch: #B07A28; }