/* ═══════════════════════════════════════════════════════════════
   CondoFlow — Design System
   Cores oficiais extraídas da logo: NAVY #1B3A6B + ORANGE #F07722.
   Nenhuma outra paleta é permitida no sistema.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --cf-navy:            #1B3A6B;
  --cf-navy-dark:       #122748;
  --cf-navy-medium:     #234C8A;
  --cf-navy-light:      #2E63AE;
  --cf-navy-surface:    #1E4177;
  --cf-navy-lite:       #EBF0F8;

  --cf-orange:          #F07722;
  --cf-orange-dark:     #C45E0E;
  --cf-orange-medium:   #E8691A;
  --cf-orange-light:    #F59144;
  --cf-orange-lite:     #FEF0E6;

  /* ── Neutros ── */
  --cf-white:           #FFFFFF;
  --cf-bg:              #F2F4F8;
  --cf-surface:         #FFFFFF;
  --cf-surface-2:       #F8FAFC;
  --cf-border:          #E2E8F0;
  --cf-border-dark:     #CBD5E0;

  /* ── Texto ── */
  --cf-text:            #1A202C;
  --cf-text-secondary:  #4A5568;
  --cf-text-muted:      #718096;
  --cf-text-inverse:    #FFFFFF;

  /* ── Status ── */
  --cf-success:         #2D9D6E;
  --cf-success-lite:    #E6F7F1;
  --cf-warning:         #F07722;   /* = orange */
  --cf-warning-lite:    #FEF0E6;
  --cf-danger:          #E53E3E;
  --cf-danger-lite:     #FEE2E2;
  --cf-info:            #3182CE;
  --cf-info-lite:       #EBF4FF;

  /* ── Sidebar (DARK NAVY — conforme papelaria) ── */
  --cf-sidebar-bg:          #1B3A6B;    /* navy principal */
  --cf-sidebar-bg-hover:    #1E4177;    /* navy-surface */
  --cf-sidebar-bg-active:   #F07722;    /* orange — item ativo */
  --cf-sidebar-icon:        rgba(255,255,255,0.65);
  --cf-sidebar-icon-active: #FFFFFF;
  --cf-sidebar-text:        rgba(255,255,255,0.80);
  --cf-sidebar-text-active: #FFFFFF;
  --cf-sidebar-border:      rgba(255,255,255,0.08);
  --cf-sidebar-width:       68px;
  --cf-sidebar-expanded:    248px;
  --cf-sidebar-logo-bg:     rgba(255,255,255,0.10);

  /* ── Topbar ── */
  --cf-topbar-bg:       #FFFFFF;
  --cf-topbar-border:   #E2E8F0;
  --cf-topbar-height:   62px;

  /* ── Botões ── */
  --cf-btn-primary-bg:    #F07722;
  --cf-btn-primary-hover: #E8691A;
  --cf-btn-primary-text:  #FFFFFF;
  --cf-btn-secondary-bg:  #1B3A6B;
  --cf-btn-secondary-hover: #122748;
  --cf-btn-secondary-text: #FFFFFF;

  /* ── Sombras ── */
  --cf-shadow-xs:   0 1px 2px rgba(27,58,107,.06);
  --cf-shadow-sm:   0 1px 6px rgba(27,58,107,.10);
  --cf-shadow-md:   0 4px 16px rgba(27,58,107,.12);
  --cf-shadow-lg:   0 8px 30px rgba(27,58,107,.15);
  --cf-shadow-xl:   0 20px 50px rgba(27,58,107,.18);
  --cf-shadow-card: 0 2px 8px rgba(27,58,107,.08);
  --cf-shadow-navy: 0 4px 20px rgba(27,58,107,.30);
  --cf-shadow-orange: 0 4px 20px rgba(240,119,34,.35);

  /* ── Raios ── */
  --cf-radius-xs:   4px;
  --cf-radius-sm:   6px;
  --cf-radius-md:   10px;
  --cf-radius-lg:   14px;
  --cf-radius-xl:   20px;
  --cf-radius-full: 9999px;

  /* ── Tipografia ── */
  --cf-font:         'Inter', system-ui, -apple-system, sans-serif;
  --cf-font-display: 'Montserrat', 'Plus Jakarta Sans', var(--cf-font);
  --cf-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Transições ── */
  --cf-t-fast: 150ms ease;
  --cf-t:      250ms ease;
  --cf-t-slow: 400ms ease;

  /* ── Z-index ── */
  --cf-z-sidebar:  100;
  --cf-z-topbar:   200;
  --cf-z-tooltip:  250;
  --cf-z-dropdown: 300;
  --cf-z-modal:    400;
  --cf-z-toast:    500;
}

/* Dark Mode — mantém identidade navy+orange */
[data-theme="dark"] {
  --cf-bg:          #0D1B2E;
  --cf-surface:     #162033;
  --cf-surface-2:   #1C2A42;
  --cf-border:      #243552;
  --cf-border-dark: #2E4268;
  --cf-text:        #E2E8F0;
  --cf-text-secondary: #A0AEC0;
  --cf-text-muted:  #718096;
  --cf-topbar-bg:   #162033;
  --cf-topbar-border: #243552;
  --cf-shadow-card: 0 2px 8px rgba(0,0,0,.4);
  /* Sidebar continua navy — fica ainda mais rico no dark */
  --cf-sidebar-bg:  #0F2347;
  /* Superfícies suaves precisam ganhar contraste no escuro */
  --cf-navy-lite:   #1B2C47;
  --cf-orange-lite: #3A2415;
  --cf-success-lite: #14332A;
  --cf-danger-lite: #3A1C1C;
  --cf-info-lite:   #16283F;
}

/* ── Tipografia base ─────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cf-font-display);
  color: var(--cf-text);
  font-weight: 700;
  line-height: 1.25;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
h5, h6 { font-size: 0.9rem; }

a { color: var(--cf-navy); text-decoration: none; }
a:hover { color: var(--cf-orange); }

small { font-size: 0.8rem; }
strong, b { font-weight: 700; }
code, kbd, pre { font-family: var(--cf-font-mono); font-size: 0.85em; }

/* ── Utilitários ─────────────────────────────────────────────── */

.cf-text-navy    { color: var(--cf-navy) !important; }
.cf-text-orange  { color: var(--cf-orange) !important; }
.cf-text-success { color: var(--cf-success) !important; }
.cf-text-danger  { color: var(--cf-danger) !important; }
.cf-text-muted   { color: var(--cf-text-muted) !important; }
.cf-text-secondary { color: var(--cf-text-secondary) !important; }
.cf-text-center  { text-align: center; }
.cf-text-right   { text-align: right; }
.cf-text-nowrap  { white-space: nowrap; }
.cf-text-mono    { font-family: var(--cf-font-mono); }
.cf-text-sm      { font-size: 0.82rem; }
.cf-text-xs      { font-size: 0.72rem; }
.cf-text-lg      { font-size: 1.05rem; }
.cf-font-display { font-family: var(--cf-font-display); }
.cf-fw-600 { font-weight: 600; }
.cf-fw-700 { font-weight: 700; }
.cf-fw-800 { font-weight: 800; }

.cf-flex     { display: flex; }
.cf-flex-col { display: flex; flex-direction: column; }
.cf-items-center  { align-items: center; }
.cf-items-start   { align-items: flex-start; }
.cf-items-end     { align-items: flex-end; }
.cf-justify-between { justify-content: space-between; }
.cf-justify-center  { justify-content: center; }
.cf-justify-end     { justify-content: flex-end; }
.cf-flex-wrap { flex-wrap: wrap; }
.cf-flex-1    { flex: 1; }
.cf-gap-2  { gap: 2px; }
.cf-gap-4  { gap: 4px; }
.cf-gap-6  { gap: 6px; }
.cf-gap-8  { gap: 8px; }
.cf-gap-12 { gap: 12px; }
.cf-gap-16 { gap: 16px; }
.cf-gap-20 { gap: 20px; }
.cf-gap-24 { gap: 24px; }

.cf-grid    { display: grid; }
.cf-grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cf-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cf-grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cf-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.cf-grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }

.cf-mt-0  { margin-top: 0; }
.cf-mt-4  { margin-top: 4px; }
.cf-mt-8  { margin-top: 8px; }
.cf-mt-12 { margin-top: 12px; }
.cf-mt-16 { margin-top: 16px; }
.cf-mt-24 { margin-top: 24px; }
.cf-mb-0  { margin-bottom: 0; }
.cf-mb-4  { margin-bottom: 4px; }
.cf-mb-8  { margin-bottom: 8px; }
.cf-mb-12 { margin-bottom: 12px; }
.cf-mb-16 { margin-bottom: 16px; }
.cf-mb-24 { margin-bottom: 24px; }

.cf-w-full  { width: 100%; }
.cf-hidden  { display: none !important; }
.cf-relative { position: relative; }
.cf-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-scroll-x { overflow-x: auto; }

[x-cloak] { display: none !important; }

/* Barra de rolagem discreta na identidade navy */
* { scrollbar-width: thin; scrollbar-color: var(--cf-border-dark) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--cf-border-dark); border-radius: var(--cf-radius-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--cf-navy-light); }

@media print {
  .cf-sidebar, .cf-topbar, .cf-ai-fab, .cf-no-print { display: none !important; }
  .cf-main { margin: 0 !important; padding: 0 !important; }
  body { background: #FFFFFF; }
}