/*
 * tokens.css — SHIAI SISTEM
 * Fonte única de verdade para variáveis CSS e tokens de design.
 * Consolida: tokens originais + shiai-tokens.css (removido)
 *
 * Ordem de carregamento: Bootstrap → tokens.css → app.css
 */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700;900&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ── Tipografia ── */
  --font-display: 'Exo 2', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-family:  var(--font-body);

  /* ── Cores da marca ── */
  --shiai-blue:       #1E3A8A;
  --shiai-blue-dark:  #0D1B3D;
  --shiai-red:        #D32F2F;
  --shiai-red-dark:   #B71C1C;
  --shiai-gray:       #E6E8EB;
  --shiai-white:      #FFFFFF;
  --shiai-text:       #0D1B3D;
  --shiai-text-muted: #4A5568;

  /* ── Bootstrap 5 overrides ── */
  --bs-primary:          #1E3A8A;
  --bs-primary-rgb:      30, 58, 138;
  --bs-danger:           #D32F2F;
  --bs-danger-rgb:       211, 47, 47;
  --bs-body-font-family: 'Inter', sans-serif;
  --bs-body-color:       #0D1B3D;
  --bs-border-radius:    6px;
  --bs-border-radius-lg: 8px;
  --bs-border-radius-sm: 4px;

  /* ── Cores semânticas ── */
  --primary:        #1E3A8A;
  --primary-strong: #0D1B3D;
  --primary-soft:   rgba(30, 58, 138, 0.12);
  --highlight:      #D32F2F;
  --success:        #10b981;
  --warning:        #f59e0b;
  --danger:         #D32F2F;

  /* ── Cores de superfície e texto ── */
  --bg:               #f7f9fc;
  --surface:          #ffffff;
  --surface-soft:     #f8fafc;
  --surface-strong:   #ffffff;
  --surface-card-muted: #f9fafb;
  --border:           #e5e7eb;
  --border-strong:    #d1d5db;
  --border-subtle:    #e5e7eb;
  --text:             #111827;
  --text-main:        #111827;
  --text-soft:        #6b7280;
  --muted:            #4b5563;
  --muted-strong:     #6b7280;

  /* ── Escala de cinzas ── */
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ── Vermelho (escala Tailwind) ── */
  --color-red-500:  #ef4444;
  --color-red-600:  #dc2626;

  /* ── Aliases legados (compatibilidade com templates existentes) ── */
  --color-primary:        var(--primary);
  --color-primary-hover:  var(--primary-strong);
  --color-primary-light:  var(--primary-soft);
  --color-secondary:      #D32F2F;
  --color-secondary-hover: #B71C1C;
  --color-secondary-light: rgba(211, 47, 47, 0.12);
  --color-dark:           #0D1B3D;
  --color-dark-light:     #1E3A8A;
  --color-success:        var(--success);
  --color-success-light:  rgba(16, 185, 129, 0.14);
  --color-danger:         var(--danger);
  --color-danger-light:   rgba(211, 47, 47, 0.12);
  --color-warning:        var(--warning);
  --color-warning-light:  rgba(245, 158, 11, 0.2);
  --color-white:          #FFFFFF;

  /* ── Espaçamento (grid de 4px) ── */
  --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;
  --space-16: 64px;
  --space-20: 80px;

  /* Aliases de espaçamento legados */
  --spacing-1:  var(--space-1);
  --spacing-2:  var(--space-2);
  --spacing-3:  var(--space-3);
  --spacing-4:  var(--space-4);
  --spacing-5:  var(--space-5);
  --spacing-6:  var(--space-6);
  --spacing-8:  var(--space-8);
  --spacing-10: var(--space-10);
  --spacing-12: var(--space-12);
  --spacing-16: var(--space-16);

  /* ── Raios de borda ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius:    6px;          /* alias genérico */
  --radius-pill: 999px;

  /* Aliases legados */
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --border-radius-xl: var(--radius-xl);

  /* ── Sombras ── */
  --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 18px 38px rgba(15, 23, 42, 0.12);

  /* ── Tipografia — escala ── */
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  20px;
  --fs-xl:  28px;
  --fs-xxl: 40px;

  /* Aliases legados */
  --font-size-xs:   var(--fs-xs);
  --font-size-sm:   var(--fs-sm);
  --font-size-base: var(--fs-md);
  --font-size-lg:   var(--fs-lg);
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;

  /* ── Transições ── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ── Layout ── */
  --navbar-height:      56px;
  --shiai-sidebar-width: 240px;
  --card-padding:       var(--space-4);
  --border-width:       1px;
}

/* ── Base global ── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.shiai-display {
  font-family: var(--font-display);
  font-weight: 700;
}

/* ── Utilitários de marca ── */
.text-shiai-blue { color: var(--shiai-blue) !important; }
.text-shiai-red  { color: var(--shiai-red)  !important; }
.bg-shiai-blue   { background-color: var(--shiai-blue)      !important; }
.bg-shiai-dark   { background-color: var(--shiai-blue-dark) !important; }

.shiai-accent-bar {
  display: block;
  width: 32px;
  height: 3px;
  background-color: var(--shiai-red);
  margin: 6px 0 12px 0;
}

/* ── Badges de status (shiai-tokens legado) ── */
.badge-ativo {
  background-color: rgba(30, 58, 138, 0.12);
  color: var(--shiai-blue);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
}
.badge-encerrado {
  background-color: var(--shiai-gray);
  color: var(--shiai-text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 4px;
}
.badge-urgente {
  background-color: rgba(211, 47, 47, 0.12);
  color: var(--shiai-red);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 4px;
}