/* ============================================================
   tokens.css — Design Tokens — 706 Studio Dashboard
   ============================================================ */

:root {
  /* --- Fundo / Superfícies --- */
  --color-bg-primary:  #0f0f11;
  --color-bg-surface:  #1a1a1f;
  --color-bg-elevated: #242429;
  --color-bg-hover:    #2e2e35;
  --color-border:      #2e2e35;
  --color-border-subtle: #1e1e24;

  /* --- Texto --- */
  --color-text-primary:   #f2f2f5;
  --color-text-secondary: #8888a0;
  --color-text-muted:     #55556a;
  --color-text-link:      #818cf8;

  /* --- SLA Status --- */
  --color-sla-ok:       #22c55e;
  --color-sla-ok-bg:    rgba(34, 197, 94, 0.10);
  --color-sla-risk:     #f59e0b;
  --color-sla-risk-bg:  rgba(245, 158, 11, 0.10);
  --color-sla-late:     #ef4444;
  --color-sla-late-bg:  rgba(239, 68, 68, 0.10);

  /* --- Severidade de Alertas --- */
  --color-p0:    #ef4444;
  --color-p0-bg: rgba(239, 68, 68, 0.10);
  --color-p1:    #f97316;
  --color-p1-bg: rgba(249, 115, 22, 0.10);
  --color-p2:    #f59e0b;
  --color-p2-bg: rgba(245, 158, 11, 0.10);
  --color-p3:    #6b7280;
  --color-p3-bg: rgba(107, 114, 128, 0.10);

  /* --- Fases do Projeto --- */
  --color-phase-briefing:  #818cf8;
  --color-phase-prd:       #a78bfa;
  --color-phase-design:    #c084fc;
  --color-phase-backend:   #38bdf8;
  --color-phase-qa:        #34d399;
  --color-phase-deploy:    #22c55e;
  --color-phase-done:      #4ade80;

  /* --- Tipos de Projeto --- */
  --color-type-web:     #38bdf8;
  --color-type-landing: #a78bfa;
  --color-type-social:  #fb923c;

  /* --- Accent --- */
  --color-accent:        #818cf8;
  --color-accent-hover:  #6366f1;

  /* --- Tipografia --- */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;

  /* --- Espaçamento (base 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;

  /* --- Bordas --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* --- Sombras --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

  /* --- Transições --- */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;

  /* --- Breakpoints (referência — usar em media queries) ---
     Mobile:  380px
     Tablet:  768px
     Desktop: 1280px
  */
}