/* GLE graphic language — "Pixel" (direction B, chosen 2026-09-15 in U4).
   Built only on tokens.css variables; link tokens.css and fonts.css before this file.
   Record: design/brand-graphic-language-decision-2026-09-15.md

   The idea: the LED medium itself. A quiet dot field is the ground, content sits on
   tiles like LED modules on a strict grid, and orange appears as single lit pixels.

   ALLOWED
   - one lit pixel per tile, and one or two per view at most
   - the dot field as a page or panel background, always at low presence
   - tiles on a strict grid with equal gutters, hairline borders, radius-sm
   - the 2px orange rule once, under a header strip
   - figures in the mono face with tabular numerals
   NOT ALLOWED
   - more than two orange panels in one view, or a whole view filled orange
     (the offer card and the closing block are the two; see tokens.json color.orange_rule)
   - lit pixels scattered as decoration outside a tile or an eyebrow
   - gradients, glows or blur behind pixels; the pixel is flat and sharp
   - rounded corners larger than radius-sm on tiles; the chip is the only pill
   - the dot field over photography or over body text blocks */

/* ground: the dot field */
.gle-field {
  background-color: var(--gle-bg);
  background-image: radial-gradient(var(--gle-dot) 0.8px, transparent 1.1px);
  background-size: 12px 12px;
  background-position: 6px 6px;
}

/* module: the tile */
.gle-tile {
  position: relative;
  background: var(--gle-surface-raised);
  border: 1px solid var(--gle-line);
  border-radius: var(--gle-radius-sm);
  box-shadow: var(--gle-shadow-soft);
}
.gle-tile--flat { box-shadow: none; background: var(--gle-surface); }
.gle-tile--lit::after {
  content: "";
  position: absolute;
  top: var(--gle-space-2);
  right: var(--gle-space-2);
  width: 4px; height: 4px;
  background: var(--gle-accent);
}

/* the lit pixel on its own (beside an eyebrow, in a header strip) */
.gle-pixel {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--gle-accent);
  vertical-align: middle;
  flex: none;
}

/* the pixel cluster motif: a 3x3 cluster, colored by the current text color via mask */
.gle-motif-cluster {
  display: inline-block;
  width: 24px; height: 24px;
  background: currentColor;
  -webkit-mask: url("assets/pixel-cluster.svg") center / contain no-repeat;
  mask: url("assets/pixel-cluster.svg") center / contain no-repeat;
}

/* type treatments the language relies on */
.gle-eyebrow {
  display: inline-flex; align-items: center; gap: var(--gle-space-2);
  margin: 0;
  font-family: var(--gle-font-label);
  font-weight: var(--gle-font-label-weight);
  font-size: var(--gle-text-xs);
  letter-spacing: var(--gle-tracking-label);
  text-transform: uppercase;
  color: var(--gle-ink-soft);
}
.gle-display {
  font-family: var(--gle-font-display);
  font-weight: var(--gle-font-display-weight);
  letter-spacing: var(--gle-tracking-display);
  line-height: var(--gle-leading-display);
}
.gle-heading {
  font-family: var(--gle-font-heading);
  font-weight: var(--gle-font-heading-weight);
  line-height: var(--gle-leading-tight);
}
.gle-num {
  font-family: var(--gle-font-mono);
  font-weight: var(--gle-font-mono-weight);
  font-variant-numeric: tabular-nums;
  font-size: var(--gle-text-sm);
  color: var(--gle-muted);
}

/* the chip: the only pill in the language */
.gle-chip {
  display: inline-flex; align-items: center;
  padding: 2px var(--gle-space-3);
  border-radius: var(--gle-radius-pill);
  background: var(--gle-chip-bg);
  color: var(--gle-chip-ink);
  font-family: var(--gle-font-label);
  font-weight: var(--gle-font-label-weight);
  font-size: var(--gle-text-xs);
  letter-spacing: var(--gle-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.gle-chip--ghost { background: transparent; color: var(--gle-muted); border: 1px solid var(--gle-line); }

/* the one call to action per view */
.gle-cta {
  display: inline-flex; align-items: center; gap: var(--gle-space-2);
  padding: var(--gle-space-2) var(--gle-space-4);
  border-radius: var(--gle-radius-sm);
  background: var(--gle-accent);
  color: var(--gle-accent-ink);
  font-family: var(--gle-font-label);
  font-weight: var(--gle-font-label-weight);
  font-size: var(--gle-text-sm);
  text-decoration: none;
  box-shadow: var(--gle-shadow-soft);
}

/* the 2px orange rule, once, under a header strip */
.gle-rule { height: 2px; background: var(--gle-accent); }

/* a strict grid of tiles */
.gle-grid { display: grid; gap: var(--gle-space-3); }

/* ---- The Stellantis register (added 2026-09-15): navy hero surfaces only ----
   Lifted from the homologation credential: blurred orange orbs behind the content,
   an orange glow under the CTA, an orange gradient band. Use on covers, CTA bands
   and section dividers. Never on paper, never behind body text, never a whole slide. */
.gle-hero {
  position: relative;
  overflow: hidden;
  background: var(--gle-navy);
  color: var(--gle-steel-300);
  border-radius: var(--gle-radius-2xl);
}
.gle-hero > * { position: relative; z-index: 1; }
.gle-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--gle-orb-blur));
  z-index: 0;
  pointer-events: none;
  background: var(--gle-orb-orange);
}
.gle-orb--soft { background: var(--gle-orb-orange-soft); }
.gle-orb--steel { background: var(--gle-orb-steel); }
.gle-glow { box-shadow: var(--gle-glow-orange); transition: transform var(--gle-duration-fast) var(--gle-ease), box-shadow var(--gle-duration-fast) var(--gle-ease); }
.gle-glow:hover { transform: translateY(-1px); box-shadow: var(--gle-glow-orange-strong); }
.gle-gradient-band { background: var(--gle-gradient-orange); color: var(--gle-accent-ink); }

/* ---- The web register (added 2026-09-16), read from globalledexperience.com ----
   The live site's own language: dark panels with a hairline edge, an orange rim
   glow it calls neon-shadow, an orange-to-amber wash anchored bottom-right, and
   exactly one solid orange block to close a page. Dark is the default register;
   light is for e-mail and print. */
.gle-panel {
  background: var(--gle-surface-raised);
  border: 1px solid var(--gle-hairline);
  border-radius: var(--gle-radius-md);
}
.gle-panel--wash {
  background-image: var(--gle-gradient-orange-web);
  background-color: var(--gle-accent);
  color: var(--gle-accent-ink);
  border-color: transparent;
  border-radius: var(--gle-radius-lg);
  padding: var(--gle-space-6);
}
.gle-panel--wash .gle-tag { color: var(--gle-accent-ink); opacity: .85; }
.gle-panel--dark { background-image: var(--gle-gradient-dark); background-color: transparent; }
.gle-neon { box-shadow: var(--gle-neon-glow); border-radius: var(--gle-radius-xl); }
.gle-neon--soft { box-shadow: var(--gle-neon-glow-soft); }
.gle-tag {
  display: inline-flex; align-items: center; gap: var(--gle-space-2);
  font-family: var(--gle-font-label);
  font-weight: var(--gle-font-label-weight);
  font-size: var(--gle-text-xs);
  letter-spacing: var(--gle-tracking-label);
  text-transform: uppercase;
  color: var(--gle-accent-tint);
}
.gle-closing-block {
  background: var(--gle-accent);
  color: var(--gle-accent-ink);
  border-radius: var(--gle-radius-xl);
  padding: var(--gle-space-12) var(--gle-space-8);
}
.gle-closing-block .gle-tag { color: var(--gle-accent-ink); opacity: .82; }

/* ---- Site components the kit was missing (added 2026-09-16) ----
   Read from globalledexperience.com: the icon disc on a pillar, the dark chip
   sitting on an orange card, the orange icon square, and the mark used as a
   pale watermark bleeding off the closing block. */
.gle-disc {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--gle-radius-pill);
  background: var(--gle-accent-wash);
  color: var(--gle-accent);
}
.gle-icon { width: 20px; height: 20px; display: block; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gle-chip--on-accent { background: var(--gle-navy); color: var(--gle-paper); border-radius: var(--gle-radius-sm); text-transform: none; letter-spacing: normal; font-size: var(--gle-text-sm); padding: var(--gle-space-2) var(--gle-space-3); }
.gle-icon-square {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--gle-radius-md);
  background: var(--gle-accent);
  color: var(--gle-accent-ink);
  box-shadow: var(--gle-neon-glow-soft);
}
.gle-closing-block { position: relative; overflow: hidden; }
.gle-closing-block > * { position: relative; z-index: 1; }
/* The mark as a pale watermark bleeding off the right edge, cropped to the symbol
   so the wordmark never gets sliced. Declared after the stacking rule above, which
   carries the same specificity — order is what keeps this absolute. */
.gle-closing-block > .gle-watermark,
.gle-watermark {
  position: absolute; top: 50%; right: 0; transform: translate(18%, -50%);
  width: 46%; aspect-ratio: 1; z-index: 0;
  background: var(--gle-accent-ink);
  -webkit-mask: url("assets/symbol-v9-aparado.png") center / contain no-repeat;
  mask: url("assets/symbol-v9-aparado.png") center / contain no-repeat;
  opacity: .16; pointer-events: none;
}
/* the small orange square that leads every tag on the site */
.gle-tag::before { content: ""; width: 10px; height: 10px; background: currentColor; flex: none; }
.gle-tag--solid { color: var(--gle-accent); }
/* a tag that already carries an explicit lit pixel does not get the square twice */
.gle-tag:has(.gle-pixel)::before { content: none; }