/* ============================================================================
 * Mycelium One — base token layer.
 *
 * Loaded FIRST by every template, so a per-surface stylesheet that redeclares a
 * token still wins. That order is load-bearing: portal-theme.css carries its own
 * --mln-bg and --mln-surface, and moving these declarations ahead of it is what
 * keeps the portal looking as it does.
 *
 * These tokens were declared only in mln-directory.css, which the portal template
 * does not load — so --mln-accent and --mln-shadow-sm resolved to nothing there and
 * every declaration reading them was dropped as invalid. A token referenced by a
 * shared include MUST be declared here rather than in the stylesheet of whichever
 * surface happened to need it first.
 * ==========================================================================*/
:root {
    --mln-primary: #00594c;
    --mln-primary-700: #04463b;
    --mln-accent: #bc4e2c;
    --mln-ink: #132420;
    --mln-muted: #5c6b65;
    --mln-faint: #93a099;
    --mln-bg: #f4f7f5;
    --mln-surface: #ffffff;
    --mln-surface-2: #eef3f0;
    --mln-line: #e3ebe7;
    --mln-line-2: #d6e0db;
    --mln-shadow-sm: 0 1px 2px rgba(19,36,32,.06), 0 1px 3px rgba(19,36,32,.08);
    --mln-shadow-md: 0 4px 14px rgba(19,36,32,.10);
    --mln-shadow-lg: 0 10px 34px rgba(19,36,32,.16);
    --mln-r: 14px;
    --mln-r-sm: 10px;
    --mln-r-pill: 999px;
    /* Mycelium view: side-panel width. The zoom cluster offsets by this so it
       lands at the bottom-right of the GRAPH rather than under the panel. */
    --mln-net-side-w: 260px;
    --mln-disp: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mln-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Keyboard focus indicator. 2px of the darkest brand green reaches 3:1 against
       every surface in the light palette; the theme's own mint ring does not. */
    --mln-focus-ring: 2px solid #00594c;

    /* ---- The four onboarding moves ----------------------------------------
       Each move owns a hue, carried through its sidebar row, progress bar, step
       header and the matching block on portal Home.

       TWO tokens per move, and they are not interchangeable:
         --mln-move-<m>       the brand hue. Fills, progress bars, borders,
                              badges, and text at 24px+ only.
         --mln-move-<m>-ink   the same hue darkened until small text on
                              --mln-bg clears WCAG AA (4.5:1).
       Measured against #f7f8f4: the brand explore/experience/learn hues land at
       4.25 / 4.46 / 3.33:1, so a label set in them is unreadable to some
       readers. Small text MUST use the -ink token.
         --mln-move-<m>-wash  tint for a block background the hue sits on. */
    --mln-move-connect:         #025a4d;
    --mln-move-connect-ink:     #025a4d;   /* 7.65:1 — the brand hue already passes */
    --mln-move-connect-wash:    #e4efec;

    --mln-move-explore:         #3e8452;
    --mln-move-explore-ink:     #2f6b40;   /* 5.97:1 */
    --mln-move-explore-wash:    #e6f1e9;

    --mln-move-experience:      #bd5230;
    --mln-move-experience-ink:  #9e4526;   /* 5.91:1 */
    --mln-move-experience-wash: #f7e9e3;

    --mln-move-learn:           #c67337;
    --mln-move-learn-ink:       #8a5020;   /* 6.06:1 */
    --mln-move-learn-wash:      #faeee2;

    /* ---- Activation ------------------------------------------------------
       Mint. Reserved for the donate block and threshold moments; it is loud on
       purpose and MUST NOT become a general-purpose accent. As a background
       only — mint on white is 1.4:1, so any text over it uses -ink. */
    --mln-activation:      #83ffc7;
    --mln-activation-ink:  #06603a;
    --mln-activation-wash: #d9ffe9;

    /* ---- Stone-beige border ramp + grounds -------------------------------
       The prototype's structural neutrals. --mln-line / --mln-line-2 above stay
       for the directory; these are the portal chrome's warmer equivalents. */
    --mln-stone:        #d3d1be;
    --mln-stone-soft:   #e2e0d1;
    --mln-stone-strong: #b8b6a4;
    --mln-ground:        #f7f8f4;   /* warm white — the portal page ground */
    --mln-ground-raised: #ecf2f2;   /* ice white — a card lifted off it */
}

/* The move hues are tuned for a light ground. On the dim and dark schemes the
   -ink variants invert: a darkened hue disappears into the surface, so text
   takes the LIGHTER end and the wash becomes a low-alpha tint of the hue. */
.mln-scheme-dark, .mln-scheme-dim {
    --mln-move-connect-ink:     #6fc2ae;
    --mln-move-explore-ink:     #8dd69e;
    --mln-move-experience-ink:  #e5a58d;
    --mln-move-learn-ink:       #f4a261;
    --mln-move-connect-wash:    rgba(111, 194, 174, .12);
    --mln-move-explore-wash:    rgba(141, 214, 158, .12);
    --mln-move-experience-wash: rgba(229, 165, 141, .12);
    --mln-move-learn-wash:      rgba(244, 162,  97, .12);
    --mln-activation-ink:       #83ffc7;
    --mln-activation-wash:      rgba(131, 255, 199, .12);
    --mln-stone:        #3b3f34;
    --mln-stone-soft:   #2e3228;
    --mln-stone-strong: #4c5142;
}

/* The two chrome grounds follow the scheme, and the two schemes differ, so they
   cannot share the block above. */
.mln-scheme-dark { --mln-ground: #14170f; --mln-ground-raised: #1c2018; }
.mln-scheme-dim  { --mln-ground: #2b2a26; --mln-ground-raised: #33322d; }

/* Mint on a dark ground, because the dark green disappears into it. */
.mln-scheme-dark, .mln-scheme-dim { --mln-focus-ring: 2px solid #66bfb2; }

/*
  The one focus indicator for the whole product (WCAG 2.2 SC 2.4.7).

  !important is required, not defensive: the Diamond theme sets `outline: none` on
  `body .ui-button` unconditionally and again on `body .ui-button.ui-state-focus`,
  substituting a box-shadow ring that several controls — the selectOneMenu widget
  and the topbar buttons among them — never receive, leaving them with no indicator
  at all. Specificity alone cannot reach every one of those selectors from a single
  rule, and per-component patches are how the gap opened in the first place.

  A component MUST NOT clear `outline` without providing a replacement.
:focus-visible {
    outline: var(--mln-focus-ring) !important;
    outline-offset: 2px !important;
}
*/