/*
 * Cybereum · homepage-artwork.css
 *
 * Extracted from index.html: the decorative <svg> wireframe/network artwork
 * (hairline strokes, filled node shapes, gradient stops) used to hold its
 * paint directly on ~1050 elements as style="fill:...;stroke:...;stroke-
 * width:...". That made the document heavier and meant the same handful of
 * paint values were repeated over and over as inline text instead of
 * expressed once.
 *
 * These are one-off illustration constants, not part of the site's design-
 * token system (--cyb-*): several intentionally sit close to but different
 * from a --cyb-* color, and they must stay literal (or, for the three
 * repeated 100+ times, become their own tokens below) so this extraction
 * renders pixel-for-pixel identical to the inline styles it replaces. Only
 * values that appeared 4+ times were promoted to a class; rarer one-off
 * paint values were left inline in index.html rather than chased for
 * marginal gain.
 *
 * Classes are grouped by what they paint:
 *   .art-hair-*   hairline strokes (fill:none) -- the bulk of the line art
 *   .art-fill-*   filled shapes that also carry a stroke
 *   .art-solid-*  solid fills (stroke:none)
 *   .art-stop-*   <linearGradient> <stop> colors
 *   .ink-*        sets `color` so an icon's stroke="currentColor" picks up
 *                 a semantic token (green/accent/amber) without inline style
 */

:root {
  /* The three paint colors used often enough (100+ times each) to be worth
     naming. They are genuinely new colors -- not renamed --cyb-* tokens. */
  --art-hair-cyan: #c8faff;
  --art-hair-blue: #8cc8f5;
  --art-hair-white: #fafaff;
}

/* Hairline strokes (fill:none) -- the wireframe/network line art */
.art-hair-cyan-w05 { fill:none; stroke:var(--art-hair-cyan); stroke-width:0.5; }
.art-hair-blue { fill:none; stroke:var(--art-hair-blue); stroke-width:0.5; }
.art-hair-white { fill:none; stroke:var(--art-hair-white); stroke-width:0.5; }
.art-hair-azure { fill:none; stroke:#41a5f0; stroke-width:0.5; }
.art-hair-black { fill:none; stroke:#000000; stroke-width:0.5; }
.art-hair-ice { fill:none; stroke:#73e1ff; stroke-width:0.5; }
.art-hair-navy-w1 { fill:none; stroke:#193c96; stroke-width:1; }
.art-hair-sky { fill:none; stroke:#64c8fa; stroke-width:0.5; }
.art-hair-cobalt { fill:none; stroke:#1e50b9; stroke-width:0.5; }
.art-hair-navy-w05 { fill:none; stroke:#193c96; stroke-width:0.5; }
.art-hair-cyan-w093 { fill:none; stroke:var(--art-hair-cyan); stroke-width:0.93; }
.art-hair-frost { fill:none; stroke:#b9faff; stroke-width:0.5; }
.art-hair-b4f0ff { fill:none; stroke:#b4f0ff; stroke-width:0.93; }

/* Filled shapes with a stroke */
.art-fill-195082 { fill:#195082; stroke:#378cd2; stroke-width:2.43; }
.art-fill-46a5e1 { fill:#46a5e1; stroke:#50c8eb; stroke-width:1; }
.art-fill-sky-o097 { fill:#64c8fa; stroke:#73e1ff; stroke-width:1px; opacity:0.97; }
.art-fill-sky { fill:#64c8fa; stroke:#73e1ff; stroke-width:1px; }
.art-fill-46b4e6 { fill:#46b4e6; stroke:#50d2f0; stroke-width:1px; }
.art-fill-a0e6f5 { fill:#a0e6f5; stroke:#aaf5ff; stroke-width:0.93; }
.art-fill-64dcff { fill:#64dcff; stroke:#73f0ff; stroke-width:1.5; }
.art-fill-143c78-w15 { fill:#143c78; stroke:#1e468c; stroke-width:1.5; }
.art-fill-4bb9fa { fill:#4bb9fa; stroke:#55d2ff; stroke-width:2.43; }
.art-fill-1950aa { fill:#1950aa; stroke:#1e5abe; stroke-width:1; }
.art-fill-0f325a { fill:#0f325a; stroke:#0f325a; stroke-width:0.5; }
.art-fill-143c78-w05 { fill:#143c78; stroke:#194182; stroke-width:0.5; }
.art-fill-white { fill:#ffffff; stroke:#f0ffff; stroke-width:0.1; }
.art-fill-4bc3fa-o095 { fill:#4bc3fa; stroke:#55c8ff; stroke-width:0.93; opacity:0.95; fill-rule:evenodd; }
.art-fill-4bc3fa { fill:#4bc3fa; stroke:#55c8ff; stroke-width:0.93; fill-rule:evenodd; }
.art-fill-37a0d7-o098 { fill:#37a0d7; stroke:#41aff0; stroke-width:0.93; opacity:0.98; fill-rule:evenodd; }
.art-fill-2d91d2 { fill:#2d91d2; stroke:#41a5f0; stroke-width:0.93; }
.art-fill-37a0d7 { fill:#37a0d7; stroke:#41aff0; stroke-width:0.93; fill-rule:evenodd; }
.art-fill-2d91d2-o098 { fill:#2d91d2; stroke:#41a5f0; stroke-width:0.93; opacity:0.98; }

/* Solid fills (stroke:none) */
.art-solid-143c78 { fill:#143c78; stroke:none; stroke-width:1px; }

/* Linear-gradient <stop> colors */
.art-stop-frost-o0 { stop-color:#b9faff; stop-opacity:0; }
.art-stop-frost-o1 { stop-color:#b9faff; stop-opacity:1; }
.art-stop-cyan-o0 { stop-color:var(--art-hair-cyan); stop-opacity:0; }
.art-stop-cyan-o1 { stop-color:var(--art-hair-cyan); stop-opacity:1; }
.art-stop-96f5ff-o0 { stop-color:#96f5ff; stop-opacity:0; }
.art-stop-96f5ff-o1 { stop-color:#96f5ff; stop-opacity:1; }
.art-stop-a0f0ff-o0 { stop-color:#a0f0ff; stop-opacity:0; }
.art-stop-a0f0ff-o1 { stop-color:#a0f0ff; stop-opacity:1; }

/*
 * Semantic ink for icons that paint with `stroke="currentColor"`: setting
 * `color` on an ancestor is how those icons pick up a status token. These
 * replace `style="color:var(--green|--accent|--amber)"` found directly on
 * the affected <use>/<g> in index.html.
 */
.ink-green { color: var(--green); }
.ink-accent { color: var(--accent); }
.ink-amber { color: var(--amber); }