/* =========================================================================
   LINKDOC.COM - Design Tokens
   Fonte unica de verdade do design system. Tema: Dark Periwinkle.
   Extraido da referencia (dashboard financeiro dark / azul-lavanda).
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. COR - MARCA (Periwinkle)
     --------------------------------------------------------------------- */
  --accent-50:  #EEF0FE;
  --accent-100: #DDE1FD;
  --accent-200: #C3C9FB;
  --accent-300: #A6B0F7;   /* topo das barras / hover claro */
  --accent-400: #8E9BF5;
  --accent:     #7B8AF2;   /* PRIMARIA - botoes, nav ativo, "Weekly" */
  --accent-600: #6B7BEF;   /* pressed / gradiente base */
  --accent-700: #5866D8;
  --accent-800: #454FB0;

  /* Gradientes de marca */
  --accent-gradient:      linear-gradient(180deg, #8E9BF5 0%, #6D7CEF 100%);
  --bar-gradient:         linear-gradient(180deg, #B9C1FA 0%, #6E7DF0 100%);
  --accent-glow:          0 8px 28px -6px rgba(123, 138, 242, 0.45);

  /* Superficie tingida de marca (chips, estados soft) */
  --accent-soft:          rgba(123, 138, 242, 0.14);
  --accent-soft-border:   rgba(123, 138, 242, 0.30);

  /* ---------------------------------------------------------------------
     2. COR - NEUTROS (Dark)
     Escala de superficies: fundo -> card -> elemento interno
     --------------------------------------------------------------------- */
  --bg-canvas:    #0C0C0E;   /* fundo da aplicacao (atras dos cards) */
  --surface-1:    #161619;   /* card base */
  --surface-2:    #1D1D21;   /* pill, input, elemento dentro do card */
  --surface-3:    #26262B;   /* cartao VISA, hover de linha, chip solido */
  --surface-4:    #313138;   /* hover elevado / borda ativa */

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-strong:  rgba(255, 255, 255, 0.10);
  --divider:        rgba(255, 255, 255, 0.05);

  /* ---------------------------------------------------------------------
     3. COR - TEXTO
     --------------------------------------------------------------------- */
  --text-primary:    #F5F5F7;   /* titulos, numeros */
  --text-secondary:  #9A9AA2;   /* subtitulos, labels */
  --text-tertiary:   #62626B;   /* placeholder, meta, desabilitado */
  --text-on-accent:  #FFFFFF;   /* texto sobre a cor de marca */

  /* ---------------------------------------------------------------------
     4. COR - SEMANTICA (feedback)
     --------------------------------------------------------------------- */
  --success:        #57D9A3;
  --success-soft:   rgba(87, 217, 163, 0.14);
  --warning:        #F5B84E;   /* status "Pending" */
  --warning-soft:   rgba(245, 184, 78, 0.14);
  --danger:         #F0574B;   /* badge de notificacao / erro */
  --danger-soft:    rgba(240, 87, 75, 0.14);
  --info:           var(--accent);
  --info-soft:      var(--accent-soft);

  /* Dot / seta de tendencia */
  --trend-up:       var(--success);
  --trend-down:     var(--danger);

  /* ---------------------------------------------------------------------
     5. TIPOGRAFIA
     --------------------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Escala tipografica (px) */
  --fs-display: 40px;   /* numero grande ($8,484k) */
  --fs-h1:      28px;   /* titulo de pagina */
  --fs-h2:      20px;   /* titulo de card */
  --fs-h3:      16px;   /* subtitulo / row title */
  --fs-body:    14px;   /* corpo padrao */
  --fs-sm:      13px;   /* labels */
  --fs-xs:      12px;   /* meta */
  --fs-micro:   11px;   /* badge de % */

  /* Pesos */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* Line-height */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.5;

  /* Tracking */
  --ls-tight:  -0.02em;   /* titulos e numeros */
  --ls-normal: 0;
  --ls-wide:   0.04em;    /* labels caixa alta */

  /* ---------------------------------------------------------------------
     6. ESPACAMENTO (base 4px)
     --------------------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Padding interno de card / gutter do grid */
  --card-pad: 28px;
  --grid-gap: 24px;

  /* ---------------------------------------------------------------------
     7. RAIO
     --------------------------------------------------------------------- */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   16px;    /* inputs, elementos internos */
  --radius-lg:   24px;    /* cards */
  --radius-xl:   28px;
  --radius-pill: 999px;   /* botoes, pills, chips */
  --radius-full: 50%;     /* botoes de icone, avatar */

  /* ---------------------------------------------------------------------
     8. ELEVACAO / SOMBRA
     Dark theme: sombras discretas, brilho apenas na marca.
     --------------------------------------------------------------------- */
  --shadow-card:   0 1px 0 0 rgba(255, 255, 255, 0.03) inset,
                   0 12px 32px -18px rgba(0, 0, 0, 0.8);
  --shadow-pop:    0 16px 40px -12px rgba(0, 0, 0, 0.7);
  --shadow-accent: var(--accent-glow);

  /* ---------------------------------------------------------------------
     9. TAMANHOS DE CONTROLE
     --------------------------------------------------------------------- */
  --control-h:     44px;   /* altura de botao / input padrao */
  --control-h-sm:  36px;
  --icon-btn:      44px;   /* botao de icone circular */
  --icon-btn-sm:   36px;
  --nav-rail:      64px;   /* largura do rail lateral */
  --avatar:        44px;

  /* ---------------------------------------------------------------------
     10. GRAFICOS
     --------------------------------------------------------------------- */
  --chart-bar:        var(--bar-gradient);
  --chart-ghost:      rgba(255, 255, 255, 0.045);   /* barra fantasma */
  --chart-ghost-line: rgba(255, 255, 255, 0.07);    /* hachura diagonal */
  --chart-grid:       rgba(255, 255, 255, 0.06);     /* linhas tracejadas */
  --chart-track:      rgba(255, 255, 255, 0.07);     /* trilho do gauge (Outcome) */
  --chart-radius:     12px;

  /* ---------------------------------------------------------------------
     11. MOVIMENTO
     --------------------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;

  /* ---------------------------------------------------------------------
     12. Z-INDEX
     --------------------------------------------------------------------- */
  --z-base:     0;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}