/* ═══════════════════════════════════════════════════════════
   SanBernarda — Design tokens (site 2026 → Perfex)
   Cores / raios / tipo. Carregar em qualquer tela.
   Estrutura de login vive em login.css (só auth).

   Escuro: :root · [data-theme="dark"] · html.cc-theme-dark · body.dark-theme
   Claro:  [data-theme="light"] · html.cc-theme-light
   (não usar body:not(.dark-theme) — no Perfex o body nasce sem classe)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Primitives (nunca invertem) ── */
  --dv-orange: #ff5c14;
  --dv-orange-hot: #ff7a38;
  --dv-orange-deep: #e84e0a;
  --dv-coral: #f29479;
  --dv-magenta: #da8bcb;
  --dv-lilac: #cc96e8;
  --dv-mauve: #a987c9;
  --dv-lavender: #c79cef;
  --dv-violet: #8b6cff;
  --dv-periwinkle: #b3affc;
  --dv-plum-950: #150122;
  --dv-plum-900: #1e0430;
  --dv-plum-800: #2a0c42;
  --dv-plum-700: #3b1e5c;
  --dv-plum-600: #55357e;
  --dv-cream-50: #fbf7f2;
  --dv-cream-100: #f4ede4;
  --dv-cream-200: #e9dfd3;
  --dv-white: #ffffff;
  --dv-ink: #16081f;
  --dv-orange-rgb: 255, 92, 20;
  --dv-lavender-rgb: 199, 156, 239;
  --dv-lilac-rgb: 204, 150, 232;
  --dv-plum-rgb: 30, 4, 48;
  --dv-cream-rgb: 251, 247, 242;

  --dv-gradient: linear-gradient(
    135deg,
    var(--dv-orange) 0%,
    var(--dv-coral) 30%,
    var(--dv-magenta) 55%,
    var(--dv-lilac) 100%
  );
  --dv-gradient-veil:
    radial-gradient(80% 90% at 78% 88%, rgba(var(--dv-orange-rgb), 0.22) 0%, transparent 58%),
    radial-gradient(90% 100% at 18% 12%, rgba(var(--dv-lilac-rgb), 0.18) 0%, transparent 60%);

  /* ── Radius 2026 (site radius-5.css) ── */
  --cc-r-pill: 9999px;
  --cc-r-2xl: 28px;
  --cc-r-xl: 24px;
  --cc-r-lg: 20px;
  --cc-r-md: 16px;
  --cc-r-sm: 10px;
  --cc-r-xs: 6px;
  --cc-r: var(--cc-r-lg);
  --cc-radius: var(--cc-r-lg);

  /* ── Chrome CRM (Huly density, not login 20–28px) ── */
  --cc-r-card: 10px;
  --cc-r-ctrl: 8px;
  --cc-overlay-blur: 12px;

  /* ── Rhythm CRM (8px) ── */
  --cc-space: 8px;
  --cc-space-2: 16px;
  --cc-space-3: 24px;
  --cc-ctrl-h: 36px;
  --cc-ctrl-h-sm: 28px;
  --cc-row-h: 40px;

  /* ── Spacing 4px ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;

  /* ── Type ── */
  --t-meta: 11px;
  --t-label: 12px;
  --t-body: 14px;
  --t-input: 16px;
  --t-title: 22px;
  --t-logo: 16px;
  --t-display: clamp(52px, 7vw, 76px);
  --font-display: "Tektur", sans-serif;
  --font-body: "DM Mono", "Courier New", monospace;
  --font-mono: "DM Mono", "Courier New", monospace;

  /* ── Layout (login) ── */
  --cc-pad: var(--s-8);
  --cc-form-w: 400px;
  --cc-control-h: 48px;
  --cc-track: 0.12em;

  /* ── Neobrutalismo ── */
  --nb-bw: 3px;
  --nb-bw-ctrl: 2.5px;
  --nb-bw-field: 2px;
  --nb-bw-chip: 1.5px;
  --nb-off: 6px;
  --nb-acc: var(--dv-orange);
}

/* ── TEMA ESCURO (padrão) ── */
:root,
[data-theme="dark"],
html.cc-theme-dark,
html.cc-force-dark,
body.dark-theme {
  color-scheme: dark;

  --cc-black: var(--dv-plum-950);
  --cc-navy: var(--dv-plum-900);
  --cc-charcoal: var(--dv-plum-900);
  --cc-surface: var(--dv-plum-800);
  --cc-input-bg: var(--dv-plum-800);

  --cc-border: var(--dv-plum-700);
  --cc-border-soft: #2c1044;
  --cc-border-light: #c4b5e0;

  --cc-orange: var(--dv-orange);
  --cc-orange-hover: var(--dv-orange-hot);
  --cc-orange-glow: #351226;

  --cc-white: var(--dv-white);
  --cc-gray: #af9fc4;
  --cc-gray-muted: #7a6690;
  --cc-cyan: var(--dv-lavender);

  --bg-base: var(--dv-plum-950);
  --bg-surface: var(--dv-plum-800);
  --bg-surface-alt: var(--dv-plum-900);
  --text-primary: var(--dv-white);
  --text-muted: #af9fc4;
  --text-secondary: #af9fc4;
  --border-color: var(--cc-border-soft);
  --border-strong: var(--cc-border);

  --nb-edge: rgba(255, 255, 255, 0.92);
  --nb-edge-soft: rgba(255, 255, 255, 0.55);
  --nb-ink: var(--dv-plum-900);
  --nb-shadow: 6px 6px 0 0 var(--nb-edge);
  --nb-shadow-acc: 9px 9px 0 0 var(--nb-acc);
  --nb-shadow-sm: 4px 4px 0 0 var(--nb-edge);

  --orange-brut-edge: var(--dv-plum-950);
  --orange-brut-chad: var(--dv-white);
  --orange-brut-glow:
    0 4px 18px rgba(var(--dv-orange-rgb), 0.45),
    0 0 34px rgba(var(--dv-orange-rgb), 0.28),
    0 0 72px rgba(var(--dv-orange-rgb), 0.14);

  /* Login surfaces (aliases) */
  --cc-bg-brand: var(--dv-plum-950);
  --cc-bg-form: var(--dv-plum-900);
  --cc-bg-login: var(--dv-plum-800);
  --cc-bg-panel: #24103a;
  --cc-split-shadow: -22px 0 40px rgba(0, 0, 0, 0.45);
  --cc-bg-input: var(--dv-plum-950);
  --cc-text: var(--dv-white);
  --cc-text-muted: #af9fc4;
  --cc-text-soft: #c9b8dc;
  --cc-accent: var(--dv-orange);
  --cc-accent-hot: var(--dv-orange-hot);
  --cc-cool: var(--dv-lavender);
  --cc-btn-bg: var(--dv-orange);
  --cc-btn-text: var(--dv-white);
  --cc-btn-hover: var(--dv-orange-hot);
  --cc-btn-shadow: #ffffff;
  --cc-edge: var(--nb-edge);
  --cc-select-bg: var(--dv-cream-50);
  --cc-select-text: var(--dv-ink);
  --cc-alert-bg: rgba(var(--dv-orange-rgb), 0.12);
  --cc-alert-border: rgba(var(--dv-orange-rgb), 0.4);
  --cc-focus: rgba(var(--dv-orange-rgb), 0.35);
  --cc-grid: rgba(255, 255, 255, 0.045);
  --cc-ring: rgba(255, 255, 255, 0.4);
  --cc-hud-line: rgba(255, 255, 255, 0.1);
  --cc-input-border: var(--dv-plum-700);
  --cc-input-hover: var(--dv-plum-600);
  --cc-brut-shadow: var(--nb-shadow);
  --cc-brut-shadow-acc: var(--nb-shadow-acc);
  --cc-cta-glow: var(--orange-brut-glow);
  --cc-veil:
    radial-gradient(80% 90% at 78% 88%, rgba(var(--dv-orange-rgb), 0.26) 0%, transparent 58%),
    radial-gradient(90% 100% at 18% 12%, rgba(var(--dv-lilac-rgb), 0.2) 0%, transparent 60%);

  /* ── CRM shell (admin + portal) ── */
  --cc-sidebar-bg: var(--dv-plum-900);
  --cc-sidebar-text: #c9b8dc;
  --cc-sidebar-hover: var(--dv-plum-800);
  --cc-sidebar-active-bg: var(--dv-plum-800);
  --cc-sidebar-active-text: var(--dv-white);
  --cc-header-bg: var(--dv-plum-900);
  --cc-header-text: var(--dv-white);
  --cc-content-bg: var(--dv-plum-950);
  --cc-panel-bg: var(--dv-plum-800);
  --cc-panel-border: #2c1044;
  --cc-panel-heading-bg: var(--dv-plum-900);
  --cc-modal-bg: var(--dv-plum-800);
  --cc-dropdown-bg: var(--dv-plum-800);
  --cc-table-bg: var(--dv-plum-800);
  --cc-table-head: var(--dv-plum-900);
  --cc-table-stripe: rgba(255, 255, 255, 0.035);
  --cc-table-hover: rgba(255, 92, 20, 0.1);
  --cc-input-text: var(--dv-white);
  --cc-link: var(--dv-orange);
  --cc-btn-default-bg: var(--dv-plum-700);
  --cc-btn-default-text: var(--dv-white);
  --cc-btn-default-border: var(--dv-plum-600);
  --cc-success: #84c529;
  --cc-warning: #ffb020;
  --cc-danger: #fc5c65;
  --cc-info: #b3affc;
  --cc-alert-success-bg: rgba(132, 197, 41, 0.14);
  --cc-alert-warning-bg: rgba(255, 176, 32, 0.14);
  --cc-alert-danger-bg: rgba(252, 92, 101, 0.14);
  --cc-alert-info-bg: rgba(179, 175, 252, 0.14);
  --cc-scrollbar-track: var(--dv-plum-950);
  --cc-scrollbar-thumb: var(--dv-plum-600);

  /* ── Chrome Huly (dark) ── */
  --cc-hairline: rgba(255, 255, 255, 0.08);
  --cc-overlay: rgba(42, 12, 66, 0.88);
  --cc-elev-1: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.22);
  --cc-elev-2: 0 8px 28px rgba(0, 0, 0, 0.45);
  --cc-meta: var(--dv-lavender);

  /* ── Charts / toast / stats ── */
  --cc-chart-text: #af9fc4;
  --cc-chart-grid: rgba(255, 255, 255, 0.08);
  --cc-chart-bar: var(--dv-orange);
  --cc-chart-bar-fill: rgba(255, 92, 20, 0.28);
  --cc-chart-bar-alt: var(--dv-lavender);
  --cc-chart-bar-alt-fill: rgba(199, 156, 239, 0.28);
  --cc-progress-track: rgba(255, 255, 255, 0.08);
  --cc-toast-bg: rgba(42, 12, 66, 0.94);
}

/* ── TEMA CLARO ── */
[data-theme="light"],
html.cc-theme-light,
html.cc-theme-light body {
  color-scheme: light;

  --cc-black: var(--dv-cream-50);
  --cc-navy: var(--dv-cream-100);
  --cc-charcoal: var(--dv-white);
  --cc-surface: var(--dv-white);
  --cc-input-bg: var(--dv-white);

  --cc-border: var(--dv-cream-200);
  --cc-border-soft: #efe7dc;
  --cc-border-light: var(--dv-plum-900);

  --cc-orange: var(--dv-orange);
  --cc-orange-hover: var(--dv-orange-deep);
  --cc-orange-glow: #f8decf;

  --cc-white: var(--dv-ink);
  --cc-gray: #5f4b74;
  --cc-gray-muted: #907fa4;
  --cc-cyan: var(--dv-violet);

  --bg-base: var(--dv-cream-50);
  --bg-surface: var(--dv-white);
  --bg-surface-alt: var(--dv-cream-100);
  --text-primary: var(--dv-ink);
  --text-muted: #5f4b74;
  --text-secondary: #5f4b74;
  --border-color: var(--cc-border-soft);
  --border-strong: var(--cc-border);

  --nb-edge: rgba(26, 11, 36, 0.9);
  --nb-edge-soft: rgba(26, 11, 36, 0.4);
  --nb-ink: var(--dv-plum-900);
  --nb-shadow: 6px 6px 0 0 var(--nb-edge);
  --nb-shadow-acc: 9px 9px 0 0 var(--nb-acc);
  --nb-shadow-sm: 4px 4px 0 0 var(--nb-edge);

  --orange-brut-edge: var(--dv-plum-900);
  --orange-brut-chad: var(--dv-cream-50);
  --orange-brut-glow:
    0 4px 18px rgba(var(--dv-orange-rgb), 0.25),
    0 0 34px rgba(var(--dv-lavender-rgb), 0.15);

  --cc-bg-brand: var(--dv-cream-50);
  --cc-bg-form: var(--dv-cream-100);
  --cc-bg-login: var(--dv-white);
  --cc-bg-panel: var(--dv-white);
  --cc-split-shadow: -18px 0 36px rgba(22, 8, 31, 0.14);
  --cc-bg-input: var(--dv-cream-50);
  --cc-text: var(--dv-ink);
  --cc-text-muted: #5f4b74;
  --cc-text-soft: #3d2a52;
  --cc-accent: var(--dv-orange);
  --cc-accent-hot: var(--dv-orange-deep);
  --cc-cool: var(--dv-violet);
  --cc-btn-bg: var(--dv-orange);
  --cc-btn-text: var(--dv-white);
  --cc-btn-hover: var(--dv-orange-deep);
  --cc-btn-shadow: var(--dv-plum-900);
  --cc-edge: var(--nb-edge);
  --cc-select-bg: var(--dv-white);
  --cc-select-text: var(--dv-ink);
  --cc-alert-bg: rgba(var(--dv-orange-rgb), 0.1);
  --cc-alert-border: rgba(var(--dv-orange-rgb), 0.35);
  --cc-focus: rgba(var(--dv-orange-rgb), 0.28);
  --cc-grid: rgba(22, 8, 31, 0.055);
  --cc-ring: rgba(22, 8, 31, 0.32);
  --cc-hud-line: rgba(22, 8, 31, 0.1);
  --cc-input-border: var(--dv-cream-200);
  --cc-input-hover: #d5c7b6;
  --cc-brut-shadow: var(--nb-shadow);
  --cc-brut-shadow-acc: var(--nb-shadow-acc);
  --cc-cta-glow: var(--orange-brut-glow);
  --cc-veil:
    radial-gradient(80% 90% at 78% 88%, rgba(var(--dv-orange-rgb), 0.14) 0%, transparent 58%),
    radial-gradient(90% 100% at 18% 12%, rgba(var(--dv-lilac-rgb), 0.18) 0%, transparent 60%);

  /* ── CRM shell (admin + portal) ── */
  --cc-sidebar-bg: var(--dv-white);
  --cc-sidebar-text: var(--dv-ink);
  --cc-sidebar-hover: rgba(22, 8, 31, 0.04);
  --cc-sidebar-active-bg: rgba(22, 8, 31, 0.05);
  --cc-sidebar-active-text: var(--dv-ink);
  --cc-header-bg: var(--dv-white);
  --cc-header-text: var(--dv-ink);
  --cc-content-bg: var(--dv-white);
  --cc-panel-bg: var(--dv-white);
  --cc-panel-border: var(--dv-cream-200);
  --cc-panel-heading-bg: var(--dv-white);
  --cc-modal-bg: var(--dv-white);
  --cc-dropdown-bg: var(--dv-white);
  --cc-table-bg: var(--dv-white);
  --cc-table-head: rgba(22, 8, 31, 0.03);
  --cc-table-stripe: rgba(22, 8, 31, 0.03);
  --cc-table-hover: rgba(255, 92, 20, 0.06);
  --cc-input-text: var(--dv-ink);
  --cc-link: var(--dv-orange-deep);
  --cc-btn-default-bg: var(--dv-white);
  --cc-btn-default-text: var(--dv-ink);
  --cc-btn-default-border: var(--dv-cream-200);
  --cc-success: #6aa31f;
  --cc-warning: #e69500;
  --cc-danger: #e03d4a;
  --cc-info: #6b5ce7;
  --cc-alert-success-bg: rgba(132, 197, 41, 0.12);
  --cc-alert-warning-bg: rgba(255, 176, 32, 0.12);
  --cc-alert-danger-bg: rgba(224, 61, 74, 0.1);
  --cc-alert-info-bg: rgba(107, 92, 231, 0.1);
  --cc-scrollbar-track: var(--dv-white);
  --cc-scrollbar-thumb: #d5c7b6;

  /* ── Chrome Huly (light) ── */
  --cc-hairline: rgba(22, 8, 31, 0.1);
  --cc-overlay: rgba(255, 255, 255, 0.92);
  --cc-elev-1: 0 1px 2px rgba(22, 8, 31, 0.06), 0 8px 24px rgba(22, 8, 31, 0.06);
  --cc-elev-2: 0 12px 32px rgba(22, 8, 31, 0.14);
  --cc-meta: var(--dv-mauve);

  /* ── Charts / toast / stats ── */
  --cc-chart-text: #5f4b74;
  --cc-chart-grid: rgba(22, 8, 31, 0.08);
  --cc-chart-bar: var(--dv-orange);
  --cc-chart-bar-fill: rgba(255, 92, 20, 0.18);
  --cc-chart-bar-alt: var(--dv-violet);
  --cc-chart-bar-alt-fill: rgba(139, 108, 255, 0.18);
  --cc-progress-track: rgba(22, 8, 31, 0.08);
  --cc-toast-bg: rgba(255, 255, 255, 0.96);
}

::selection {
  background: var(--dv-orange);
  color: var(--dv-white);
}