/* ============================================================
   tokens.css — Design System unificado (admin + portal)
   Extraído do portal.html. Fonte única de verdade visual.
   ============================================================ */

:root {
  /* ─── Marca ──────────────────────────────────────────────── */
  --brand:        #F47920;
  --brand-hover:  #E06A17;
  --brand-active: #CC5E13;
  --brand-dim:    #FFF3EB;
  --brand-ghost:  rgba(244,121,32,.10);
  --brand-shadow: rgba(244,121,32,.25);

  /* ─── Superfícies / neutros ──────────────────────────────── */
  --bg:        #F4F6FA;
  --surface:   #FFFFFF;
  --surface-2: #F9FAFB;
  --surface-3: #F3F4F6;
  --border:    #E5E7EB;
  --border-2:  #D1D5DB;

  /* ─── Tipografia (tom 1 = mais forte) ────────────────────── */
  --t1: #111827;
  --t2: #374151;
  --t3: #6B7280;
  --t4: #9CA3AF;

  /* ─── Sidebar (modo light — nova direção) ────────────────── */
  --side-bg:        #FAFBFC;
  --side-border:    #E5E7EB;
  --side-item:      #4B5563;
  --side-item-hov:  #111827;
  --side-item-act:  #111827;
  --side-item-bg-hov: #F3F4F6;
  --side-item-bg-act: var(--brand-dim);

  /* ─── Semânticos (bg + fg prontos p/ badge) ──────────────── */
  --green:    #10B981; --green-bg: #ECFDF5; --green-fg: #065F46;
  --yellow:   #F59E0B; --yellow-bg:#FFFBEB; --yellow-fg:#92400E;
  --red:      #EF4444; --red-bg:   #FEF2F2; --red-fg:   #991B1B;
  --blue:     #3B82F6; --blue-bg:  #EFF6FF; --blue-fg:  #1E40AF;
  --purple:   #8B5CF6; --purple-bg:#F5F3FF; --purple-fg:#5B21B6;
  --gray:     #6B7280; --gray-bg:  #F3F4F6; --gray-fg:  #374151;

  /* ─── Raios ──────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ─── Sombras ────────────────────────────────────────────── */
  --sh-xs: 0 1px 2px rgba(16,24,40,.05);
  --sh-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --sh-md: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04);
  --sh-lg: 0 12px 32px rgba(16,24,40,.12), 0 4px 8px rgba(16,24,40,.06);
  --sh-focus: 0 0 0 3px var(--brand-ghost);

  /* ─── Transições ─────────────────────────────────────────── */
  --t-fast: .12s ease;
  --t-base: .18s ease;
  --t-slow: .28s ease;

  /* ─── Z-index scale ──────────────────────────────────────── */
  --z-nav:     100;
  --z-modal:   1000;
  --z-toast:   9999;
  --z-tooltip: 10000;

  /* ─── Retro-compat (tokens legados do portal) ───────────── */
  --orange:       var(--brand);
  --orange-dark:  var(--brand-hover);
  --orange-light: var(--brand-dim);
  --orange-mid:   #FED7AA;
  --card-bg:      var(--surface);
  --text:         var(--t1);
  --text-mid:     var(--t2);
  --sub:          var(--t3);
  --border-light: var(--surface-3);
  --radius:       var(--r-lg);
  --radius-sm:    var(--r);
  --shadow:       var(--sh-sm);
  --shadow-md:    var(--sh-md);
}

/* ============================================================
   Base tipografia — Inter em todos os produtos
   ============================================================ */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* ============================================================
   Focus ring universal — acessibilidade
   ============================================================ */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ============================================================
   Scrollbar moderna (Chromium + Firefox)
   ============================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
::-webkit-scrollbar      { width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: var(--border-2);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{
  background: var(--t4);
  background-clip: content-box;
  border: 2px solid transparent;
}

/* ============================================================
   Animações utilitárias
   ============================================================ */
@keyframes fadeIn       { from { opacity: 0; }               to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; }
                          to   { transform: translateX(0);    opacity: 1; } }
@keyframes slideInUp    { from { transform: translateY(12px); opacity: 0; }
                          to   { transform: translateY(0);    opacity: 1; } }
@keyframes pulse        { 0%,100%{ opacity: 1; } 50%{ opacity: .55; } }
@keyframes pop          { 0%{ transform: scale(0); }
                          60%{ transform: scale(1.1); }
                          100%{ transform: scale(1); } }
@keyframes spin         { to { transform: rotate(360deg); } }

.anim-fade-in   { animation: fadeIn    .2s ease; }
.anim-slide-up  { animation: slideInUp .24s cubic-bezier(.16,1,.3,1); }
.anim-pop       { animation: pop       .28s cubic-bezier(.34,1.56,.64,1); }

/* Skeleton placeholder */
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-3) 0%,
    var(--border) 50%,
    var(--surface-3) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: skeletonShimmer 1.4s linear infinite;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}