@import url("obsidian.css");
@import url("cool-light.css");
@import url("neutral-light.css");
@import url("gilt-placements.css");

/* Panel trial "gunmetal" (round 3) on top of Obsidian: abyss's lighting on steelblue's plate, in neutral graphite.
   Panels are a graphite plate running from a lifted gunmetal top left to black at the bottom right (steelblue's lift,
   without the navy), carrying steelblue's fine hexagon micro-texture (a tiny static SVG tile) and faint brushed lines.
   On top sits abyss's light rig in platinum instead of blue: a crisp rim light down the left edge with a short spill,
   one diagonal glass reflection, a soft glow pooling in the bottom-right corner and a cool-white light along the top.
   Every dark surface (the coal scale and ink) is neutral graphite with the faintest cool bias, so nothing reads brown.
   Gold stays the accent and red stays rare. Placements: the "gilt" ladder (gilt-placements.css).
   The default theme (chosen 2026-10-28); other themes are local comparisons via journey_local.py --theme. */

:root {
  /* Surfaces: neutral graphite */
  --j-black: #000000;
  --j-coal-1000: #030304;
  --j-coal-950: #060607;
  --j-coal-900: #0b0b0d;
  --j-coal-850: #101012;
  --j-coal-800: #141517;
  --j-coal-750: #19191c;
  --j-coal-700: #1f2023;
  --j-coal-600: #2c2d31;
  --j-coal-500: #3d3e43;
  --j-ink-rgb: 5, 5, 6;
  --j-coal-900-rgb: 11, 11, 13;
  --j-coal-800-rgb: 20, 21, 23;
  --j-coal-700-rgb: 31, 32, 35;
  --j-coal-600-rgb: 44, 45, 49;
  --j-coal-500-rgb: 61, 62, 67;
  --j-stone-rgb: 120, 122, 128;
  --j-stone-light-rgb: 216, 218, 222;
  --j-muted: #9a9ca2;
  --j-dim: #6b6d73;

  /* Platinum light and the gunmetal texture */
  --j-plat-rgb: 222, 226, 232;
  --j-gm-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.392' viewBox='0 0 18 10.392'%3E%3Cpath d='M0 5.196 3 0h6l3 5.196-3 5.196H3zm12 0h6' fill='none' stroke='%23d4d7dc' stroke-opacity='.07' stroke-width='.7'/%3E%3C/svg%3E");
  --j-gm-brush: repeating-linear-gradient(135deg, rgba(var(--j-plat-rgb), 0.018) 0 1px, rgba(var(--j-plat-rgb), 0) 1px 4px);

  /* Panel material */
  --j-panel:
    linear-gradient(90deg, rgba(var(--j-plat-rgb), 0.1) 0, rgba(var(--j-plat-rgb), 0.025) 18px, rgba(var(--j-plat-rgb), 0) 34%),
    radial-gradient(110% 120px at 30% 0, rgba(var(--j-plat-rgb), 0.075), rgba(var(--j-plat-rgb), 0) 75%),
    radial-gradient(60% 130% at 96% 108%, rgba(var(--j-plat-rgb), 0.085), rgba(var(--j-plat-rgb), 0) 70%),
    linear-gradient(118deg, rgba(var(--j-plat-rgb), 0) 8%, rgba(var(--j-plat-rgb), 0.06) 20%, rgba(var(--j-plat-rgb), 0.015) 27%, rgba(var(--j-plat-rgb), 0) 33%),
    var(--j-gm-hex),
    var(--j-gm-brush),
    linear-gradient(160deg, rgba(33, 34, 38, 0.95) 0%, rgba(19, 20, 23, 0.95) 50%, rgba(6, 6, 8, 0.96) 100%);
  --j-panel-shadow: inset 1px 0 0 rgba(var(--j-plat-rgb), 0.34), inset 0 1px 0 rgba(var(--j-plat-rgb), 0.14), inset 0 -1px 0 rgba(var(--j-shadow-rgb), 0.5), 0 16px 32px -12px rgba(var(--j-shadow-rgb), 0.8);
  --j-panel-feature:
    var(--j-rule-center) 14px 0 / calc(100% - 28px) 1px no-repeat,
    radial-gradient(70% 200px at 50% 0, rgba(var(--j-plat-rgb), 0.07), rgba(var(--j-plat-rgb), 0) 75%),
    var(--j-panel);
  --j-panel-glass: linear-gradient(160deg, rgba(var(--j-coal-700-rgb), 0.7), rgba(var(--j-ink-rgb), 0.78));
  --j-line: rgba(var(--j-gold-rgb), 0.16);

  /* The page light (cool-light.css / neutral-light.css): neutral platinum, not blue */
  --j-cool-rgb: 168, 172, 180;
}