/* ============================================================
   DESIGN TOKENS — BPRO BPO Financeira
   Paleta da logo + tipografia alinhada a concorrentes
   (contabilidade.com: Inter/Poppins → Plus Jakarta Sans / Manrope)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* --- Marca (logo) --- */
  --color-cyan:          #00D8DE;
  --color-purple:        #5F62B6;
  --color-orange:        #FF7931;
  --color-near-black:    #0A0A0B;
  --color-ink:           #141416;

  /* --- Aliases --- */
  --color-wise-green:    var(--color-cyan);
  --color-dark-green:    #062A2C;
  --color-light-mint:    #E8FBFC;
  --color-pastel-green:  #B5F4F7;
  --color-brand-green:   var(--color-cyan);
  --color-dark:          var(--color-near-black);
  --color-warm-gray:     #6B6B70;

  /* --- Semânticas --- */
  --color-positive:      #0A6B6F;
  --color-danger:        #D03238;
  --color-warning:       var(--color-orange);
  --color-info-tint:     rgba(0, 216, 222, 0.12);

  /* --- Neutras --- */
  --color-warm-dark:     #3D3D42;
  --color-gray:          #7A7A80;
  --color-light-surface: #F7F8F8;
  --color-white:         #ffffff;

  /* --- Tipografia
       Display: Plus Jakarta Sans (geométrica, papel do Poppins nas concorrentes)
       Body: Manrope (legibilidade alta, comum em fintech/BPO)
  --- */
  --font-display: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-body:    Manrope, "Segoe UI", sans-serif;

  /* --- Border-radius --- */
  --radius-minimal:  2px;
  --radius-standard: 10px;
  --radius-card-sm:  16px;
  --radius-card-md:  20px;
  --radius-card-lg:  24px;
  --radius-card-xl:  32px;
  --radius-mega:     1000px;
  --radius-pill:     9999px;
  --radius-circle:   50%;
  --radius-hero-media: 40px;

  /* --- Sombras --- */
  --shadow-ring:        rgba(10, 10, 11, 0.10) 0px 0px 0px 1px;
  --shadow-inset-focus: rgb(122, 122, 128) 0px 0px 0px 1px inset;
  --shadow-green:       var(--color-cyan) 0px 0px 0px 2px;
  --shadow-card:        0 12px 40px rgba(10, 10, 11, 0.08);
  --radius-card:        var(--radius-card-lg);

  /* --- Espaçamento --- */
  --space-1:   1px;
  --space-2:   2px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-56:  56px;
  --space-64:  64px;
  --space-72:  72px;
  --space-80:  80px;
  --space-96:  96px;
  --space-120: 120px;

  /* --- Transições --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}