:root {
  /* Movimento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-med: 260ms;

  /* Marca — violeta suave e elegante */
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-light: #f1f0ff;
  --primary-muted: rgba(99, 102, 241, 0.1);
  --primary-ring: rgba(99, 102, 241, 0.2);
  --accent-rose: #fb7185;
  --accent-sky: #38bdf8;

  /* Superfícies — tema claro: base branca (telas); sidebar usa cor fixa em layout.css */
  --bg-app: #ffffff;
  --bg-sidebar: #05080e;
  --bg-sidebar-accent: rgba(255, 255, 255, 0.045);
  --sidebar-rail-width: 72px;
  --bg-card: #ffffff;
  --bg-muted: #f4f6fb;
  --bg-hover: #eef0f7;
  --bg-input: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-elevated: rgba(255, 255, 255, 0.96);

  /* Texto */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-sidebar: #9ca8bc;
  --text-sidebar-active: #fafbfc;
  --text-on-primary: #ffffff;

  /* Bordas */
  --border: #e2e8f0;
  --border-subtle: #eef1f8;
  --border-strong: #cbd5e1;
  --border-focus: #6366f1;

  /* Status tickets */
  --status-open: #d97706;
  --status-open-bg: #fffbeb;
  --status-progress: #2563eb;
  --status-progress-bg: #eff6ff;
  --status-paused: #7c3aed;
  --status-paused-bg: #f5f3ff;
  --status-finished: #059669;
  --status-finished-bg: #ecfdf5;

  /* Prioridade */
  --priority-low: #64748b;
  --priority-normal: #2563eb;
  --priority-high: #d97706;
  --priority-urgent: #dc2626;

  /* SLA */
  --sla-ok: #059669;
  --sla-warning: #d97706;
  --sla-breach: #dc2626;

  /* Sombras — mais leves e em camadas */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.035);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.1), 0 8px 16px rgba(15, 23, 42, 0.05);
  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.06), 0 12px 40px rgba(99, 102, 241, 0.08);
  --header-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 4px 20px rgba(15, 23, 42, 0.04);
  --shadow: var(--shadow-md);

  /* Layout */
  --sidebar-width: 280px;
  /* Elementos `position:fixed` no body: alinhar à coluna à direita da sidebar (desktop). Mobile = drawer → 0. */
  --maildesk-fixed-left-offset: 280px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --content-max: 1240px;
  --header-height: 56px;

  /* Escala 8px — alinhamento consistente */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --page-gutter: clamp(16px, 3.5vw, 28px);
  --page-pad-y: var(--sp-5);
  --page-pad-bottom: var(--sp-8);

  /* Tipografia */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --tracking-tight: -0.025em;
  --tracking-overline: 0.08em;

  /* Compatibilidade (--color-*) */
  --color-bg: var(--bg-app);
  --color-surface: var(--bg-card);
  --color-border: var(--border);
  --color-text: var(--text-primary);
  --color-muted: var(--text-muted);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-danger: #dc2626;
  --color-warn: var(--sla-warning);
  --color-ok: var(--sla-ok);

  /* Diálogos / modais */
  --dialog-pad-x: clamp(18px, 4vw, 26px);
  --dialog-pad-y: 20px;
  --dialog-header-pad-y: 14px;
  --form-stack-gap: 14px;
  --form-row-gap: 12px;
}

@media (max-width: 768px) {
  :root {
    --maildesk-fixed-left-offset: 0px;
  }
}

@media (min-width: 769px) {
  body:has(#sidebar.tfs-collapsed:not(.is-expanded)) {
    --maildesk-fixed-left-offset: var(--sidebar-rail-width);
  }
}

body.dark,
body.theme-dark {
  --bg-app: #0a0b10;
  --bg-card: #11131b;
  --bg-muted: #151821;
  --bg-hover: #1a1e2a;
  --bg-input: #11131b;
  --bg-subtle: #151821;
  --bg-elevated: rgba(20, 22, 32, 0.92);

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #718096;
  --border: #262d3d;
  --border-subtle: #1a1f2c;
  --border-strong: #374151;

  --primary-light: rgba(129, 140, 248, 0.14);
  --primary-muted: rgba(99, 102, 241, 0.16);
  --primary-ring: rgba(165, 180, 252, 0.32);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.58);
  --header-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 28px rgba(0, 0, 0, 0.4);

  --status-open-bg: rgba(217, 119, 6, 0.15);
  --status-progress-bg: rgba(37, 99, 235, 0.15);
  --status-paused-bg: rgba(124, 58, 237, 0.15);
  --status-finished-bg: rgba(5, 150, 105, 0.15);

  --color-bg: var(--bg-app);
  --color-surface: var(--bg-card);
  --color-border: var(--border);
  --color-text: var(--text-primary);
  --color-muted: var(--text-muted);
}

body.theme-system {
}

/**
 * Sistema (antes do JS): só segue o SO se ainda tiver .theme-system e não for claro explícito.
 * Com .theme-light (toggle claro), não aplicar — tokens vêm de :root ou de body.theme-light abaixo.
 */
@media (prefers-color-scheme: dark) {
  body.theme-system:not(.theme-light) {
    --bg-app: #0a0b10;
    --bg-card: #11131b;
    --bg-muted: #151821;
    --bg-hover: #1a1e2a;
    --bg-input: #11131b;
    --bg-subtle: #151821;
    --bg-elevated: rgba(20, 22, 32, 0.92);

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #718096;
    --border: #262d3d;
    --border-subtle: #1a1f2c;
    --border-strong: #374151;

    --primary-light: rgba(129, 140, 248, 0.14);
    --primary-muted: rgba(99, 102, 241, 0.16);
    --primary-ring: rgba(165, 180, 252, 0.32);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.48);
    --header-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 28px rgba(0, 0, 0, 0.4);

    --status-open-bg: rgba(217, 119, 6, 0.15);
    --status-progress-bg: rgba(37, 99, 235, 0.15);
    --status-paused-bg: rgba(124, 58, 237, 0.15);
    --status-finished-bg: rgba(5, 150, 105, 0.15);

    --color-bg: var(--bg-app);
    --color-surface: var(--bg-card);
    --color-border: var(--border);
    --color-text: var(--text-primary);
    --color-muted: var(--text-muted);
  }
}

/* Toggle “claro”: força tokens de superfície claros mesmo quando o SO está em escuro ou há FOUC com .theme-system */
body.theme-light:not(.dark) {
  --bg-app: #ffffff;
  --bg-card: #ffffff;
  --bg-muted: #f4f6fb;
  --bg-hover: #eef0f7;
  --bg-input: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-elevated: rgba(255, 255, 255, 0.96);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-subtle: #eef1f8;
  --border-strong: #cbd5e1;

  --primary-light: #f1f0ff;
  --primary-muted: rgba(99, 102, 241, 0.1);
  --primary-ring: rgba(99, 102, 241, 0.2);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.035);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.1), 0 8px 16px rgba(15, 23, 42, 0.05);
  --header-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 4px 20px rgba(15, 23, 42, 0.04);

  --status-open-bg: #fffbeb;
  --status-progress-bg: #eff6ff;
  --status-paused-bg: #f5f3ff;
  --status-finished-bg: #ecfdf5;

  --color-bg: var(--bg-app);
  --color-surface: var(--bg-card);
  --color-border: var(--border);
  --color-text: var(--text-primary);
  --color-muted: var(--text-muted);
}