/* Cluecraft material recipes.

   Layer: `material` (§4, §7.1). A material is a reusable *appearance recipe*
   built from primitives and the theme's seeds (§3.1, §4.5 rule 2). It is defined
   once here; a component selects it and never defines one (§4.5 rule 3).

   One of the two files allowed to contain literal colour values (§3.3); the
   other is tokens.css. The literals here are white, black and a faint
   translucent white — used to lighten, darken and highlight the seed. That is
   shading, not a hue of its own.

   The recipe derives from the `--ui-color-metal` seed (§4.3), in the shape §4.5
   illustrates: a `color-mix(in srgb, var(--ui-color-metal) …)` gradient. Because
   the parts read the seed, a theme that overrides `--ui-color-metal` genuinely
   re-tints the metal; per §3.5 the derived tokens are declared on the
   seed-carrying scope (`:root`) so they re-resolve there. No shipped theme
   overrides the seed yet, so all four themes render the same brass today.

   Parts mostly follow §4.2:

     fill    the body gradient                        (§4.2 fill)
     light   the lit edge / highlight tone            (§4.2 light)
     shade   the shadowed / recessed tone             (§4.2 shade)
     edge    the translucent specular rim             (§4.2 edge)
     glow    emissive halo — none; brass is metal     (§4.2 glow)

   `ink` is the one addition. §4.2 names no foreground part, yet §4.5 rule 6
   requires any symbol/text colour placed on a material to stay legible against
   it. A dedicated foreground part is what makes that testable and lets a
   component select "the readable colour for this material" without reaching
   into primitives. **Flagged for review** in CHECKPOINT as a proposed §4.2
   addition. (Measured: see the step-3 note — this material's `light`..`shade`
   span is 7.3:1, so no single flat ink can reach 3:1 against both bounds.)

   First material only — brass (§4.4). Glass and parchment are added when a
   component needs them; do not grow the library speculatively (§4.5 rule 7). */

@layer material {
:root {
  --ui-material-brass-fill: radial-gradient(ellipse at 30% 45%,
      color-mix(in srgb, var(--ui-color-metal) 70%, #fff) 0%,
      var(--ui-color-metal) 20%,
      color-mix(in srgb, var(--ui-color-metal) 55%, #000) 55%,
      color-mix(in srgb, var(--ui-color-metal) 25%, #000) 100%);
  --ui-material-brass-light: color-mix(in srgb, var(--ui-color-metal) 70%, #fff);
  --ui-material-brass-shade: color-mix(in srgb, var(--ui-color-metal) 25%, #000);
  --ui-material-brass-edge: rgba(255, 255, 255, 0.05);
  --ui-material-brass-glow: none;
  --ui-material-brass-ink: color-mix(in srgb, var(--ui-color-metal) 15%, #fff);
}
}