/* ============================================================
   ARCA — Design Tokens
   ------------------------------------------------------------
   Fonte única de verdade da identidade visual (Brand Book v1.0).
   Paleta: Midnight Navy / Slate Blue / Steel Gray / Soft White
           + Champagne Gold como destaque premium (uso contido).
   Grid de 8px, bordas 18/14px, sombras suaves, motion 250ms.
   Tudo em CSS Custom Properties para suportar modo claro/escuro
   com troca automática e futura tematização.
   ============================================================ */

:root {
  /* ---------- Cores da marca (imutáveis entre temas) ---------- */
  --brand-navy:   #0F172A;   /* Cor primária — segurança, institucional  */
  --brand-slate:  #1E293B;   /* Cor secundária                            */
  --brand-steel:  #475569;   /* Cor terciária                             */
  --brand-soft:   #F8FAFC;   /* Cor de apoio                              */
  --brand-gold:       #C8A75B; /* Champagne Gold — apenas selos/badges/detalhes */
  --brand-gold-soft:  #C8A75B22;
  --brand-gold-strong:#B08F43;

  /* ---------- Cores funcionais ---------- */
  --positive: #22C55E;
  --negative: #DC2626;
  --warning:  #F97316;
  --info:     #2563EB;
  --positive-soft: #22C55E1A;
  --negative-soft: #DC26261A;
  --warning-soft:  #F973161A;
  --info-soft:     #2563EB14;

  /* ---------- Tipografia ---------- */
  --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif; /* títulos/logo */
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;   /* interface    */
  --font-mono:    'IBM Plex Mono', 'Consolas', monospace;       /* números      */

  --fs-xs: 0.72rem;
  --fs-sm: 0.815rem;
  --fs-md: 0.9rem;
  --fs-lg: 1.05rem;
  --fs-xl: 1.3rem;
  --fs-2xl: 1.65rem;
  --fs-3xl: 2.1rem;

  /* ---------- Grid 8px — jamais valores aleatórios ---------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;

  /* ---------- Bordas (Brand Book) ---------- */
  --radius-card: 18px;
  --radius-btn: 14px;
  --radius-input: 14px;
  --radius-sm: 10px;
  --radius-full: 999px;

  /* ---------- Motion: lento, ease-out, nada exagerado ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 250ms;

  /* ---------- Layout ---------- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
  --content-max: 1440px;
}

/* ============================================================
   TEMA CLARO (padrão)
   ============================================================ */
:root, [data-theme="light"] {
  --bg:            #FFFFFF;
  --bg-app:        #F8FAFC;   /* fundo geral do app (Soft White)          */
  --surface:       #FFFFFF;   /* cards                                     */
  --surface-2:     #F1F5F9;   /* blocos internos, hover                    */
  --surface-3:     #E2E8F0;   /* bordas fortes, divisores marcados         */
  --border:        #E2E8F0;
  --border-soft:   #EEF2F7;

  --text:          #0F172A;
  --text-2:        #475569;
  --text-3:        #94A3B8;
  --text-invert:   #F8FAFC;

  --sidebar-bg:    #0F172A;   /* sidebar sempre navy — assinatura da marca */
  --sidebar-text:  #CBD5E1;
  --sidebar-hover: #1E293B;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-2: 0 6px 24px -8px rgba(15, 23, 42, 0.10);
  --shadow-3: 0 16px 48px -12px rgba(15, 23, 42, 0.18);

  --chart-grid: #EEF2F7;
  --scrim: rgba(15, 23, 42, 0.45);
  color-scheme: light;
}

/* ============================================================
   TEMA ESCURO
   ============================================================ */
[data-theme="dark"] {
  --bg:            #0B1120;
  --bg-app:        #0B1120;
  --surface:       #111A2E;
  --surface-2:     #1E293B;
  --surface-3:     #2C3A50;
  --border:        #1E293B;
  --border-soft:   #16223A;

  --text:          #F8FAFC;
  --text-2:        #94A3B8;
  --text-3:        #64748B;
  --text-invert:   #0F172A;

  --sidebar-bg:    #0B1120;
  --sidebar-text:  #94A3B8;
  --sidebar-hover: #16223A;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 6px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 48px -12px rgba(0, 0, 0, 0.6);

  --chart-grid: #1E293B;
  --scrim: rgba(2, 6, 17, 0.6);
  color-scheme: dark;
}