/* ==========================================================================
   Derma Company — Design Tokens
   Fonte única da verdade para cores, tipografia, espaçamento e componentes.
   Importe este arquivo antes de qualquer outro CSS do site.
   ========================================================================== */

/* As fontes (Plus Jakarta Sans + Inter) são carregadas por <link> no HTML de cada página, sem bloquear a tela. */

:root {
  /* ---- Cores da marca (IDV) ------------------------------------------- */
  --brand-orchid: #B55DC2;   /* cor do logo — destaque, detalhes, hover   */
  --brand-plum:   #390859;   /* cor de autoridade — CTA, títulos, fundos  */
  --brand-white:  #FFFFFF;
  --brand-ink:    #121212;   /* preto da marca — texto, header, footer    */

  /* ---- Escala Orchid (derivada de #B55DC2) ---------------------------- */
  --orchid-50:  #FAF3FB;
  --orchid-100: #F3E4F5;
  --orchid-200: #E6C8EB;
  --orchid-300: #D6A3DE;
  --orchid-400: #C57ED0;
  --orchid-500: #B55DC2;
  --orchid-600: #9A45A8;
  --orchid-700: #7C3688;
  --orchid-800: #5E2867;

  /* ---- Escala Plum (derivada de #390859) ------------------------------ */
  --plum-700: #52177A;
  --plum-800: #45106A;
  --plum-900: #390859;
  --plum-950: #22033A;

  /* ---- Neutros ------------------------------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF8FB;
  --neutral-100: #F4F1F5;
  --neutral-200: #E7E2EA;
  --neutral-300: #D2CBD6;
  --neutral-400: #9B94A1;
  --neutral-600: #5C5663;
  --neutral-800: #2A2A2A;
  --neutral-900: #121212;

  /* ---- Feedback ------------------------------------------------------ */
  --success: #2E7D5B;
  --warning: #B7791F;
  --danger:  #B3261E;

  /* ---- Tokens semânticos (use estes nos componentes) ------------------ */
  --color-bg:            var(--neutral-0);
  --color-bg-soft:       var(--orchid-50);
  --color-bg-muted:      var(--neutral-100);
  --color-bg-inverse:    var(--brand-ink);
  --color-bg-brand:      var(--brand-plum);

  --color-text:          var(--brand-ink);
  --color-text-muted:    var(--neutral-600);
  --color-text-subtle:   var(--neutral-400);
  --color-text-inverse:  var(--neutral-0);
  --color-text-brand:    var(--brand-plum);
  --color-text-accent:   var(--orchid-700);   /* orchid legível sobre branco */

  --color-accent:        var(--brand-orchid);  /* ícones, bordas, destaques  */
  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);

  --color-cta:           var(--brand-plum);
  --color-cta-hover:     var(--plum-700);
  --color-cta-text:      var(--neutral-0);

  --color-price:         var(--brand-plum);
  --color-price-old:     var(--neutral-400);
  --color-sale:          var(--brand-orchid);

  /* ---- Tipografia ---------------------------------------------------- */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;   /* títulos, nomes de produto, preços */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;  /* textos e interface */

  --fs-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);   /* hero            */
  --fs-h1:      clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h2:      clamp(1.625rem, 2vw + 0.75rem, 2.25rem);
  --fs-h3:      1.375rem;
  --fs-h4:      1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-body:    1.6;

  --ls-heading: -0.02em;  /* títulos levemente fechados, sem letras afastadas */
  --ls-normal:  0;
  --ls-caps:    0.02em;   /* só para selos curtos em caixa-alta */

  /* ---- Espaçamento (base 4px) ---------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --section-y:  clamp(56px, 8vw, 112px);
  --container:  1240px;
  --gutter:     clamp(16px, 4vw, 32px);

  /* ---- Raios --------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---- Sombras (tingidas de plum, nunca cinza puro) ------------------ */
  --shadow-sm: 0 1px 2px rgba(57, 8, 89, 0.06);
  --shadow-md: 0 6px 20px -6px rgba(57, 8, 89, 0.14);
  --shadow-lg: 0 18px 44px -12px rgba(57, 8, 89, 0.22);

  /* ---- Movimento ----------------------------------------------------- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur:      250ms;
  --dur-slow: 450ms;

  /* ---- Camadas ------------------------------------------------------- */
  --z-header:  50;
  --z-drawer:  80;
  --z-float:   90;   /* botão flutuante do WhatsApp */
  --z-modal:  100;
}