/* ============================================================
   IMPER CREDI BRASIL — DESIGN TOKENS
   Tema escuro baseado na identidade visual da marca
   Preto #0a0a0a | Vermelho #c8102e | Dourado #c9a84c
   ============================================================ */

:root {
  /* === MARCA === */
  --color-brand-black:  #0a0a0a;
  --color-brand-red:    #c8102e;
  --color-brand-red-light: #e8203e;
  --color-brand-red-dark:  #9a0a22;
  --color-brand-gold:   #c9a84c;
  --color-brand-gold-light: #e0c070;
  --color-brand-gold-dark:  #a07828;

  /* === PRIMÁRIA (vermelho) === */
  --color-primary:       #c8102e;
  --color-primary-light: #e8203e;
  --color-primary-dark:  #9a0a22;

  /* === ACCENT (dourado) === */
  --color-accent:        #c9a84c;
  --color-accent-light:  #e0c070;
  --color-accent-dark:   #a07828;

  /* === ESTADO === */
  --color-success:    #22c55e;
  --color-success-bg: rgba(34, 197, 94, 0.12);
  --color-warning:    #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-danger:     #ef4444;
  --color-danger-bg:  rgba(239, 68, 68, 0.12);
  --color-info:       #3b82f6;
  --color-info-bg:    rgba(59, 130, 246, 0.12);

  /* === SUPERFÍCIES ESCURAS === */
  --color-bg:           #0a0a0a;   /* fundo principal */
  --color-surface:      #141414;   /* cards, painéis */
  --color-surface-2:    #1c1c1c;   /* cards internos */
  --color-surface-3:    #242424;   /* hover, input */
  --color-border:       #2a2a2a;
  --color-border-light: #1e1e1e;

  /* === TEXTO === */
  --color-white:        #ffffff;
  --color-text:         #f0f0f0;
  --color-text-secondary: #aaaaaa; /* rótulos/labels — contraste AA maior que text-muted */
  --color-text-muted:   #888888;
  --color-text-light:   #555555;

  /* === BOTTOM NAV === */
  --bottom-nav-height: 64px;
  --bottom-nav-bg:     #0d0d0d;
  --bottom-nav-border: #1e1e1e;
  --bottom-nav-text:   #666666;
  --bottom-nav-active: #c9a84c;

  /* === TOPBAR === */
  --topbar-height:  56px;
  --topbar-bg:      #0d0d0d;
  --topbar-border:  #1e1e1e;
  --topbar-shadow:  0 1px 0 #1e1e1e;

  /* === INPUTS === */
  --input-bg:       #1c1c1c;
  --input-border:   #2a2a2a;
  --input-focus:    #c8102e;
  --input-text:     #f0f0f0;
  --input-placeholder: #555555;

  /* === RADIUS === */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* === SOMBRAS (mais intensas no escuro) === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 20px rgba(201, 168, 76, 0.2);
  --shadow-red:  0 0 20px rgba(200, 16, 46, 0.25);

  /* === TIPOGRAFIA === */
  --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 15px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;
  --font-size-2xl:  28px;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* === ESPAÇAMENTO === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* === TRANSIÇÕES === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* === Z-INDEX === */
  --z-sidebar:  100;
  --z-topbar:    90;
  --z-bottomnav: 100;
  --z-modal:     200;
  --z-toast:     300;
}