/* 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:      #317e0f;  --ok-edge:      #ccecbe;
  --info:    #51a7c5;  --info-rgb:    81,167,197;  --info-ink:    #337f99;  --info-edge:    #cee6ef;
  --warn:    #ffc107;  --warn-rgb:    255,193,7;   --warn-ink:    #8e6a00;  --warn-edge:    #ffeeba;
  /* The -ink of each status is TEXT and must read on white AND on its own
     tint at 4.5:1 (WCAG 1.4.3; Material 3's on-container rule). The bright
     hue stays for dots, fills and edges, where 3:1 against white is the
     bar — the warn dot's 1.6:1 is why a dot is never the only signal. */
  --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;
  /* The marketing site's page ground — chrome that should read as the brand's
     night (the topbar, toasts) uses this, not --dark's slate. */
  --night:   #070c16;  --night-rgb:   7,12,22;

  /* --------------------------------------------------------------- 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:  #8996a5;   /* icons, chevrons, dividers: 3:1 on white. NOT text —
                               text at this weight uses --muted (4.6:1) */
  --control-edge: #8996a7;  /* input and outlined-button borders: 3:1 (WCAG 1.4.11) */
  --focus:        var(--blue-ink); /* the one focus ring, 2px solid, offset 2px */
  --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;
  /* The outer surfaces — cards, stat tiles, the auth card — are outlined
     boxes with one generous corner (2026-10-27, after the Merchant Center
     reference): a hairline edge, no shadow, 12px. Things INSIDE a card keep
     --radius / --radius-lg; a 12px box inside a 12px box reads as nested
     wrongly. */
  --radius-card: 12px;
  --card-edge:   var(--line-strong);

  /* --------------------------------------------------- type & controls
     ONE scale for the panel and the portal. panel.css and portal.css both
     read these; a size that differs between the two stylesheets is a bug,
     not a choice (2026-10-27, operator's call: the two products must read
     as one). */
  --text-body: 15px;  --lh-body: 1.5;
  --text-ui:   14px;   /* inputs, buttons, table cells, nav links, flashes */
  --text-sm:   13px;   /* labels, pills, slugs, notes */
  --text-xs:   12px;   /* table headers and kickers: uppercase, .04em */
  --text-h1:   24px;  --text-h2: 16px;  --text-h3: 14px;
  --control-pad: 9px 11px;
  --control-h: 40px;      /* inputs, selects and buttons share one height so a row of them lines up */
  --btn-pad:     9px 16px;
  --btn-sm-pad:  5px 10px;
  --nav-pad:     10px 18px;
  --content-pad:   24px 28px 44px;
  --content-pad-m: 18px 16px 36px;

  /* 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;
}