/* ------------------------------------------------------------------
   ZONES — iB23 Group, Used machines, New machines

   One site, three identities. A visitor on an offer sheet is in
   "iB23 Used Injection Molding Machines"; on a catalogue they are in
   "iB23 LATAM Authorized Distributor"; everywhere else they are in
   iB23 Group. Each carries its own lockup and its own colour.

   A page declares which one it is on the <html> element:

       <html lang="en" data-lang="en" data-zone="used">

   and gets --accent and the rest from here. No zone means Group, so a
   page that forgets is wrong in the safest direction rather than
   unstyled.

   ---- why two colours per zone -------------------------------------
   --accent is the identity: fills, marks, rules, anything on a dark
   ground. --accent-ink is the same hue darkened until it clears 4.5:1
   as small text on white, which the identity colour does not:

       group  #d85030  4.11:1   ->  #cb4b2d  4.58:1
       used   #e89838  2.34:1   ->  #a26a27  4.54:1
       new    #2080b8  4.34:1   ->  #1f7db4  4.52:1

   The amber is the reason this split exists at all. It is a beautiful
   mark colour and it is unreadable as text on white — and it cannot
   carry white text either, at 2.34:1, so an amber button needs dark
   type the way .card-fill in tokens.css already does. Use --accent for
   the thing, --accent-ink for words about it.
------------------------------------------------------------------- */

:root,
html[data-zone="group"]{
  --accent:#d85030;
  --accent-ink:#cb4b2d;
  --accent-dark:#b03d22;
  --accent-soft:rgba(216,80,48,.12);
  --accent-glow:rgba(216,80,48,.30);
}

html[data-zone="used"]{
  --accent:#e89838;
  --accent-ink:#a26a27;
  --accent-dark:#c87d22;
  --accent-soft:rgba(232,152,56,.14);
  --accent-glow:rgba(232,152,56,.30);
}

html[data-zone="new"]{
  --accent:#2080b8;
  --accent-ink:#1f7db4;
  --accent-dark:#17608a;
  --accent-soft:rgba(32,128,184,.12);
  --accent-glow:rgba(32,128,184,.30);
}

/* ---- the lockup in the header ---------------------------------------
   Three different shapes: Group is a wide horizontal lockup, the other
   two are stacked. Matching their heights would leave the stacked ones
   with a descriptor too small to read, so each gets the height that
   makes its smallest line legible, and they come out at a similar
   visual weight instead of a similar number.

   The descriptor is inside the artwork now, so the .logo-tag that used
   to sit beside the old mark is gone from the markup. */
.logo-lockup{width:auto;display:block;flex:none;}
html[data-zone="group"] .logo-lockup{height:40px;}
html[data-zone="used"]  .logo-lockup{height:52px;}
html[data-zone="new"]   .logo-lockup{height:52px;}
@media (max-width:520px){
  html[data-zone="group"] .logo-lockup{height:32px;}
  html[data-zone="used"]  .logo-lockup{height:42px;}
  html[data-zone="new"]   .logo-lockup{height:42px;}
}