/* ============================ Fundação visual do YKONY Intelligence ============================
   Identidade YKONY: tinta azul-marinho, verde-menta de ação, superfícies planas e linhas
   finas. Sem gradientes; sombra só em camadas flutuantes (menus, diálogos).
   Os nomes antigos de variável continuam valendo e apontam para estes tokens. */
:root {
  --font: "Inter Variable", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: var(--font);
  --font-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --leading: 1.55;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --icon-sm: 16px;
  --icon-line: 18px;
  --icon-lg: 20px;
  --icon-xl: 28px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --control-h: 38px;
  --control-h-sm: 32px;
  --page-max: 1040px;
  --page-wide: 1240px;

  --transition: 0.16s ease;
  --transition-slow: 0.24s ease;
  --ease-spring: ease;
  --sidebar-width: 264px;
  --sidebar-collapsed-width: 64px;
  --topbar-height: 56px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --z-sidebar: 100;
  --z-drawer-backdrop: 95;
  --z-topbar: 90;
  --z-modal: 200;
  --z-dropdown: 150;

  /* Cores da marca YKONY, iguais nos dois temas. */
  --brand-ink: #0b2433;
  --brand-navy: #071d2b;
  --brand-mint: #a3f0d6;
  --brand-cyan: #2bd6c3;
  --brand-blue: #83b7fb;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #ffffff;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f3f6f7;
  --bg-elevated: #ffffff;
  --bg-hover: #eef3f4;
  --bg-active: #e3ecee;
  --bg-glass: #ffffff;
  --bg-input: #ffffff;
  --bg-card: #ffffff;
  --bg-sidebar: #f6f8f9;
  --border-primary: #e3e9ec;
  --border-secondary: #d2dce1;
  --border-hover: #b3c3ca;
  --text-primary: #0b2433;
  --text-secondary: #4a5f6b;
  --text-tertiary: #667a85;
  --text-muted: #8a9ba4;
  --accent: #0b2433;
  --accent-hover: #1d4659;
  --accent-text: #ffffff;
  --accent-light: #e7f5f0;
  --accent-soft: #e7f5f0;
  --accent-soft-text: #0f5e4b;
  --accent-glow: transparent;
  --selected-bg: #e7f5f0;
  --selected-text: #0b2433;
  --selected-mark: #1b9e7e;
  --success: #11875f;
  --success-light: #e5f4ee;
  --warning: #a35a06;
  --warning-light: #fbf1e3;
  --danger: #b4232f;
  --danger-light: #fbe9ea;
  --info: #1f6fb5;
  --info-light: #e8f1fa;
  --shadow-sm: 0 1px 2px rgba(11, 36, 51, 0.06);
  --shadow-md: 0 6px 18px rgba(11, 36, 51, 0.1);
  --shadow-lg: 0 12px 32px rgba(11, 36, 51, 0.14);
  --shadow-xl: 0 16px 40px rgba(11, 36, 51, 0.16);
  --shadow-glow: none;
  --scrollbar-track: transparent;
  --scrollbar-thumb: #cdd7dc;
  --user-bubble: #eef3f4;
  --user-text: #0b2433;
  --assistant-bubble: transparent;
  --profile-personal: #0b2433;
  --profile-corporate: #0f766e;
  --ambient-1: transparent;
  --ambient-2: transparent;
  --ring: rgba(21, 125, 206, 0.45);
  --overlay: rgba(7, 29, 43, 0.4);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #0a1b24;
  --bg-secondary: #0e222d;
  --bg-tertiary: #122935;
  --bg-elevated: #112733;
  --bg-hover: #16303d;
  --bg-active: #1b3947;
  --bg-glass: #0e222d;
  --bg-input: #0c1f29;
  --bg-card: #0e222d;
  --bg-sidebar: #081720;
  --border-primary: #1c3542;
  --border-secondary: #264554;
  --border-hover: #3a5d6e;
  --text-primary: #e8f0f3;
  --text-secondary: #a8bcc6;
  --text-tertiary: #8198a4;
  --text-muted: #5f7885;
  --accent: #a3f0d6;
  --accent-hover: #c1ffe9;
  --accent-text: #06231b;
  --accent-light: rgba(163, 240, 214, 0.12);
  --accent-soft: rgba(163, 240, 214, 0.12);
  --accent-soft-text: #a3f0d6;
  --accent-glow: transparent;
  --selected-bg: rgba(163, 240, 214, 0.1);
  --selected-text: #e8f0f3;
  --selected-mark: #a3f0d6;
  --success: #4cc79a;
  --success-light: rgba(76, 199, 154, 0.14);
  --warning: #e7a54b;
  --warning-light: rgba(231, 165, 75, 0.14);
  --danger: #f08a8f;
  --danger-light: rgba(240, 138, 143, 0.14);
  --info: #7fb6ec;
  --info-light: rgba(127, 182, 236, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.5);
  --shadow-glow: none;
  --scrollbar-track: transparent;
  --scrollbar-thumb: #2a4756;
  --user-bubble: #16303d;
  --user-text: #e8f0f3;
  --assistant-bubble: transparent;
  --profile-personal: #a3f0d6;
  --profile-corporate: #7fd8c9;
  --ambient-1: transparent;
  --ambient-2: transparent;
  --ring: rgba(127, 182, 236, 0.6);
  --overlay: rgba(2, 10, 15, 0.6);
}

/* ============================ Formulários e botões (base canônica) ============================
   Uma definição por papel. Classes antigas (primary, secondary, soft-button, outline, danger,
   icon-line-btn) são nomes da mesma definição, não regras concorrentes. Botão sem classe é
   secundário; ação principal é sempre declarada. */
input,
select,
textarea {
  width: 100%;
  min-height: var(--control-h);
  background: var(--bg-input);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 7px 12px;
  font-size: var(--text-md);
  font-family: inherit;
  line-height: 1.4;
}
textarea {
  min-height: 88px;
  resize: vertical;
  line-height: var(--leading);
}
select {
  cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 16px;
  accent-color: var(--selected-mark);
  cursor: pointer;
}
input[type="range"] {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--selected-mark);
}
select option,
select optgroup {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px var(--ring);
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

button:not([class]),
.btn,
.primary,
.secondary,
button.danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-h);
  padding: 0 14px;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--text-md);
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
button:not([class]):hover:not(:disabled),
.btn:hover:not(:disabled),
.secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}
.btn-primary,
.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.btn-primary:hover:not(:disabled),
.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: transparent;
  color: var(--text-primary);
}
button.danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger);
}
button.danger:hover:not(:disabled) {
  background: var(--danger-light);
  border-color: var(--danger);
}
.btn-sm {
  min-height: var(--control-h-sm);
  padding: 0 10px;
  font-size: var(--text-sm);
}
.btn svg,
.primary svg,
.secondary svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.icon-btn,
.icon-line-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  border-radius: var(--radius);
  color: var(--text-secondary);
  background: transparent;
}
.icon-btn:hover:not(:disabled),
.icon-line-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.icon-btn svg,
.icon-line-btn svg {
  width: var(--icon-line);
  height: var(--icon-line);
  stroke: currentColor;
  flex-shrink: 0;
}