/* ============================================================
   tokens.css — Design tokens do Dashboard Triunfante
   3 camadas: PRIMITIVE -> SEMANTIC -> COMPONENT

   Fonte unica de cores, tipografia, spacing, sombras e motion.
   Nao usar primitives diretamente em componentes — usar semantics.
   ============================================================ */

:root {

    /* === PRIMITIVE (cores brutas — nao usar diretamente em componentes) === */
    --color-red-600: #C71515;
    --color-red-700: #A51111;
    --color-red-soft: rgba(199, 21, 21, 0.08);
    --color-gray-900: #1A1A1A;
    --color-gray-700: #575757;
    --color-gray-500: #737373;
    --color-white: #FFFFFF;
    --color-gray-50: #FAFAFA;
    --color-gray-200: #E5E5E5;
    --color-gray-300: #E0E0E0;
    --color-green-600: #16a34a;
    --color-amber-600: #ca8a04;
    --color-red-500: #dc2626;
    --color-slate-700: #334155;
    --color-slate-500: #64748b;
    --color-slate-400: #94a3b8;
    --color-slate-100: #f1f5f9;

    /* === SEMANTIC (mapear para uso em componentes) === */

    /* --- Brand & semantic colors --- */
    --red: var(--color-red-600);
    --red-hover: var(--color-red-700);
    --red-soft: var(--color-red-soft);
    --ink: var(--color-gray-900);
    --ink-2: var(--color-gray-700);
    --ink-3: var(--color-gray-500);   /* WCAG AA fix: 4.74:1 em branco */
    --paper: var(--color-white);
    --paper-2: var(--color-gray-50);
    --bg-app: var(--color-gray-50);
    --rule: var(--color-gray-200);
    --rule-strong: var(--color-gray-300);
    --ok: var(--color-green-600);
    --warn: var(--color-amber-600);
    --err: var(--color-red-500);

    /* --- Chart palette (consumido pelo JS via getComputedStyle) --- */
    --chart-bar-neutral: var(--color-slate-700);   /* serie unica secundaria */
    --chart-line-plan: var(--color-slate-400);      /* serie Plan tracejada */
    --chart-tick: var(--color-slate-500);            /* AA contrast em #fff */
    --chart-grid: var(--color-slate-100);
    --chart-axis: var(--color-slate-400);

    /* --- Typography stack & sizes --- */
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 28px;
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h5: 16px;
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* --- Spacing scale (Tailwind-aligned) --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* --- Shadows & radii --- */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04);
    --shadow-md: 0 2px 8px 0 rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
    --radius-sm: 6px;
    --radius-md: 12px;

    /* --- Motion --- */
    --transition-fast: 150ms ease;
    --transition-med: 200ms ease;

    /* === COMPONENT (tokens especificos de componente) === */
    --kpi-border-width: 3px;
    --chart-height: 380;
}