/*
 * Brand palette — the single source of truth for colour.
 *
 * Values and the reasoning behind each role are documented in
 * docs/brand-palette.md. Nothing outside this file should contain a raw
 * colour literal; if a component needs a colour that is not here, the palette
 * is what should change.
 */

:root {
  /* ---- brand inks, taken from the logo artwork ---- */
  --brand-blue: #1e82f9;
  --brand-green: #35c46a;
  --brand-orange: #fd9f1f;
  --brand-coral: #f85246;
  --brand-violet: #a053f8;
  /* Fifth ink, from the category strip rather than the logo — the commercial
     category has no petal of its own. */
  --brand-magenta: #ce5195;

  /* Same four inks as r,g,b triplets — for rgba() ambient glows (the header's
     "light from the logo" wash) where an alpha this low would be invisible
     as a solid fill and needs its own value per gradient stop. */
  --brand-orange-rgb: 253, 159, 31;
  --brand-coral-rgb: 248, 82, 70;
  --brand-blue-rgb: 30, 130, 249;
  --brand-green-rgb: 53, 196, 106;
  --brand-violet-rgb: 160, 83, 248;

  /* ---- navy ground, darkest to lightest ---- */
  --ink-900: #0d131f;
  --ink-900-rgb: 13, 19, 31; /* rgba() blur bars (wizard.css bar/footer) need this alongside the hex */
  --ink-800: #131c2b;
  --ink-700: #1d2937;
  --ink-600: #293543;
  --ink-500: #36414d;
  --ink-400: #434c59;
  --ink-300: #5a626d;

  /* ---- type ---- */
  --paper: #e9e9e9;
  --paper-dim: #aeb8c4;
  --paper-mute: #8792a0;

  /* ---- "Dlaczego LGS" editorial text -----
     Cooler and a touch lighter than --paper on purpose: this text sits over
     a desaturated steel-blue photograph rather than flat --surface, and was
     tuned against that photo rather than reused from the flat-background
     tokens above. Scoped to that one section — see src/why-lgs.css. */
  --why-text: #f5f7f8;
  --why-text-rgb: 245, 247, 248; /* same colour as --why-text, as r,g,b for hairlines/borders that need their own alpha */
  --why-text-dim: rgba(235, 241, 245, .70);
  --why-text-muted: rgba(220, 228, 234, .45);
  --why-scrim: 10, 18, 28; /* r,g,b triplet — the scrim's rgba() supplies alpha per stop */

  /* ---- roles ----
     One colour, one meaning. Orange is always "being built now", blue is
     always "something you can act on". Coral and violet appear only inside
     the viewer, where they carry structural meaning rather than decoration. */
  --surface: var(--ink-900);
  --hairline: var(--ink-600);
  --hairline-strong: var(--ink-500);
  --accent: var(--brand-orange);
  --interactive: var(--brand-blue);

  /* ---- materials ----
     The logo is a cast plate carrying an extruded mark, so it needs surfaces
     rather than flat fills. They live here for the same reason the inks do:
     one file holds every colour literal in the project. */
  --plate-face: linear-gradient(158deg, #333d4b 0%, #222b37 38%, #161d27 72%, #111823 100%);
  --plate-sheen: linear-gradient(103deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .02) 22%, rgba(255, 255, 255, 0) 46%);
  --plate-lip: rgba(255, 255, 255, .13);
  --plate-foot: rgba(0, 0, 0, .5);
  --plate-cast: rgba(0, 0, 0, .85);
  --steel-face: linear-gradient(178deg, #ffffff 4%, #d7dde3 34%, #93a0ac 56%, #eef2f6 74%, #9aa6b2 100%);
  --steel-edge: rgba(0, 0, 0, .55);
  --steel-cast: rgba(0, 0, 0, .5);
  --menu-face: linear-gradient(168deg, #232c38 0%, #1a222d 55%, #141b25 100%);
  --menu-edge: rgba(255, 255, 255, .09);
  --menu-cast: rgba(0, 0, 0, .78);
  --menu-hover: rgba(30, 130, 249, .13);
}