/* =============================================================
   PropCITZ Design System — Tokens
   Fonte única de verdade para cores, tipografia e espaçamento.
   Importe ANTES de qualquer outro CSS customizado.
   ============================================================= */

:root {

  /* ── Navegação ──────────────────────────────────────────── */
  --color-nav-bg:               #0F1D3A;
  --color-nav-active-indicator: #3B82F6;

  /* ── Cor primária ───────────────────────────────────────── */
  --color-primary:              #1B4FD8;
  --color-primary-hover:        #1740B0;
  --color-primary-cta:          #2563EB;
  --color-primary-cta-hover:    #1d4ed8;

  /* ── Superfície e fundo ─────────────────────────────────── */
  --color-page-bg:              #F0F2F7;
  --color-surface:              #FFFFFF;
  --color-surface-muted:        #F8FAFC;

  /* ── Bordas ─────────────────────────────────────────────── */
  --color-border:               #E2E8F0;
  --color-border-strong:        #CBD5E1;

  /* ── Texto ──────────────────────────────────────────────── */
  --color-text-primary:         #0F1D3A;
  --color-text-secondary:       #64748B;
  --color-text-muted:           #94A3B8;

  /* ── Status semânticos ──────────────────────────────────── */
  --color-success-bg:           #DCFCE7;
  --color-success-text:         #166534;
  --color-warning-bg:           #FEF9C3;
  --color-warning-text:         #854D0E;
  --color-info-bg:              #DBEAFE;
  --color-info-text:            #1E40AF;
  --color-neutral-bg:           #F1F5F9;
  --color-neutral-text:         #475569;

  /* ── Tipografia ─────────────────────────────────────────── */
  --font-family:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-size-xs:   10px;
  --font-size-sm:   11px;
  --font-size-base: 12px;
  --font-size-md:   13px;
  --font-size-lg:   16px;
  --font-size-xl:   17px;   /* mobile; sobrescrito no desktop abaixo */

  /* ── Forma e bordas ─────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    10px;
  --radius-full:  9999px;
  --border-width: 0.5px;

  /* ── Sombras ────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(15,29,58,0.08), 0 1px 2px rgba(15,29,58,0.04);
  --shadow-md:  0 4px 12px rgba(15,29,58,0.10), 0 2px 4px rgba(15,29,58,0.05);
  --shadow-lg:  0 10px 28px rgba(15,29,58,0.12), 0 4px 8px rgba(15,29,58,0.06);
}

/* desktop: font-size-xl maior */
@media (min-width: 768px) {
  :root {
    --font-size-xl: 20px;
  }
}