/* Finishes: metallic car-paint gloss. Layers (top→bottom): clear-coat horizon reflection, top-left specular bloom, base flake gradient. */
:root {
  --gloss-edge-emerald: #06201a;
  --gloss-edge-gold: #4e3816;
  /* metallic flake: fine white noise, tiles at 140px */
  --gloss-flake: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -0.62'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.28'/></svg>"); /* @kind other */
  --gloss-emerald:
    var(--gloss-flake),
    linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.16) 38%, rgba(255,255,255,.05) 49%, rgba(0,0,0,.22) 50.5%, rgba(0,0,0,.06) 68%, rgba(0,0,0,.34) 100%),
    linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 16%, rgba(255,255,255,.04) 50%, rgba(0,0,0,0) 84%, rgba(0,0,0,.28) 100%),
    radial-gradient(70% 90% at 20% -10%, rgba(150,235,190,.60) 0%, rgba(150,235,190,0) 60%),
    radial-gradient(60% 60% at 85% 120%, rgba(90,190,140,.30) 0%, rgba(90,190,140,0) 70%),
    linear-gradient(160deg, #2a7556 0%, #174b36 34%, #0d3123 64%, #03110d 100%); /* @kind other */
  --gloss-emerald-flat: linear-gradient(160deg, #23664a 0%, #154230 45%, #0b2a1e 100%); /* @kind other */
  --gloss-ink:
    var(--gloss-flake),
    linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.10) 38%, rgba(255,255,255,.04) 49%, rgba(0,0,0,0.24) 50.5%, rgba(0,0,0,0.06) 68%, rgba(0,0,0,0.36) 100%),
    linear-gradient(90deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(0,0,0,.26) 100%),
    radial-gradient(70% 90% at 20% -10%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #3a3d3d 0%, #1a1c1c 40%, #0a0b0b 70%, #000 100%); /* @kind other */
  --gloss-pearl:
    var(--gloss-flake),
    linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.4) 38%, rgba(255,255,255,.1) 49%, rgba(90,80,60,.10) 50.5%, rgba(90,80,60,.03) 68%, rgba(90,80,60,.16) 100%),
    linear-gradient(90deg, rgba(90,80,60,.12) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(90,80,60,.12) 100%),
    linear-gradient(160deg, #ffffff 0%, #f3f1ec 38%, #e2ded5 70%, #cdc8bd 100%); /* @kind other */
  --gloss-burgundy:
    var(--gloss-flake),
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.14) 38%, rgba(255,255,255,.04) 49%, rgba(0,0,0,0.24) 50.5%, rgba(0,0,0,0.06) 68%, rgba(0,0,0,0.36) 100%),
    linear-gradient(90deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(0,0,0,.26) 100%),
    radial-gradient(70% 90% at 20% -10%, rgba(255,170,170,.45) 0%, rgba(255,170,170,0) 60%),
    radial-gradient(60% 60% at 85% 120%, rgba(200,80,80,.25) 0%, rgba(200,80,80,0) 70%),
    linear-gradient(160deg, #94383d 0%, #632024 34%, #3a1013 64%, #160405 100%); /* @kind other */
  --gloss-gold:
    var(--gloss-flake),
    linear-gradient(180deg, rgba(255,250,232,.55) 0%, rgba(255,250,232,.18) 38%, rgba(255,255,255,.05) 49%, rgba(70,45,10,.22) 50.5%, rgba(70,45,10,.05) 68%, rgba(60,40,10,.32) 100%),
    linear-gradient(90deg, rgba(60,40,10,.25) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(60,40,10,.25) 100%),
    radial-gradient(70% 90% at 20% -10%, rgba(255,246,215,.75) 0%, rgba(255,246,215,0) 60%),
    linear-gradient(160deg, #e2c487 0%, #b38f55 36%, #8a6a36 66%, #5a4220 100%); /* @kind other */
  /* granite, polished speckled stone for the granite keycap: coarse dark + light speckle over a grey-charcoal base, soft polished highlight band on top */
  --gloss-granite-speck: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 3.2 -1.55'/></filter><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='19' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 3.4 -1.75'/></filter><rect width='100%' height='100%' filter='url(%23d)' opacity='.55'/><rect width='100%' height='100%' filter='url(%23l)' opacity='.38'/></svg>"); /* @kind other */
  --gloss-granite:
    var(--gloss-granite-speck),
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 36%, rgba(255,255,255,0) 48%, rgba(0,0,0,.14) 100%),
    linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(0,0,0,.22) 100%),
    linear-gradient(160deg, #5b5e60 0%, #46484a 45%, #2f3133 100%); /* @kind other */
  /* button lettering: polished chrome on emerald, engraved bronze on gold */
  --gloss-label-chrome: linear-gradient(180deg, #ffffff 0%, #ffffff 38%, #dfeee6 55%, #f6fbf8 75%, #ffffff 100%); /* @kind other */
  --gloss-label-chrome-warm: linear-gradient(180deg, #ffffff 0%, #ffffff 38%, #f4dede 55%, #fff6f6 75%, #ffffff 100%); /* @kind other */
  --gloss-label-ink: linear-gradient(180deg, #2c2e2e 0%, #101111 55%, #2a2c2c 100%); /* @kind other */
  --gloss-label-bronze: linear-gradient(180deg, #3a2a0e 0%, #23180a 55%, #4a3616 100%); /* @kind other */
  --gloss-text-emerald: linear-gradient(175deg, #2f8a62 0%, #154230 55%, #0b2a1e 100%); /* @kind other */
  --gloss-text-gold: linear-gradient(175deg, #c9a66b 0%, #8a6a36 60%, #6e5228 100%); /* @kind other */
  --gloss-sphere-emerald: radial-gradient(circle at 32% 28%, #b9f0d2 0%, #2f8a62 32%, #154230 70%, #03110d 100%); /* @kind other */
  --gloss-sphere-gold: radial-gradient(circle at 32% 28%, #fff3d0 0%, #c9a66b 35%, #8a6a36 75%, #4a3518 100%); /* @kind other */
  --gloss-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 2px rgba(3,17,13,.30), 0 10px 24px -6px rgba(3,17,13,.45); /* @kind shadow */
  --gloss-shadow-soft: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.25), 0 18px 40px -16px rgba(3,17,13,.5); /* @kind shadow */
  --sheen: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.38) 48%, rgba(255,255,255,.08) 54%, transparent 70%); /* @kind other */
}
:root[data-theme="dark"] {
  --gloss-edge-emerald: #020a07;
  --gloss-text-emerald: linear-gradient(175deg, #b2e3c8 0%, #74b394 50%, #3f8a66 100%);
  --gloss-text-gold: linear-gradient(175deg, #f0d7a4 0%, #c9a66b 55%, #9a7a44 100%);
}