/* The one thing the panel and the documentation site share.

   Until now they shared nothing but a duplicated accent hex, which is why the
   two halves of the product did not look related. Both shells load this file
   first; panel.css and docs.css keep their own component layers and express
   every colour, radius and shadow in terms of what is declared here.

   The palette is Stack's (ThemeForest 22959011), reproduced from the SCSS its
   stylesheet carries in its sourcemap. Where Stack derives a colour with a Sass
   function the result is baked in below rather than approximated, because
   darken() and mix() work in HSL and eyeballing them drifts:

     --x-ink     = darken($x, 5%)                     _badge.scss, badge text
     --x-edge    = mix(white, $x, 72%)                _alert.scss, alert border
                   (theme-color-level($x, -9), Bootstrap 4's $alert-border-level)
     --x-rgb     = the triplet, so rgba() can make the .05 and .1 tints inline

   Do not add a colour here without its -rgb triplet. Half the component layer
   is a tint of something, and a tint needs the channels. */

:root {
  /* ------------------------------------------------------------- palette
     Primary is the house magenta — the same #de1b76 the panel and the docs
     site carried before, and the colour of the logo's own tagline, so the
     chrome and the mark agree. Stack's blue is kept below as --blue for
     anything that wants a second, non-brand accent; swapping the two is a
     matter of moving four values, since nothing downstream names a hex. */
  --primary: #de1b76;  --primary-rgb: 222,27,118;  --primary-ink: #c7186a;  --primary-edge: #f6bfd9;
  --primary-dark: #b1155e;
  --blue:    #308af3;  --blue-rgb:    48,138,243;  --blue-ink:    #187cf2;  --blue-edge:    #c5defc;
  --ok:      #48ba16;  --ok-rgb:      72,186,22;   --ok-ink:      #3fa313;  --ok-edge:      #ccecbe;
  --info:    #51a7c5;  --info-rgb:    81,167,197;  --info-ink:    #3f9dbd;  --info-edge:    #cee6ef;
  --warn:    #ffc107;  --warn-rgb:    255,193,7;   --warn-ink:    #ecb100;  --warn-edge:    #ffeeba;
  --crit:    #dc3545;  --crit-rgb:    220,53,69;   --crit-ink:    #d32535;  --crit-edge:    #f5c6cb;
  --dark:    #364c66;  --dark-rgb:    54,76,102;   --dark-ink:    #2d4055;  --dark-edge:    #c7cdd4;

  /* --------------------------------------------------------------- neutrals
     Stack's, not the old panel's: the canvas lifts from #f5f6f8 to #F7F8F9 and
     the ink cools from #1d2430 to a blue-leaning #112b4a. Headings sit at 84%
     of the body ink, which is what stops a page of bold h2s shouting. */
  --ink:         #112b4a;
  --ink-heading: rgba(17,43,74,.84);
  --muted:       #66768a;
  --muted-soft:  #939fad;   /* Stack's $dark-gray — placeholder and meta text */
  --bg:          #f7f8f9;
  --surface:     #fff;
  --surface-alt: #f7f8f9;   /* card headers, table headers, filter bars */
  --line:        #efefef;   /* Stack's $card-border-color */
  --line-strong: #dbdfe4;   /* Stack's $muted-light — input and divider edges */
  --track:       #eceef0;   /* Stack's $light-gray — meter and progress tracks */

  /* ------------------------------------------------------------ typography
     The system stack, as before. Source Sans 3 and Open Sans were self-hosted
     here for a while to match Stack exactly; they are gone again, along with
     fonts.css and 250KB of woff2. Nothing downstream changes — the type scale,
     weights and tracking taken from the template all still apply, in the face
     the machine already has.

     --font-head is a separate token even though it currently resolves to the
     same stack: headings and body are set apart by weight and size throughout,
     and keeping the seam means putting a display face back is one line here
     rather than a search through two stylesheets. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-head: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --------------------------------------------------------------- shape */
  --radius:      .25rem;   /* Bootstrap 4's default, which Stack keeps */
  --radius-lg:   .3rem;
  --radius-pill: 50rem;

  /* Stack's signature: cards carry a shadow and NO border. The old panel did
     the opposite. Both are defensible; mixing them is what looks unfinished. */
  --sh-card:  0 10px 25px 0 rgba(50,50,93,.07), 0 5px 15px 0 rgba(0,0,0,.07);
  --sh-pop:   0 8px 24px rgba(29,36,48,.12);
  --sh-toast: 0 6px 20px rgba(0,0,0,.18);
  --sh-focus: 0 0 0 .2rem rgba(var(--primary-rgb),.25);

  /* ---------------------------------------------------------------- brand
     There was a --brand-mark gradient here, reproducing the logo's disc in
     CSS because the real asset was not in the repo. It is now:
     /assets/img/snazzy-mark.svg, cut from the brand lockup, used by both
     shells and as the favicon. The full lockups live beside it in two
     variants — snazzy-logo.svg for light surfaces, snazzy-logo-inverted.svg
     for dark. Nothing here approximates them any more. */

  /* ------------------------------------------------------------ structure */
  --topbar-h:  56px;
  --sidebar-w: 220px;
}