/* ═══════════════════════════════════════════════════════════════════════════
 * theme.css - THE PALETTE, AND NOTHING ELSE.
 *
 * IT LIVES IN ITS OWN FILE BECAUSE IT HAS TWO READERS. The console loads it
 * from _head.html; the login screen loads it from login.html. Before this, the
 * login page carried a SECOND palette of its own - #4361ee primary, #1a1a1a
 * ground, rgba(30,30,30,.95) card - so the first screen of the product and
 * every screen after it were different products wearing one logo, and a colour
 * changed in one never reached the other.
 *
 * Anything that is not a colour token belongs in the stylesheet that uses it.
 * Add a component rule here and the login page starts carrying the console's
 * components.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 * THE CONSOLE'S COLOURS, IN ONE PLACE.
 *
 * These names were already read ninety-two times in this file - every one as
 * var(--mgl-surface, #fff) - and NOT ONE of them was ever defined. So every
 * site fell through to the literal written beside it, and those literals had
 * drifted: --mgl-muted resolved to four different greys depending on which line
 * you were looking at, --mgl-surface to three. A design system that exists only
 * as fallbacks is a list of suggestions.
 *
 * Defining them settles those drifts AND makes the console themable, because a
 * dark palette is then eleven values instead of the four hundred and fifty
 * colour literals this stylesheet contains. The values below are the majority
 * reading of what was already here, so nothing moves except the handful of
 * sites that had quietly disagreed.
 *
 * --mgl-nav-top and --mgl-nav-h are deliberately absent: MGL.showToast measures
 * the live bar and publishes them at runtime, so a value here would be a stale
 * second opinion.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* surfaces, from the page up */
  --mgl-page: #f1f5f9;
  --mgl-surface: #ffffff;
  --mgl-surface-2: #f9fafb;
  --mgl-surface-3: #e9ecef;

  /* lines */
  --mgl-line: #e5e7eb;
  --mgl-line-2: #d1d5db;
  --mgl-line-3: #f3f4f6;

  /* type */
  --mgl-ink: #111827;
  --mgl-ink-2: #374151;
  /* WAS #6b7280 - 4.83:1 on the card, which passes, and 4.24:1 the moment the
     card is a tint (an alert, a status pill), which does not. One step darker
     clears both. */
  --mgl-muted: #616a78;
  /* NOT A TEXT COLOUR. At 2.54:1 on white it never was one, and it was being
     used for hint text on the Settings page - the legends and the form help.
     Those now read --mgl-muted; this stays for what it can honestly do:
     icons, scrollbars, a disabled glyph. There is no shade dimmer than
     --mgl-muted that a person can still read, so there is no third text tone. */
  --mgl-muted-2: #9ca3af;
  /* WAS #007bff, WHICH IS 3.68:1 ON WHITE - under AA for body text, and this is
     the token every link in the light console reads. Surfaced by the alert
     links, but it was never only the alerts. #0b5ed7 is the same blue a step
     darker: 5.6:1 on the card, 5.2:1 on the page, and indistinguishable from
     the old one until you measure it. The dark value already passed. */
  --mgl-link: #0b5ed7;

  /* ── THE BOOTSTRAP BRIDGE ────────────────────────────────────────────────
   * Most text in this console has no colour rule of its own. A <td> measured
   * rgb(33,37,41) with NOTHING in our stylesheet matching it: it inherits
   * Bootstrap's --bs-body-color, and so do the tables, list groups, modals,
   * dropdowns and form controls. Chasing those one selector at a time would be
   * hundreds of rules and would still miss whatever Bootstrap adds next.
   *
   * Pointing Bootstrap's own variables at ours settles it in one place, and it
   * keeps working for markup nobody has written yet. */
  --bs-body-color: var(--mgl-ink);
  --bs-body-bg: var(--mgl-page);
  --bs-border-color: var(--mgl-line);
  --bs-secondary-color: var(--mgl-muted);
  --bs-emphasis-color: var(--mgl-ink);
  --bs-tertiary-bg: var(--mgl-surface-2);
  --bs-secondary-bg: var(--mgl-surface-3);

  /* ── SEMANTIC HUES: A FILL AND AN INK, AND ONLY THE INK MOVES ─────────────
     A status colour means the same thing in both themes, so the FILL never
     flips: danger is #dc3545 on a light page and on a dark one. But the ink -
     the form that has to be READ, on a tint or on the page - has a ground under
     it, and that ground does flip. #b02a37 on white is 6.4:1; the same red on
     #0f2039 is 3.6:1, which is why "Delete from Server" and every text-danger
     in the console came out dim the moment the page went dark.

     So each hue is a pair. Tints are mixed from the FILL into whatever surface
     is running, text takes the INK, and the four ink values below are the only
     ones the dark block has to restate. */
  --mgl-ok:   #16a34a;
  --mgl-warn: #d97706;
  --mgl-bad:  #dc3545;
  --mgl-info: #0d9bd6;

  --mgl-ok-ink:   #14713a;
  --mgl-warn-ink: #a24a08;
  --mgl-bad-ink:  #a52834;
  --mgl-info-ink: #0a6289;

  /* THE STRONG NEUTRAL - .btn-dark, the main action in a row.
     Bootstrap's is near-black, which is correct on a white page and invisible
     on a dark one: "Install on Launch" was #212529 on #0f2039. Inverting it to
     the theme's ink would have made a white slab, the loudest thing on the
     screen for a button that is not the loudest thing on the page. So it is a
     raised surface instead - black in the light, a lifted navy in the dark -
     and it is a token because the LIGHT value must not move. */
  --mgl-strong: #111827;
  --mgl-strong-hover: #374151;
  --mgl-strong-ink: #ffffff;

  /* THE SHELL - rail, drawer, top bar. IT USED TO BE FIXED NAVY IN BOTH
     THEMES, on the argument that the furniture is the product's identity. That
     was wrong in one specific way: it made the light theme a light page inside
     a dark frame - half a theme, and the half nobody asked for. A light theme
     that keeps a black navigation is a dark theme with a white hole in it.

     So the shell is eight more tokens on the same two-block pattern as the
     rest: these are the light values, the dark ones are restated below, and
     every rule that paints chrome reads them rather than a literal. What is
     kept in both is the SHAPE - the rail, the drawer widths, the accent - which
     is where the identity actually lives. */
  /* THESE EIGHT ARE THE SITE'S, VALUE FOR VALUE. managely.cloud names them
     --mnx-*; the console names them --mgl-shell-*; the hexes are now identical,
     so the two navigation columns are one design rather than two that were
     drawn to the same measurements in different inks.

       --mgl-shell        = --mnx-surface           #ffffff
       --mgl-shell-2      = --mnx-drawer-surface    #f8fafc   (the drawer ground)
       --mgl-shell-line   = --mnx-border            #e2e8f0
       --mgl-shell-ink    = --mnx-ink               #1b2a4a
       --mgl-shell-text   = --mnx-text              #1b2a4a at 77%
       --mgl-shell-muted  = --mnx-text-l            #94a3b8
       --mgl-shell-accent = --mnx-blue              #2563eb

     --mgl-shell-text is the ink at 77%, not a separate grey, and that is the
     part that had drifted furthest: #475569 is a colder, flatter grey than the
     navy showing through at three quarters, and a column of twenty rows is
     where a difference that small stops being small. */
  --mgl-shell: #ffffff;
  --mgl-shell-2: #f8fafc;
  --mgl-shell-line: #e2e8f0;
  --mgl-shell-ink: #1b2a4a;
  --mgl-shell-text: rgba(27, 42, 74, .77);
  --mgl-shell-muted: #94a3b8;
  --mgl-shell-hover: rgba(15, 23, 42, .06);
  --mgl-shell-accent: #2563eb;

  /* ── WHITE, BY REQUEST, AND WHY THEY ARE TOKENS AND NOT LITERALS ──────────
     The light console is a white console: the content canvas and the table
     rows are #ffffff, not the grey wash they were. Both were reached through
     a value that is right in the dark and wrong in the light - --mgl-page for
     the canvas, a 53% mix of --mgl-surface-3 for the rows - so writing
     #ffffff into the rules would have painted the dark theme white too.

     Two tokens instead, each restated in the dark block with the value that
     block already had. The rule reads one name; the theme decides what it is.

     The card keeps its own --mgl-surface (#ffffff as well), so in the light
     what separates a card from the canvas is its 1px --mgl-line border, not a
     change of ground. That is the flat look this asks for. */
  --mgl-canvas: #ffffff;
  --mgl-row: #ffffff;

  /* Geometry copied from the public site's shell (mani-shell-ltr.css) so the
     two read as one product. --mgl-pad is shared by the drawer's first group
     label and the content column, so the two columns start on the same line. */
  --mgl-rail: 60px;
  --mgl-drawer: 200px;
  --mgl-bar: 60px;
  --mgl-pad: 18px;
}

/* ── DARK ────────────────────────────────────────────────────────────────────
 * Eleven values. That is the whole theme, and it is only eleven because the
 * block above exists.
 *
 * ONE THING DELIBERATELY DOES NOT INVERT: the semantic colours keep their hue.
 * Fifteen of this stylesheet's colours are used as a background AND as a text
 * colour - the "Paid" pill is green on a green tint - so flipping them by
 * luminance turns the pill inside out. A status colour means the same thing in
 * the dark; only its INK form moves, and that pair is defined above.
 *
 * The shell does invert, and used not to - see the note beside its tokens.
 *
 * Three selectors for three states, and the order matters: bare :root is the
 * light default; the media query catches a viewer whose system is dark and who
 * has expressed no preference here, guarded so an explicit light choice still
 * wins; the attribute is the toggle and comes last so it beats both.
 *
 * NOT YET COMPLETE, and the number is worth writing down: 89 sites in this file
 * follow these tokens and 297 are still hardcoded literals. Those 297 stay
 * light. Finishing them is mechanical - most are text colours - but it is not
 * done, so this is a theme in progress, not a finished one.
 * ────────────────────────────────────────────────────────────────────────── */
/* NO prefers-color-scheme HOOK YET, AND THAT IS THE POINT.
 *
 * There was one here. It meant every customer whose operating system is set to
 * dark would have been handed this theme automatically, without asking - and
 * the theme is not finished: 89 sites in this file follow the tokens above and
 * 297 are still hardcoded literals, most of them TEXT colours. Those 297 stay
 * dark on a darkened surface, which is text you cannot read.
 *
 * So dark is opt-in only until that number reaches zero: nothing happens unless
 * something sets data-theme="dark" on the root element deliberately. When the
 * remaining literals are routed through the tokens, the media query goes back -
 * guarded as :root:not([data-theme="light"]) so an explicit light choice still
 * wins - and not one moment before.
 */

:root[data-theme="dark"] {
  color-scheme: dark;
  --mgl-page: #0a1628;
  --mgl-surface: #0f2039;
  --mgl-surface-2: #142845;
  --mgl-surface-3: #1b3355;
  --mgl-line: #1e3557;
  --mgl-line-2: #2a4570;
  --mgl-line-3: #172c4a;
  --mgl-ink: #e8eefb;
  --mgl-ink-2: #c5d3ea;
  --mgl-muted: #8ea3c4;
  --mgl-muted-2: #7d93b6;
  --mgl-link: #7cb2ff;

  /* the ink forms, lifted for a dark ground - see the note beside the light
     values. The fills above them are deliberately absent: they do not move. */
  --mgl-ok-ink:   #5fd38f;
  --mgl-warn-ink: #f0b45c;
  --mgl-bad-ink:  #ff8a94;
  --mgl-info-ink: #6ecff0;

  --mgl-strong: #1b3355;
  --mgl-strong-hover: #24446f;
  --mgl-strong-ink: #e8eefb;

  /* The shell in the dark: the navy the whole console used to wear. */
  --mgl-shell: #0b1f42;
  --mgl-shell-2: #0e2650;
  --mgl-shell-line: rgba(255, 255, 255, .08);
  --mgl-shell-ink: #eaf0fb;
  --mgl-shell-text: #b9c6de;
  --mgl-shell-muted: #7f92b4;
  --mgl-shell-hover: rgba(255, 255, 255, .06);
  --mgl-shell-accent: #5b8cff;

  /* The values the two rules carried before the light theme took them white:
     the page ground for the canvas, and the 53% mix for the rows - the ratio
     is the design and it is kept exactly. */
  --mgl-canvas: var(--mgl-page);
  --mgl-row: color-mix(in srgb, var(--mgl-surface-3) 53%, transparent);
}