/* The light layer's tokens: fork C, "one light" (mocks/tiles-glass/c on the
 * tiles-glass branch at 8415d32), at three quarters of its intensity. His
 * pick, 2026-09-02. The only file in the layer allowed a colour literal.
 *
 * One knob, two rules. Every value below is the fork's own number pulled
 * toward what the site rendered before this layer existed, by the knob:
 *   - a body (the plate's graphite, the panel's cold glass) mixes toward the
 *     site's token for the same surface;
 *   - a light (a glow, a rim, a bevel, a cast shadow) has no counterpart on the
 *     old site, so it mixes toward transparent, which is its alpha at the knob.
 * At 1 this is fork C; at 0 it is the site as it was. Three things do not
 * scale. The glyph: it is the object's content, not its lighting, and it has
 * to stay legible on the darker plate. The one-pixel edges and rings: they
 * draw the object's outline, not the light on it. Positions: geometry.
 */
:root {
  --light-strength: 0.75;
  --light-pct: calc(var(--light-strength) * 100%);

  /* the sun, in px from the sheet's top-left corner: above the sheet, right of it */
  --light-sun-x: 1760;
  --light-sun-y: -620;
  /* the sun as seen from the hero panel, as fractions of the panel's box */
  --light-glass-sun-x: 1.42;
  --light-glass-sun-y: 0.20;

  /* the two lights on the panel */
  --light-sun-warm:  color-mix(in srgb, rgba(255, 196, 132, 0.62) var(--light-pct), transparent);
  --light-sun-rim:   color-mix(in srgb, rgba(255, 226, 194, 1)    var(--light-pct), transparent);
  --light-lamp-cool: color-mix(in srgb, rgba(214, 238, 255, 0.58) var(--light-pct), transparent);
  --light-lamp-rim:  color-mix(in srgb, rgba(255, 255, 255, 1)    var(--light-pct), transparent);
  /* the far side of the same ring: an edge away from a light is not neutral,
     it is dark, and that difference is how an eye reads which way the light
     comes from */
  --light-rim-far:   color-mix(in srgb, rgba(6, 10, 18, 0.62) var(--light-pct), transparent);
  /* cold glass: the panel has a temperature of its own, so the sun crossing its
     right side reads as light falling on a thing rather than as a tint */
  --light-glass-cool-top:    color-mix(in srgb, rgba(196, 218, 240, 0.24) var(--light-pct), var(--resurs-glass-fill));
  --light-glass-cool-bottom: color-mix(in srgb, rgba(104, 134, 172, 0.34) var(--light-pct), var(--resurs-glass-fill));
  --light-glass-edge: rgba(255, 255, 255, 0.16);
  --light-glass-blur: 24px;
  --light-glass-cast: 0 36px 72px -32px color-mix(in srgb, rgba(6, 10, 18, 0.60) var(--light-pct), transparent);
  /* the panel's own thickness: a turned top edge and an underside in shade */
  --light-panel-bevel: color-mix(in srgb, rgba(255, 255, 255, 0.72) var(--light-pct), transparent);
  --light-panel-under: color-mix(in srgb, rgba(6, 10, 18, 0.34)     var(--light-pct), transparent);
  --light-panel-inner: rgba(255, 255, 255, 0.22);

  /* the graphite plate: a body, a lit face, a bevel, and the shadow it throws */
  --light-body-top:    color-mix(in srgb, #262E3E var(--light-pct), var(--resurs-plate-face-top));
  --light-body-bottom: color-mix(in srgb, #0E121B var(--light-pct), var(--resurs-plate-face-bottom));
  --light-face-lit:    color-mix(in srgb, #8195B6 var(--light-pct), transparent);  /* the side turned toward the light */
  --light-bevel-light: color-mix(in srgb, rgba(255, 255, 255, 0.30) var(--light-pct), transparent);
  --light-bevel-dark:  color-mix(in srgb, rgba(0, 0, 0, 0.42)       var(--light-pct), transparent);
  --light-plate-ring:  rgba(255, 255, 255, 0.13);
  --light-shadow:      color-mix(in srgb, rgba(14, 20, 32, 0.66) var(--light-pct), transparent);
  /* the glyph, cut into graphite: a light stroke over a dark trench */
  --light-glyph:        #E9EFF8;
  --light-glyph-accent: #86B0FF;
  --light-glyph-trench: rgba(0, 0, 0, 0.55);

  --light-hairline: var(--resurs-hairline);
  /* an opaque stop for the rim mask; a mask reads coverage, not colour */
  --light-opaque: #000000;
  --light-ease: var(--resurs-ease);
}

@media (max-width: 1080px) {
  :root { --light-sun-x: 980; --light-sun-y: -520; --light-glass-sun-x: 1.25; --light-glass-sun-y: -0.35; }
}
@media (max-width: 560px) {
  :root { --light-sun-x: 520; --light-sun-y: -420; --light-glass-sun-x: 1.15; --light-glass-sun-y: -0.4; }
}