/* ============================================================
   MANDA4 PROJECT MANAGER — Design System Tokens
   Baseado em SKILL.md e tokens.css oficiais Manda4
   ============================================================ */

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

:root {
  /* ── BRAND CORE ─────────────────────────────────────────── */
  --m4-blue:         #2563EB;
  --m4-blue-dark:    #1D4ED8;
  --m4-blue-light:   #DBEAFE;
  --m4-blue-soft:    #EFF6FF;

  --m4-amber:        #F5A404;
  --m4-amber-dark:   #D48C00;
  --m4-amber-light:  #FEF3C7;
  --m4-amber-soft:   #FFFBEB;

  /* ── WORDMARK ───────────────────────────────────────────── */
  --m4-wordmark:     #1E1E1C;
  --m4-wordmark-inv: #FFFFFF;

  /* ── DARK SURFACES (navy) ───────────────────────────────── */
  --m4-navy:         #0F2D52;
  --m4-navy-mid:     #1E3A5F;
  --m4-navy-light:   #2D4A70;
  --m4-navy-text:    #93C5FD;

  /* ── NEUTROS ────────────────────────────────────────────── */
  --m4-gray-950:     #030712;
  --m4-gray-900:     #111827;
  --m4-gray-800:     #1F2937;
  --m4-gray-700:     #374151;
  --m4-gray-600:     #4B5563;
  --m4-gray-500:     #6B7280;
  --m4-gray-400:     #9CA3AF;
  --m4-gray-300:     #D1D5DB;
  --m4-gray-200:     #E5E7EB;
  --m4-gray-100:     #F3F4F6;
  --m4-gray-50:      #F9FAFB;
  --m4-white:        #FFFFFF;

  /* ── SEMÂNTICAS (ajustadas para o Project Manager) ──────── */
  --m4-success:      #22C55E;
  --m4-success-bg:   #DCFCE7;
  --m4-success-dark: #15803D;

  --m4-warning:      #F5A404;
  --m4-warning-bg:   #FEF3C7;
  --m4-warning-dark: #B45309;

  --m4-danger:       #EF4444;
  --m4-danger-bg:    #FEE2E2;
  --m4-danger-dark:  #B91C1C;

  --m4-info:         #3B82F6;
  --m4-info-bg:      #E0F2FE;
  --m4-info-dark:    #0369A1;

  /* ── STATUS MAP ─────────────────────────────────────────── */
  --status-concluido-bg:     var(--m4-success-bg);
  --status-concluido-text:   var(--m4-success-dark);
  --status-em_andamento-bg:  var(--m4-warning-bg);
  --status-em_andamento-text:var(--m4-warning-dark);
  --status-planejado-bg:     var(--m4-info-bg);
  --status-planejado-text:   var(--m4-info-dark);
  --status-atrasado-bg:      var(--m4-danger-bg);
  --status-atrasado-text:    var(--m4-danger-dark);
  --status-pausado-bg:       var(--m4-gray-100);
  --status-pausado-text:     var(--m4-gray-600);
  --status-cancelado-bg:     var(--m4-gray-100);
  --status-cancelado-text:   var(--m4-gray-500);

  /* ── PRIORIDADE MAP ─────────────────────────────────────── */
  --prioridade-baixa-bg:     var(--m4-gray-100);
  --prioridade-baixa-text:   var(--m4-gray-600);
  --prioridade-media-bg:     var(--m4-blue-soft);
  --prioridade-media-text:   var(--m4-blue-dark);
  --prioridade-alta-bg:      var(--m4-warning-bg);
  --prioridade-alta-text:    var(--m4-warning-dark);
  --prioridade-critica-bg:   var(--m4-danger-bg);
  --prioridade-critica-text: var(--m4-danger-dark);

  /* ── TIPOGRAFIA ─────────────────────────────────────────── */
  --m4-font:         'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --m4-mono:         'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --m4-fw-light:     300;
  --m4-fw-regular:   400;
  --m4-fw-medium:    500;
  --m4-fw-semibold:  600;
  --m4-fw-bold:      700;
  --m4-fw-extrabold: 800;

  /* ── ESCALA TIPOGRÁFICA ─────────────────────────────────── */
  --m4-display:      2rem;      /* 32px */
  --m4-h1:           1.5rem;    /* 24px */
  --m4-h2:           1.25rem;   /* 20px */
  --m4-h3:           1rem;      /* 16px */
  --m4-body:         0.875rem;  /* 14px */
  --m4-caption:      0.75rem;   /* 12px */
  --m4-label:        0.6875rem; /* 11px */

  /* ── ESPAÇAMENTO (8pt grid) ─────────────────────────────── */
  --m4-sp-1:  0.25rem;   /* 4px  */
  --m4-sp-2:  0.5rem;    /* 8px  */
  --m4-sp-3:  0.75rem;   /* 12px */
  --m4-sp-4:  1rem;      /* 16px */
  --m4-sp-5:  1.25rem;   /* 20px */
  --m4-sp-6:  1.5rem;    /* 24px */
  --m4-sp-8:  2rem;      /* 32px */
  --m4-sp-10: 2.5rem;    /* 40px */
  --m4-sp-12: 3rem;      /* 48px */
  --m4-sp-16: 4rem;      /* 64px */
  --m4-sp-20: 5rem;      /* 80px */
  --m4-sp-24: 6rem;      /* 96px */

  /* ── BORDAS ─────────────────────────────────────────────── */
  --m4-radius-sm:   0.25rem;   /* 4px  */
  --m4-radius:      0.5rem;    /* 8px  */
  --m4-radius-md:   0.625rem;  /* 10px */
  --m4-radius-lg:   0.75rem;   /* 12px */
  --m4-radius-xl:   1rem;      /* 16px */
  --m4-radius-pill: 9999px;

  /* ── SOMBRAS ────────────────────────────────────────────── */
  --m4-shadow-xs:   0 1px 2px rgba(0,0,0,.04);
  --m4-shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --m4-shadow:      0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.04);
  --m4-shadow-md:   0 8px 16px rgba(0,0,0,.06), 0 4px 6px rgba(0,0,0,.03);
  --m4-shadow-lg:   0 16px 32px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.04);
  --m4-shadow-blue: 0 4px 14px rgba(37,99,235,.22);

  /* ── TRANSIÇÕES ─────────────────────────────────────────── */
  --m4-transition:    150ms ease;
  --m4-transition-md: 200ms ease;
  --m4-transition-lg: 250ms ease;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --m4-sidebar-width:     240px;
  --m4-sidebar-collapsed: 64px;
  --m4-header-height:     64px;
  --m4-container:         1280px;
  --m4-container-sm:      960px;
  --m4-section-y:         var(--m4-sp-12);

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --m4-z-dropdown:  100;
  --m4-z-sticky:    200;
  --m4-z-modal:     300;
  --m4-z-toast:     400;
  --m4-z-tooltip:   500;
}

/* Reset leve e base */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--m4-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--m4-gray-900);
  background-color: var(--m4-gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* Scrollbar sutil */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--m4-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--m4-gray-300);
  border-radius: var(--m4-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--m4-gray-400);
}