/* ==========================================================================
   01-TOKENS.CSS — Variáveis de design da marca EstoqueNOW
   --------------------------------------------------------------------------
   Este é o ÚNICO arquivo que você precisa editar para trocar a identidade.
   Tudo que é cor, espaço, raio e tipografia vive aqui como CSS variable.

   Ordem de import no main.css:
   1. tokens (este)  →  2. base  →  3. components  →  4. blog
   ========================================================================== */

:root {
  /* ============================
     CORES DA MARCA
     ============================ */
  --brand:        #7B00B8;   /* Roxo primário EstoqueNOW (logo) */
  --brand-deep:   #5A0089;   /* Roxo escuro — hover de botões */
  --brand-soft:   #9B2BD8;   /* Roxo claro — gradientes */
  --brand-pale:   #F4E9FB;   /* Lavanda muito clara — fundos suaves */
  --brand-tint:   #FAF5FE;   /* Quase branco — seções tinted */

  /* ============================
     CORES DE APOIO
     ============================ */
  --accent:       #FFD400;   /* Amarelo — CTAs de destaque */
  --accent-warm:  #FF5A5F;   /* Coral — alertas, strikethrough */
  --success:      #1F9D55;   /* Verde — pílulas OK */

  /* ============================
     TINTAS DE TEXTO
     ============================ */
  --ink:          #1A0B26;   /* Preto-roxo — títulos */
  --ink-soft:     #4A3D58;   /* Cinza-roxo — corpo de texto */
  --ink-mute:     #8A7E96;   /* Cinza claro — meta info */

  /* ============================
     SUPERFÍCIES
     ============================ */
  --bg:           #FFFFFF;
  --bg-soft:      #FBF9FD;
  --line:         #ECE3F2;
  --line-soft:    #F5EFF8;

  /* ============================
     TIPOGRAFIA
     ============================
     Fonte principal: Nunito (Google Fonts) — sans-serif arredondada,
     amigável, legível em qualquer tamanho. Combina com a vibe da logo.

     Fonte decorativa: Instrument Serif (italic) — usada APENAS em
     destaques poéticos (números, palavras-chave em headlines).
     ============================ */
  --font-primary:   'Nunito', system-ui, -apple-system, sans-serif;
  --font-display:   'Instrument Serif', Georgia, serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Pesos do Nunito disponíveis */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  /* Escala tipográfica */
  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-md:    1.125rem;  /* 18px */
  --fs-lg:    1.25rem;   /* 20px */
  --fs-xl:    1.5rem;    /* 24px */
  --fs-2xl:   2rem;      /* 32px */
  --fs-3xl:   2.5rem;    /* 40px */
  --fs-4xl:   3rem;      /* 48px */

  /* Letter-spacing — Nunito performa melhor levemente apertado em headlines */
  --ls-tight:   -0.025em;
  --ls-normal:  0;
  --ls-wide:    0.12em;
  --ls-wider:   0.18em;

  /* Line-heights */
  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ============================
     ESPAÇAMENTOS
     ============================ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  /* ============================
     RAIOS / BORDAS
     ============================ */
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    18px;
  --radius-xl:    22px;
  --radius-2xl:   28px;
  --radius-pill:  999px;

  /* ============================
     SOMBRAS
     ============================ */
  --shadow-sm:   0 2px 8px -2px rgba(123, 0, 184, 0.08);
  --shadow-md:   0 14px 30px -16px rgba(123, 0, 184, 0.18);
  --shadow-lg:   0 24px 40px -22px rgba(123, 0, 184, 0.22);
  --shadow-xl:   0 30px 60px -25px rgba(123, 0, 184, 0.30);
  --shadow-brand: 0 8px 22px -10px rgba(123, 0, 184, 0.40);

  /* ============================
     TRANSIÇÕES
     ============================ */
  --t-fast:   180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-med:    420ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ============================
     LAYOUT
     ============================ */
  --container-max: 1280px;
  --nav-height:    72px;
}

/* ==========================================================================
   OVERRIDE DAS VARIÁVEIS DO BOOTSTRAP
   --------------------------------------------------------------------------
   Mantém todos os componentes Bootstrap usando a paleta da marca.
   ========================================================================== */
:root {
  --bs-primary:               var(--brand);
  --bs-primary-rgb:           123, 0, 184;
  --bs-link-color:            var(--brand);
  --bs-link-hover-color:      var(--brand-deep);
  --bs-link-color-rgb:        123, 0, 184;
  --bs-link-hover-color-rgb:  90, 0, 137;
  --bs-body-font-family:      var(--font-primary);
  --bs-body-font-weight:      var(--fw-regular);
  --bs-body-color:            var(--ink);
  --bs-heading-color:         var(--ink);
  --bs-border-color:          var(--line);
  --bs-body-bg:               var(--bg);
}