/**
 * CEPHOS REPORT IMAGING — Design Tokens & Sistema de Skins (cephos-variables.css)
 * Inclui as 10 Skins Oficiais do Ecossistema CEPHOS NEXUS + Suporte a Cor de Destaque Personalizada.
 */

:root,
[data-theme="default"],
[data-theme="dark"] {
  /* Tipografia */
  --cf-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --cf-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --cf-font-report: 'Arial', 'Helvetica Neue', sans-serif;

  /* 1. Tema Default — Azul Clínico Escuro */
  --cf-bg-app: #080d19;
  --cf-bg-surface: #0e1628;
  --cf-bg-elevated: #152038;
  --cf-bg-card: #111b2f;
  --cf-bg-input: #0b1322;
  --cf-bg-canvas: #060a13;
  --cf-bg-hover: rgba(56, 189, 248, 0.08);
  --cf-bg-active: rgba(14, 165, 233, 0.16);

  /* Bordas */
  --cf-border: var(--cf-border-default);
  --cf-border-subtle: rgba(148, 163, 184, 0.12);
  --cf-border-default: rgba(148, 163, 184, 0.22);
  --cf-border-focus: #38bdf8;
  --cf-border-active: #0ea5e9;

  /* Textos */
  --cf-text-primary: #f1f5f9;
  --cf-text-secondary: #94a3b8;
  --cf-text-muted: #64748b;
  --cf-text-accent: #38bdf8;

  /* Cores Semânticas e Destaques */
  --cf-primary: #0ea5e9;
  --cf-primary-hover: #0284c7;
  --cf-primary-glow: rgba(14, 165, 233, 0.28);
  --cf-logo-gradient: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  --cf-calc-banner-bg: linear-gradient(90deg, rgba(14, 165, 233, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%);
  --cf-scrollbar-hover: rgba(56, 189, 248, 0.5);

  --cf-success: #10b981;
  --cf-success-bg: rgba(16, 185, 129, 0.14);
  --cf-warning: #f59e0b;
  --cf-warning-bg: rgba(245, 158, 11, 0.14);
  --cf-danger: #f43f5e;
  --cf-danger-bg: rgba(244, 63, 94, 0.14);
  --cf-purple: #8b5cf6;
  --cf-purple-bg: rgba(139, 92, 246, 0.14);

  /* Papel A4 (Tom fosco anti-ofuscamento para conforto visual em sala de laudo; branco puro na impressão) */
  --cf-paper-bg: #dde3ea;
  --cf-paper-box-bg: #d2dae4;
  --cf-paper-text: #182232;
  --cf-paper-border: #b8c4d4;
  --cf-paper-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);

  /* Dimensões e Raios */
  --cf-header-h: 54px;
  --cf-sidebar-w: 272px;
  --cf-radius-xs: 5px;
  --cf-radius-sm: 8px;
  --cf-radius-md: 11px;
  --cf-radius-lg: 14px;
  --cf-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Tema Olive — Verde Sálvia & Pinho */
[data-theme="theme-olive"] {
  --cf-bg-app: #050806;
  --cf-bg-surface: #090e0b;
  --cf-bg-elevated: #111a14;
  --cf-bg-card: #0c140f;
  --cf-bg-input: #070b08;
  --cf-bg-canvas: #040604;
  --cf-bg-hover: rgba(110, 163, 137, 0.10);
  --cf-bg-active: rgba(110, 163, 137, 0.20);

  --cf-border-subtle: rgba(132, 155, 143, 0.14);
  --cf-border-default: rgba(132, 155, 143, 0.26);
  --cf-border-focus: #6ea389;
  --cf-border-active: #6ea389;

  --cf-text-primary: #ecfdf5;
  --cf-text-secondary: #849b8f;
  --cf-text-muted: #5c7468;
  --cf-text-accent: #a7f3d0;

  --cf-primary: #578d73;
  --cf-primary-hover: #475f56;
  --cf-primary-glow: rgba(110, 163, 137, 0.28);
  --cf-logo-gradient: linear-gradient(135deg, #6ea389 0%, #3d5a4d 100%);
  --cf-calc-banner-bg: linear-gradient(90deg, rgba(110, 163, 137, 0.14) 0%, rgba(71, 95, 86, 0.10) 100%);
  --cf-scrollbar-hover: rgba(110, 163, 137, 0.55);
}

/* 3. Tema Gray — Cinza Grafite */
[data-theme="theme-gray"] {
  --cf-bg-app: #060709;
  --cf-bg-surface: #0c0d10;
  --cf-bg-elevated: #16181d;
  --cf-bg-card: #111318;
  --cf-bg-input: #090a0d;
  --cf-bg-canvas: #040506;
  --cf-bg-hover: rgba(156, 163, 175, 0.09);
  --cf-bg-active: rgba(156, 163, 175, 0.18);

  --cf-border-subtle: rgba(156, 163, 175, 0.13);
  --cf-border-default: rgba(156, 163, 175, 0.24);
  --cf-border-focus: #9ca3af;
  --cf-border-active: #9ca3af;

  --cf-text-primary: #f3f4f6;
  --cf-text-secondary: #9ca3af;
  --cf-text-muted: #6b7280;
  --cf-text-accent: #e5e7eb;

  --cf-primary: #6b7280;
  --cf-primary-hover: #4b5563;
  --cf-primary-glow: rgba(156, 163, 175, 0.25);
  --cf-logo-gradient: linear-gradient(135deg, #9ca3af 0%, #4b5563 100%);
  --cf-calc-banner-bg: linear-gradient(90deg, rgba(107, 114, 128, 0.15) 0%, rgba(75, 85, 99, 0.10) 100%);
  --cf-scrollbar-hover: rgba(156, 163, 175, 0.5);
}

/* 4. Tema Navy Purple — Desaturated & Discrete Navy-Purple */
[data-theme="theme-purple"] {
  --cf-bg-app: #08070a;
  --cf-bg-surface: #0e0d12;
  --cf-bg-elevated: #171520;
  --cf-bg-card: #12101a;
  --cf-bg-input: #0a090f;
  --cf-bg-canvas: #050407;
  --cf-bg-hover: rgba(157, 142, 194, 0.10);
  --cf-bg-active: rgba(157, 142, 194, 0.20);

  --cf-border-subtle: rgba(157, 142, 194, 0.14);
  --cf-border-default: rgba(157, 142, 194, 0.26);
  --cf-border-focus: #9d8ec2;
  --cf-border-active: #9d8ec2;

  --cf-text-primary: #f5f3ff;
  --cf-text-secondary: #9d96b0;
  --cf-text-muted: #706982;
  --cf-text-accent: #ddd6fe;

  --cf-primary: #7e6ca8;
  --cf-primary-hover: #524763;
  --cf-primary-glow: rgba(157, 142, 194, 0.28);
  --cf-logo-gradient: linear-gradient(135deg, #9d8ec2 0%, #524763 100%);
  --cf-calc-banner-bg: linear-gradient(90deg, rgba(157, 142, 194, 0.15) 0%, rgba(82, 71, 99, 0.10) 100%);
  --cf-scrollbar-hover: rgba(157, 142, 194, 0.55);
}

/* 5. Tema Soft Gray / Claro Clínico */
[data-theme="theme-light"],
[data-theme="light"] {
  --cf-bg-app: #e2e8f0;
  --cf-bg-surface: #f1f5f9;
  --cf-bg-elevated: #ffffff;
  --cf-bg-card: #f8fafc;
  --cf-bg-input: #ffffff;
  --cf-bg-canvas: #cbd5e1;
  --cf-bg-hover: rgba(2, 132, 199, 0.08);
  --cf-bg-active: rgba(2, 132, 199, 0.15);

  --cf-border-subtle: #cbd5e1;
  --cf-border-default: #94a3b8;
  --cf-border-focus: #0284c7;
  --cf-border-active: #0284c7;

  --cf-text-primary: #0f172a;
  --cf-text-secondary: #334155;
  --cf-text-muted: #64748b;
  --cf-text-accent: #0369a1;

  --cf-primary: #0284c7;
  --cf-primary-hover: #0369a1;
  --cf-primary-glow: rgba(2, 132, 199, 0.22);
  --cf-logo-gradient: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%);
  --cf-calc-banner-bg: linear-gradient(90deg, rgba(2, 132, 199, 0.10) 0%, rgba(29, 78, 216, 0.06) 100%);
  --cf-scrollbar-hover: rgba(2, 132, 199, 0.5);
  --cf-paper-shadow: 0 8px 26px rgba(15, 23, 42, 0.16);
}

/* 6. Tema Gold — Carvão & Dourado */
[data-theme="theme-gold"] {
  --cf-bg-app: #141210;
  --cf-bg-surface: #1c1917;
  --cf-bg-elevated: #292524;
  --cf-bg-card: #211e1c;
  --cf-bg-input: #161412;
  --cf-bg-canvas: #0f0d0c;
  --cf-bg-hover: rgba(197, 160, 89, 0.10);
  --cf-bg-active: rgba(197, 160, 89, 0.20);

  --cf-border-subtle: rgba(197, 160, 89, 0.16);
  --cf-border-default: rgba(197, 160, 89, 0.28);
  --cf-border-focus: #c5a059;
  --cf-border-active: #c5a059;

  --cf-text-primary: #fdfaf6;
  --cf-text-secondary: #d6d3d1;
  --cf-text-muted: #968f89;
  --cf-text-accent: #fde68a;

  --cf-primary: #b58f46;
  --cf-primary-hover: #967d4a;
  --cf-primary-glow: rgba(197, 160, 89, 0.30);
  --cf-logo-gradient: linear-gradient(135deg, #c5a059 0%, #856832 100%);
  --cf-calc-banner-bg: linear-gradient(90deg, rgba(197, 160, 89, 0.15) 0%, rgba(150, 125, 74, 0.10) 100%);
  --cf-scrollbar-hover: rgba(197, 160, 89, 0.55);
}

/* 7. Tema Rock Vein — Premium Stone */
[data-theme="theme-rock-vein"] {
  --cf-bg-app: #0e0d0c;
  --cf-bg-surface: #141312;
  --cf-bg-elevated: #201e1c;
  --cf-bg-card: #191716;
  --cf-bg-input: #100f0e;
  --cf-bg-canvas: #090808;
  --cf-bg-hover: rgba(139, 90, 81, 0.12);
  --cf-bg-active: rgba(139, 90, 81, 0.22);

  --cf-border-subtle: rgba(179, 138, 88, 0.15);
  --cf-border-default: rgba(139, 90, 81, 0.30);
  --cf-border-focus: #b38a58;
  --cf-border-active: #8b5a51;

  --cf-text-primary: #eae6e1;
  --cf-text-secondary: #a8a099;
  --cf-text-muted: #78716c;
  --cf-text-accent: #e6ccb2;

  --cf-primary: #8b5a51;
  --cf-primary-hover: #663f38;
  --cf-primary-glow: rgba(139, 90, 81, 0.32);
  --cf-logo-gradient: linear-gradient(135deg, #b38a58 0%, #8b5a51 100%);
  --cf-calc-banner-bg: linear-gradient(90deg, rgba(139, 90, 81, 0.16) 0%, rgba(179, 138, 88, 0.10) 100%);
  --cf-scrollbar-hover: rgba(179, 138, 88, 0.55);
}

/* 8. Tema Vintage Olive — Oliva Vintage & Âmbar */
[data-theme="theme-vintage-olive"],
[data-theme="theme-eneas"] {
  --cf-bg-app: #0e0f0e;
  --cf-bg-surface: #181a18;
  --cf-bg-elevated: #222622;
  --cf-bg-card: #1c1f1c;
  --cf-bg-input: #121412;
  --cf-bg-canvas: #090a09;
  --cf-bg-hover: rgba(77, 124, 15, 0.14);
  --cf-bg-active: rgba(217, 119, 6, 0.20);

  --cf-border-subtle: rgba(140, 155, 136, 0.16);
  --cf-border-default: rgba(77, 124, 15, 0.32);
  --cf-border-focus: #d97706;
  --cf-border-active: #65a30d;

  --cf-text-primary: #fef0c7;
  --cf-text-secondary: #a7b8a3;
  --cf-text-muted: #758571;
  --cf-text-accent: #fbbf24;

  --cf-primary: #4d7c0f;
  --cf-primary-hover: #365314;
  --cf-primary-glow: rgba(77, 124, 15, 0.32);
  --cf-logo-gradient: linear-gradient(135deg, #65a30d 0%, #d97706 100%);
  --cf-calc-banner-bg: linear-gradient(90deg, rgba(77, 124, 15, 0.16) 0%, rgba(217, 119, 6, 0.12) 100%);
  --cf-scrollbar-hover: rgba(217, 119, 6, 0.55);
}

/* 9. Tema Deep OLED Absolute — Pure Focus (Perfect Black) */
[data-theme="theme-oled"] {
  --cf-bg-app: #000000;
  --cf-bg-surface: #050608;
  --cf-bg-elevated: #0e1015;
  --cf-bg-card: #080a0d;
  --cf-bg-input: #030405;
  --cf-bg-canvas: #000000;
  --cf-bg-hover: rgba(148, 163, 184, 0.10);
  --cf-bg-active: rgba(148, 163, 184, 0.18);

  --cf-border-subtle: #161920;
  --cf-border-default: #262b36;
  --cf-border-focus: #94a3b8;
  --cf-border-active: #64748b;

  --cf-text-primary: #f8fafc;
  --cf-text-secondary: #94a3b8;
  --cf-text-muted: #64748b;
  --cf-text-accent: #e2e8f0;

  --cf-primary: #475569;
  --cf-primary-hover: #334155;
  --cf-primary-glow: rgba(148, 163, 184, 0.25);
  --cf-logo-gradient: linear-gradient(135deg, #64748b 0%, #334155 100%);
  --cf-calc-banner-bg: linear-gradient(90deg, rgba(100, 116, 139, 0.15) 0%, rgba(51, 65, 85, 0.10) 100%);
  --cf-scrollbar-hover: rgba(148, 163, 184, 0.5);
}

/* 10. Tema Arctic Surgery — Glass Tech (Elegant Frost & Steel) */
[data-theme="theme-arctic"] {
  --cf-bg-app: #0e1216;
  --cf-bg-surface: #161c22;
  --cf-bg-elevated: #202932;
  --cf-bg-card: #1a2128;
  --cf-bg-input: #11161b;
  --cf-bg-canvas: #0a0d10;
  --cf-bg-hover: rgba(135, 176, 199, 0.10);
  --cf-bg-active: rgba(135, 176, 199, 0.20);

  --cf-border-subtle: rgba(135, 176, 199, 0.15);
  --cf-border-default: rgba(135, 176, 199, 0.28);
  --cf-border-focus: #87b0c7;
  --cf-border-active: #87b0c7;

  --cf-text-primary: #e2e8f0;
  --cf-text-secondary: #94a7b8;
  --cf-text-muted: #687b8c;
  --cf-text-accent: #bae6fd;

  --cf-primary: #56819a;
  --cf-primary-hover: #43687e;
  --cf-primary-glow: rgba(135, 176, 199, 0.28);
  --cf-logo-gradient: linear-gradient(135deg, #87b0c7 0%, #4b748c 100%);
  --cf-calc-banner-bg: linear-gradient(90deg, rgba(135, 176, 199, 0.15) 0%, rgba(86, 129, 154, 0.10) 100%);
  --cf-scrollbar-hover: rgba(135, 176, 199, 0.55);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--cf-font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  background-color: var(--cf-bg-app);
  color: var(--cf-text-primary);
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 220ms ease, color 220ms ease;
}

/* Scrollbars Finas e Elegantes */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cf-scrollbar-hover, rgba(56, 189, 248, 0.5));
}