/* =============================================================
   negocio.com.py — DESIGN SYSTEM TOKENS
   The single source of truth for the whole site.
   Imported first by every page (detail, category, homepage).
   Drop this :root block straight into JetEngine → Custom CSS.

   Rule: no page may hardcode a colour. Everything references a
   token below, so re-theming the entire directory is a one-file
   edit.
   ============================================================= */

:root {
  /* ---- Core palette (verbatim from the design anchor) -------- */
  --np-canvas:        #FAF7F2;  /* warm light page background      */
  --np-surface:       #FFFFFF;  /* card surface                    */
  --np-primary:       #2C8DE0;  /* friendly azure — primary accent */
  --np-primary-dark:  #1B6FBE;  /* primary text-on-soft / hover    */
  --np-primary-soft:  #E9F3FC;  /* soft azure fill (chips, Llamar) */
  --np-accent:        #F2A33C;  /* warm amber — small highlights   */
  --np-accent-soft:   #FCEFD9;  /* amber fill (upgrade nudge)      */
  --np-whatsapp:      #25D366;  /* reserved ONLY for WhatsApp      */
  --np-whatsapp-dark: #1EBE5A;
  --np-on-color:      #FFFFFF;  /* text/icons on a coloured fill   */
  --c-white:          255,255,255; /* rgb triple for rgba overlays */
  --c-black:          0,0,0;
  --np-ink:           #233240;  /* primary text                    */
  --np-body:          #44515E;  /* body copy                       */
  --np-muted:         #7A8694;  /* muted / meta text               */
  --np-border:        #EBE6DE;  /* hairline borders                */
  --np-locked:        #F2EEE8;  /* locked premium slot fill        */

  /* ---- Extended palette (variants used across components) ---- */
  --np-band-from:     #3D9AE8;  /* free header band gradient start */
  --np-band-to:       #2480D6;  /* free header band gradient end   */
  --np-primary-soft-bd:#BFDDF6; /* border on soft-azure buttons    */
  --np-border-soft:   #EFEAE2;  /* lighter card / divider border   */
  --np-muted-soft:    #9AA1A9;  /* lighter muted (captions)        */
  --np-breadcrumb-sep:#C9C2B6;  /* breadcrumb chevrons             */
  --np-footer:        #F3EFE9;  /* footer band                     */
  --np-input-bg:      #FCFBF9;  /* form field fill                 */

  /* amber / upgrade nudge text ramp */
  --np-accent-bd:     #F4D9A8;
  --np-accent-strong: #E0902B;
  --np-accent-deep:   #B26B0E;
  --np-accent-ink:    #6B4708;
  --np-accent-ink-2:  #9A7430;

  /* locked-slot internals */
  --np-locked-bd:     #D8D2C8;
  --np-locked-ic-bg:  #E7E1D8;
  --np-locked-ic:     #A79F92;

  /* stylised map graphic (premium) */
  --np-map-from:      #EAF1EC;
  --np-map-to:        #E0EAE4;
  --np-map-line:      #D7E0D9;
  --np-map-border:    #E3E8E2;
  --np-map-pin:       #E0653C;

  /* category "próximamente" placeholder (calm green) */
  --np-ph-bg:         #F4F8F4;
  --np-ph-border:     #C7D8C9;
  --np-ph-chip-bg:    #E2F0E4;
  --np-ph-chip-ink:   #3C8A56;
  --np-ph-title:      #3A6B49;
  --np-ph-body:       #6E9079;

  /* ---- Radii ------------------------------------------------- */
  --r-card:  18px;
  --r-btn:   12px;
  --r-pill:  999px;
  --r-band:  20px;   /* free band / premium cover                */
  --r-input: 10px;
  --r-icon:  10px;

  /* ---- Elevation -------------------------------------------- */
  --shadow:         0 2px 4px rgba(40,50,60,.04), 0 8px 24px rgba(40,50,60,.06);
  --shadow-band:    0 10px 30px rgba(36,128,214,.28);
  --shadow-cover:   0 10px 30px rgba(40,50,60,.16);
  --shadow-wa:      0 4px 14px rgba(37,211,102,.30);
  --shadow-wa-hi:   0 8px 22px rgba(37,211,102,.40);
  --shadow-accent:  0 4px 14px rgba(242,163,60,.30);

  /* ---- Typography ------------------------------------------- */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-name:  clamp(27px, 6vw, 42px); /* business name — biggest on the page */
  --fs-h2:    18px;   /* section titles    */
  --fs-h3:    15px;   /* card titles       */
  --fs-body:  16px;   /* body copy         */
  --fs-meta:  14px;   /* meta / lists      */
  --fs-small: 12.5px; /* captions          */
  --fs-micro: 12px;   /* labels / eyebrow  */

  /* ---- Spacing scale (4·8·12·16·24·32·48) ------------------- */
  --space: 4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-6:  24px;
  --s-8:  32px;
  --s-12: 48px;

  /* ---- Layout ----------------------------------------------- */
  --page-max:  1100px;  /* content container */
  --rail-w:    340px;   /* desktop contact rail */
  --bp-desk:   960px;   /* mobile → desktop switch (see @media) */
}