/* ============================================================================
   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:      #10b981;   /* FormsEver emerald (fallback; runtime override via /api/config) */
  --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;

}

/* ============================================================================
   9) FormsEver light theme , SCOPED em .theme-formsever-light
      --------------------------------------------------------------
      Tokens light-theme do builder visual. ESCOPADOS na classe
      .theme-formsever-light pra NAO vazar pro painel dark-theme
      (workspace/forms list/login). Builder + builder-logic adicionam
      class="theme-formsever-light" no <body>; demais paginas seguem o
      dark theme MCK herdado.

      Convencao: --fs-* / --s-* / --accent / --bg-* / --text-* aqui
      coexistem com --color-* (MCK legacy) do :root acima sem conflito.
   ============================================================================ */
.theme-formsever-light {
  /* Spacing scale FormsEver (multiplos de 4, Notion-density variant) */
  --s-0:  0px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;   /* default field padding-block */
  --s-4:  16px;   /* default element spacing */
  --s-5:  24px;   /* section padding */
  --s-6:  32px;   /* layout gaps */
  --s-8:  48px;   /* major section breaks */
  --s-10: 64px;   /* page-level bottom spacing */

  /* Typography FormsEver (Inter variable, 4 sizes, 2 weights) */
  --font-family-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body-size:     14px;
  --font-label-size:    13px;
  --font-heading-size:  15px;
  --font-display-size:  20px;
  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --line-height-body:    1.5;
  --line-height-label:   1.4;
  --line-height-heading: 1.4;
  --line-height-display: 1.3;

  /* Colors FormsEver (Light theme) , Linear slate/zinc + emerald accent */
  --bg-canvas:      oklch(98% 0.003 250);   /* page bg do builder, 60% dominant */
  --bg-surface:     oklch(100% 0 0);        /* cards, panels, modals, 30% secondary */
  --bg-subtle:      oklch(96% 0.005 250);   /* hover state non-selecionado */
  --bg-muted:       oklch(94% 0.006 250);   /* dividers, disabled bg */

  --border-subtle:  oklch(92% 0.007 250);   /* default field border */
  --border-default: oklch(86% 0.009 250);   /* stronger border, separators */

  --text-primary:   oklch(20% 0.015 250);   /* body text + headings */
  --text-secondary: oklch(45% 0.012 250);   /* labels, metadata */
  --text-tertiary:  oklch(60% 0.010 250);   /* placeholder, drag affordance */

  /* Accent emerald , 10% in 60/30/10 distribution */
  --accent:             oklch(65% 0.180 162);   /* #10B981 emerald-500 */
  --accent-hover:       oklch(58% 0.180 162);   /* #059669 emerald-600 */
  --accent-active:      oklch(52% 0.180 162);   /* #047857 emerald-700 */
  --accent-bg-subtle:   oklch(96% 0.030 162);   /* #ECFDF5 emerald-50 */
  --accent-text-on-bg:  oklch(35% 0.130 162);   /* #065F46 emerald-800 (contraste AA 7.1:1) */
  --accent-fg:          oklch(100% 0 0);        /* texto sobre --accent (contraste AA 4.7:1) */

  /* Semantic (reserved usage) */
  --danger:             oklch(60% 0.220 25);    /* #EF4444 red-500 */
  --danger-bg-subtle:   oklch(96% 0.035 25);    /* #FEF2F2 red-50 */
  --danger-text-on-bg:  oklch(38% 0.180 25);    /* #991B1B red-800 */
  --warning:            oklch(75% 0.150 75);    /* #F59E0B amber-500 */
  --info:               oklch(60% 0.150 240);   /* #3B82F6 blue-500 */

  /* Border radius FormsEver (sharp Linear edges) */
  --radius-none: 0px;
  /* --radius-sm 4px, --radius-md 6px, --radius-lg 8px, --radius-pill 9999px ja existem acima */

  /* Shadow tokens FormsEver (Linear minimalismo) */
  --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-md:    0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg:    0 12px 24px -4px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);
  /* --shadow-none + --shadow-focus ja existem acima (color override via accent emerald nas paginas FormsEver) */
  --shadow-focus-emerald: 0 0 0 3px oklch(65% 0.180 162 / 0.25);

  /* Animation tokens FormsEver (Linear snappy) */
  --dur-instant: 100ms;
  --dur-fast:    150ms;   /* default */
  --dur-base:    200ms;
  --dur-slow:    300ms;
  /* --ease-out + --ease-in-out ja existem acima com valores compativeis */
}

/* Fallback global pros tokens FormsEver mais usados — quando uma pagina
   herda tokens da builder mas nao opta no light theme. Mantem
   --s-* + --accent emerald disponiveis em :root sem sobrescrever
   --bg-surface / --text-primary do dark theme. */
:root {
  --s-0:  0px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-8:  48px;
  --s-10: 64px;
  --accent:        var(--color-accent);
  --accent-hover:  var(--color-accent-deep);
  --accent-fg:     #ffffff;
}

/* ============================================================================
   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;

    /* FormsEver tokens (UI-SPEC: todas durations 1ms exceto autosave 200ms). */
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-base:    1ms;
    --dur-slow:    1ms;
  }

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