/* =========================================================
   TCS · Design System v4 — Tokens
   Etapa 1 · Fundação visual
   ---------------------------------------------------------
   Este arquivo é a ÚNICA fonte de verdade para cores,
   tipografia, espaçamento, raios e sombras do TCS v4.
   Nenhum componente deve declarar cor literal — sempre token.
   ========================================================= */

:root{
  /* ---------- BRAND · PRIMÁRIAS ---------- */
  --color-olive:        #919b31;
  --color-olive-700:    #6b7424;
  --color-olive-600:    #7d8629;
  --color-olive-300:    #b4bb5e;
  --color-olive-200:    #c8ce87;
  --color-olive-100:    #dfe3b7;
  --color-olive-50:     #f1f2e4;
  --color-olive-25:     #f8f9ed;

  --color-lilac:        #8984bd;
  --color-lilac-50:     #eeedf5;

  /* ---------- NEUTROS · INK SCALE ---------- */
  --color-ink:          #17141c;
  --color-ink-80:       #3a363f;
  --color-ink-70:       #4e4a54;
  --color-ink-60:       #6b6872;
  --color-ink-50:       #858189;
  --color-ink-40:       #a19ea5;
  --color-ink-30:       #b9b6bc;
  --color-ink-20:       #d4d2d6;
  --color-ink-10:       #e8e7ea;

  /* ---------- SUPERFÍCIES ---------- */
  --color-bg:           #fafaf7;
  --color-bg-alt:       #f3f2ec;
  --color-card:         #ffffff;
  --color-paper:        #ffffff;

  /* ---------- SEMÂNTICOS ---------- */
  --color-success:      #4b7a4a;
  --color-success-bg:   #e7efe3;
  --color-warn:         #b5781a;
  --color-warn-bg:      #fbf1dc;
  --color-danger:       #b4442e;
  --color-danger-600:   #962f1d;
  --color-danger-bg:    #fbece7;
  --color-info:         #3f6a8a;
  --color-info-bg:      #e4ecf3;

  /* ---------- LINHAS ---------- */
  --color-line:         rgba(23, 20, 28, 0.07);
  --color-line-strong:  rgba(23, 20, 28, 0.13);

  /* ---------- SIDEBAR (dark) ---------- */
  --sidebar-bg:         #141117;
  --sidebar-bg-2:       #1b1820;
  --sidebar-ink:        #e7e4ec;
  --sidebar-dim:        #8d8793;
  --sidebar-mute:       #615d66;
  --sidebar-line:       rgba(255, 255, 255, 0.06);
  --sidebar-hover:      rgba(255, 255, 255, 0.035);
  --sidebar-active-bg:  rgba(145, 155, 49, 0.14);

  /* ---------- TIPOGRAFIA ---------- */
  --font-sans:   'Manrope', system-ui, -apple-system, sans-serif;
  --font-serif:  'Instrument Serif', Georgia, serif;
  --font-mono:   'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --text-xs:     10.5px;
  --text-sm:     11.5px;
  --text-base:   13.5px;
  --text-md:     14px;
  --text-lg:     16px;
  --text-xl:     22px;
  --text-2xl:    26px;
  --text-3xl:    32px;
  --text-hero:   38px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:    1.1;
  --lh-snug:     1.3;
  --lh-normal:   1.45;
  --lh-relaxed:  1.55;

  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.14em;

  /* ---------- ESPAÇAMENTO ---------- */
  --space-0:   0;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-9:  18px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;

  /* ---------- RAIOS ---------- */
  --radius-xs:  3px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  7px;
  --radius-xl:  10px;
  --radius-2xl: 12px;
  --radius-3xl: 14px;
  --radius-full: 999px;

  /* ---------- SOMBRAS ---------- */
  --shadow-xs:  0 1px 2px rgba(23, 20, 28, 0.04);
  --shadow-sm:  0 1px 2px rgba(23, 20, 28, 0.08);
  --shadow-md:  0 2px 6px rgba(23, 20, 28, 0.08);
  --shadow-lg:  0 8px 24px rgba(23, 20, 28, 0.1);
  --shadow-focus: 0 0 0 3px rgba(145, 155, 49, 0.12);

  /* ---------- TRANSIÇÕES ---------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   0.12s;
  --dur-base:   0.15s;
  --dur-slow:   0.25s;

  /* ---------- Z-INDEX ---------- */
  --z-base:     1;
  --z-header:   10;
  --z-drawer:   20;
  --z-modal:    30;
  --z-toast:    40;
}

/* =========================================================
   ALIAS DE COMPATIBILIDADE
   ---------------------------------------------------------
   Mapeia os nomes antigos (TCS Dashboard v3) para os novos
   tokens. Permite migrar o sistema existente SEM mudar
   nenhuma linha de HTML — só substitui o link do CSS.
   Remover este bloco na Etapa 3.
   ========================================================= */
:root{
  --olive: var(--color-olive);
  --olive-700: var(--color-olive-700);
  --olive-600: var(--color-olive-600);
  --olive-300: var(--color-olive-300);
  --olive-200: var(--color-olive-200);
  --olive-100: var(--color-olive-100);
  --olive-50: var(--color-olive-50);
  --olive-25: var(--color-olive-25);
  --lilac: var(--color-lilac);
  --lilac-50: var(--color-lilac-50);
  --ink: var(--color-ink);
  --ink-80: var(--color-ink-80);
  --ink-70: var(--color-ink-70);
  --ink-60: var(--color-ink-60);
  --ink-50: var(--color-ink-50);
  --ink-40: var(--color-ink-40);
  --ink-30: var(--color-ink-30);
  --ink-20: var(--color-ink-20);
  --ink-10: var(--color-ink-10);
  --bg: var(--color-bg);
  --bg-alt: var(--color-bg-alt);
  --card: var(--color-card);
  --danger: var(--color-danger);
  --danger-600: var(--color-danger-600);
  --danger-bg: var(--color-danger-bg);
  --warn: var(--color-warn);
  --warn-bg: var(--color-warn-bg);
  --success: var(--color-success);
  --success-bg: var(--color-success-bg);
  --info: var(--color-info);
  --info-bg: var(--color-info-bg);
  --line: var(--color-line);
  --line-strong: var(--color-line-strong);
  --sidebar: var(--sidebar-bg);
  --sidebar-2: var(--sidebar-bg-2);
  /* nomes usados no index.html legado */
  --primary:            var(--color-olive);
  --primary-light:      var(--color-olive-300);
  --primary-dark:       var(--color-olive-700);
  --text:               var(--color-ink);
  --muted:              var(--color-ink-60);
  --text-soft:          var(--color-ink-50);
  --border:             var(--color-line-strong);
  --section-bg:         var(--color-bg-alt);
  --accent:             var(--color-lilac);
  --accent-light:       var(--color-lilac-50);
  --error:              var(--color-danger);
  --error-bg:           var(--color-danger-bg);
  --shadow:             var(--shadow-sm);
  --shadow-lg:          var(--shadow-lg);
  --radius-sm:          var(--radius-sm);
  --radius-md:          var(--radius-xl);
  --radius-lg:          var(--radius-xl);
  --sidebar-w:          240px;
}
