/* B2 Networks Group - design tokens
   Source of truth: "Brochure actualizado 2026.pdf".
   Colours sampled from the file's vector fills and rendered pixels, not eyeballed.
   This file is the single source of truth and carries over to the WP child theme. */

:root {
  /* Brand ---------------------------------------------------------------- */
  --b2-orange:        #F06F22;  /* primary. CTAs, pill labels, chevrons */
  --b2-orange-light:  #F47A31;  /* hover / gradient top */
  --b2-orange-dark:   #D95A15;  /* active / pressed */

  --b2-navy:          #0A547A;  /* ground. deep petrol-teal, the field colour */
  --b2-navy-light:    #205C81;  /* raised panels, gradient partner */
  --b2-navy-deep:     #073B57;  /* footer, overlays */

  --b2-cyan:          #0F93C3;  /* logo "b", links on navy */
  --b2-cyan-pale:     #A8DEE9;  /* soft fills, dividers on navy */

  --b2-white:         #FFFFFF;
  --b2-off-white:     #F4F7F9;  /* page ground, biased cool toward the teal */
  --b2-line:          #D8E3EA;  /* hairlines on light ground */
  --b2-muted:         #3F6076;  /* secondary text, teal-biased grey. 6.7:1 on white */

  /* Semantic ------------------------------------------------------------- */
  --b2-bg:            var(--b2-off-white);
  --b2-surface:       var(--b2-white);
  --b2-text:          var(--b2-navy-deep);
  --b2-text-soft:     var(--b2-muted);
  --b2-on-dark:       var(--b2-white);
  --b2-on-dark-soft:  #BBD2DF;

  /* Type ------------------------------------------------------------------ */
  --b2-font-display:  "Outfit", "Segoe UI", system-ui, sans-serif;
  --b2-font-body:     "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.125rem;    /* 18px. Raised from 17px at the client's request. */
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  clamp(1.75rem, 2.6vw, 2.25rem);
  --fs-3xl:  clamp(2.1rem, 4vw, 3.1rem);
  --fs-4xl:  clamp(2.6rem, 5.6vw, 4.4rem);

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.65;
  --ls-label: 0.14em;   /* uppercase eyebrows */

  /* Space & shape --------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-8: 3rem;     --sp-10: 4rem;
  --sp-section: clamp(3.5rem, 8vw, 6.5rem);
  --gutter:     clamp(1rem, 4vw, 2.5rem);
  --maxw:       1220px;

  --r-pill: 999px;   /* orange label pills */
  --r-card: 18px;    /* white rounded cards */
  --r-sm:   8px;

  --shadow-card: 0 18px 40px -22px rgba(7, 59, 87, 0.45);
  --shadow-lift: 0 26px 55px -24px rgba(7, 59, 87, 0.55);
}

/* Mobile scale --------------------------------------------------------------
   Phones get their own type and spacing scale, not the desktop one squeezed.
   Overriding the tokens here compacts every component at once, which is the
   whole point of having them - no per-component mobile patches downstream. */
@media (max-width: 620px) {
  :root {
    --fs-base: 1rem;        /* 16px */
    --fs-sm:   0.875rem;
    --fs-xs:   0.75rem;
    --fs-lg:   1.0625rem;
    --fs-xl:   1.1875rem;
    --fs-2xl:  1.375rem;
    --fs-3xl:  1.625rem;
    --fs-4xl:  2rem;

    --lh-body: 1.55;

    --sp-4:  0.75rem;
    --sp-5:  1rem;
    --sp-6:  1.35rem;
    --sp-8:  1.85rem;
    --sp-10: 2.25rem;

    --sp-section: 2.5rem;
    --gutter:     1rem;

    --r-card: 12px;
    --shadow-card: 0 10px 22px -14px rgba(7, 59, 87, .40);
  }
}

@media (max-width: 380px) {
  :root {
    --fs-3xl: 1.5rem;
    --fs-4xl: 1.8rem;
    --sp-section: 2.15rem;
    --gutter: 0.875rem;
  }
}