/* ============================================================================
   tokens.css , CRM White-Label
   ============================================================================
   Sistema de tokens CSS Custom Properties.
   Estes valores sao FALLBACK. Em runtime, /painel/config.js (gerado a partir de
   config/client.json) sobrescreve --color-* via :root inline-style, garantindo
   o tema do cliente sem rebuild.

   Camadas:
     1. Brand cores (--color-*)        ← geradas a partir de brand.cores
     2. Semantic (bg, text, border)    ← apontam pras brand cores
     3. Component (badges 9 etapas)    ← tokens fixos pra dark theme
     4. Geometria (radius, gap, shadow)
     5. Tipografia (escala, family)
     6. Estados (hover, focus, active)
     7. Motion (duration, ease)

   Cliente piloto: MCK Advogados (terracota #BB795E sobre dark navy/black).
   ============================================================================ */

:root {
  /* ==========================================================================
     1) BRAND , sobrescritas em runtime por /painel/config.js
     ========================================================================== */
  --color-primary:     #1a1a1a;
  --color-accent:      #BB795E;   /* terracota MCK */
  --color-accent-deep: #9E6147;
  --color-text-dark:   #7E4830;
  --color-muted:       #5C636A;
  --color-bg-dark:     #0d0d0d;
  --color-bg-card:     #1a1a1a;
  --color-border:      #2a2a2a;
  --color-text-light:  #e8e8e8;
  --color-danger:      #dc2626;
  --color-success:     #16a34a;
  --color-warning:     #eab308;

  /* Variantes do accent (10/20/60 em rgba pra hovers/borders sem rebuild) */
  --color-accent-05:   rgba(187, 121, 94, 0.05);
  --color-accent-10:   rgba(187, 121, 94, 0.10);
  --color-accent-20:   rgba(187, 121, 94, 0.20);
  --color-accent-40:   rgba(187, 121, 94, 0.40);
  --color-accent-60:   rgba(187, 121, 94, 0.60);

  /* Whites em rgba pra borders/dividers/hovers */
  --color-white-05:    rgba(255, 255, 255, 0.05);
  --color-white-08:    rgba(255, 255, 255, 0.08);
  --color-white-10:    rgba(255, 255, 255, 0.10);
  --color-white-30:    rgba(255, 255, 255, 0.30);
  --color-white-40:    rgba(255, 255, 255, 0.40);
  --color-white-60:    rgba(255, 255, 255, 0.60);

  /* ==========================================================================
     2) SEMANTIC , apontam pra brand. Componentes consomem APENAS estes.
     ========================================================================== */
  --bg-app:            var(--color-bg-dark);
  --bg-surface:        var(--color-bg-card);          /* cards, modal, inputs */
  --bg-surface-hover:  rgba(255, 255, 255, 0.04);
  --bg-overlay:        rgba(0, 0, 0, 0.80);           /* modal backdrop */

  --text-primary:      var(--color-text-light);       /* texto principal */
  --text-secondary:    var(--color-white-60);         /* legendas, subtitulos */
  --text-tertiary:     var(--color-white-40);         /* placeholders, eixos */
  --text-disabled:     var(--color-white-30);
  --text-on-accent:    var(--color-primary);          /* texto SOBRE botao terracota */

  --border-subtle:     var(--color-white-08);
  --border-default:    var(--color-border);
  --border-strong:     var(--color-white-30);
  --border-accent:     var(--color-accent);

  --link:              var(--color-accent);
  --link-hover:        var(--color-accent-deep);

  /* ==========================================================================
     3) BADGES , 9 cores das etapas do funil (dark theme compatível)
        Padrao: bg em alpha 12-15% + text em tom claro que valida AA sobre
        #0d0d0d (>=4.5:1) + border em alpha 24%.

        Cores ESCOLHIDAS pra harmonizar com terracota MCK e nao roubar
        protagonismo do accent. Saturacao reduzida em 15-20% vs cores Tailwind.
     ========================================================================== */

  /* cinza , Lead Captado (estado neutro inicial) */
  --badge-cinza-bg:     rgba(148, 163, 184, 0.12);
  --badge-cinza-text:   #cbd5e1;
  --badge-cinza-border: rgba(148, 163, 184, 0.28);

  /* azul , Contato Iniciado */
  --badge-azul-bg:      rgba(59, 130, 246, 0.14);
  --badge-azul-text:    #93c5fd;
  --badge-azul-border:  rgba(59, 130, 246, 0.30);

  /* azul_claro , Lead Respondeu */
  --badge-azul-claro-bg:     rgba(56, 189, 248, 0.14);
  --badge-azul-claro-text:   #7dd3fc;
  --badge-azul-claro-border: rgba(56, 189, 248, 0.30);

  /* amarelo , Qualificado */
  --badge-amarelo-bg:     rgba(234, 179, 8, 0.14);
  --badge-amarelo-text:   #fde047;
  --badge-amarelo-border: rgba(234, 179, 8, 0.32);

  /* laranja , Diagnostico Agendado */
  --badge-laranja-bg:     rgba(249, 115, 22, 0.16);
  --badge-laranja-text:   #fdba74;
  --badge-laranja-border: rgba(249, 115, 22, 0.34);

  /* laranja_escuro , Diagnostico Realizado */
  --badge-laranja-escuro-bg:     rgba(217, 96, 28, 0.18);
  --badge-laranja-escuro-text:   #fb923c;
  --badge-laranja-escuro-border: rgba(217, 96, 28, 0.36);

  /* roxo , Proposta Enviada */
  --badge-roxo-bg:     rgba(168, 85, 247, 0.14);
  --badge-roxo-text:   #d8b4fe;
  --badge-roxo-border: rgba(168, 85, 247, 0.30);

  /* verde , Fechado Ganho */
  --badge-verde-bg:     rgba(34, 197, 94, 0.14);
  --badge-verde-text:   #86efac;
  --badge-verde-border: rgba(34, 197, 94, 0.32);

  /* vermelho , Fechado Perdido */
  --badge-vermelho-bg:     rgba(239, 68, 68, 0.14);
  --badge-vermelho-text:   #fca5a5;
  --badge-vermelho-border: rgba(239, 68, 68, 0.32);

  /* ==========================================================================
     4) GEOMETRIA , radius + spacing scale (8px base)
     ========================================================================== */
  --radius-xs:    2px;
  --radius-sm:    4px;     /* cards kanban, inputs, buttons (modelo usa 4px) */
  --radius-md:    6px;
  --radius-lg:    8px;     /* modal */
  --radius-pill:  9999px;  /* badges */

  --gap-0:   0;
  --gap-1:   4px;
  --gap-2:   8px;
  --gap-3:   12px;
  --gap-4:   16px;         /* grid de inputs */
  --gap-5:   20px;
  --gap-6:   24px;         /* padding de cards e modal */
  --gap-8:   32px;
  --gap-10:  40px;
  --gap-12:  48px;
  --gap-16:  64px;

  /* Width tokens */
  --kanban-col-width: 250px;
  --modal-max-width:  720px;
  --container-max:    1280px;

  /* Shadows (flat por padrao, exceto modal) */
  --shadow-none:   none;
  --shadow-modal:  0 25px 50px -12px rgba(0, 0, 0, 0.65);
  --shadow-focus:  0 0 0 3px var(--color-accent-40);

  /* ==========================================================================
     5) TIPOGRAFIA , Lato (UI) + Playfair Display (h1 e nome do lead no modal)
        Decisao: 2 fontes. Justificativa em design-spec.md.
     ========================================================================== */
  --font-sans:    'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Playfair Display', 'Lato', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'Menlo', monospace;

  /* Escala (tipografica modular ratio 1.2 , minor third) */
  --fs-xs:    11px;   /* labels CAPS de secao no modal */
  --fs-sm:    12px;   /* eixos de grafico, micro-textos */
  --fs-base:  14px;   /* body padrao do painel (UI compacta) */
  --fs-md:    16px;   /* descricoes, paragrafos longos */
  --fs-lg:    18px;   /* card kanban , nome do lead */
  --fs-xl:    20px;   /* h3 (LEADS POR DIA) */
  --fs-2xl:   24px;   /* h2, valor de stat-card */
  --fs-3xl:   30px;   /* h1 (CRM MCK), nome do lead no modal */
  --fs-4xl:   36px;
  --fs-stat:  32px;   /* valor R$ nos cards do dashboard */

  /* Pesos */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Line-height */
  --lh-tight:   1.15;  /* headings serif */
  --lh-snug:    1.35;  /* h2-h3 */
  --lh-normal:  1.5;   /* body */
  --lh-relaxed: 1.65;  /* paragraph longo */

  /* Letter-spacing */
  --ls-caps:    0.08em;  /* labels CAPS de secao */
  --ls-tight:   -0.01em; /* h1 serif */
  --ls-normal:  0;

  /* ==========================================================================
     6) ESTADOS , hover, focus, active, disabled
     ========================================================================== */
  --hover-bg:        var(--bg-surface-hover);
  --hover-border:    var(--color-accent-60);
  --focus-ring:      var(--shadow-focus);
  --focus-outline:   2px solid var(--color-accent);
  --active-bg:       var(--color-accent-deep);
  --disabled-opacity: 0.5;

  /* ==========================================================================
     7) MOTION , duration + easing (respeitam prefers-reduced-motion)
     ========================================================================== */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    220ms;
  --duration-slow:    320ms;

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);     /* default UI */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* drop card no kanban */

  --transition-base:   all var(--duration-fast) var(--ease-out);
  --transition-color:  color var(--duration-fast) var(--ease-out),
                       background-color var(--duration-fast) var(--ease-out),
                       border-color var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);

  /* ==========================================================================
     8) Z-INDEX , camadas
     ========================================================================== */
  --z-base:        0;
  --z-kanban-drag: 100;
  --z-tooltip:     500;
  --z-modal-overlay: 900;
  --z-modal:       1000;
  --z-toast:       1500;
}

/* ============================================================================
   Reduced motion , A11y obrigatorio (WCAG 2.3.3)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
    --transition-base:  none;
    --transition-color: none;
    --transition-transform: none;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}