/* Storixa — colour roles.
   Classy palette: #dde9da #3f4a3c #98b293 #c8ebf8 #91b4c0.
   Canvas = pale sage; ink + action = deep moss; sky/steel carry focus,
   selection and airy accents; sage tints carry chips and washes.
   Loaded LAST so its :root wins over the five partial token sets declared
   earlier in styles.css, hero-v2.5.css, homepage-unified-background.css,
   capability-detail.css and storixa-v5.css.

   Those five each defined "ink", "muted", "line" and "blue" with different
   values. Measured in OKLCH, the border tokens sat within ΔE 0.011 of each
   other and the four blues within 0.006: provably the same colour, declared
   four times. This file is the single source; the legacy names below are
   aliases, so every existing var(--x) resolves here without a rewrite.

   Notation stays hex, matching the rest of the project. Converting a
   consistent hex system to OKLCH for one pass would add a second colour
   representation, not a system. */

:root{
  /* ── Canvas and surfaces ──────────────────────────────────────────────────
     Neutrals carry a trace of the brand hue rather than sitting pure grey.
     Six pale-blue tints were rendering at once (#f3f7f2, #f5f8f4, #f5f8f5,
     #f6f9f5, #f3f7f2, #f1f6f0); they are one tint now. */
  --canvas:#eef3ea;          /* the page */
  --surface:#ffffff;         /* cards, panels, controls */
  --surface-tint:#e2ecd9;    /* sunken areas, tinted rows, chips */
  --surface-glass:rgba(255,255,255,.86);

  /* ── Text ─────────────────────────────────────────────────────────────────
     Three near-black inks were rendering (#293426, #212b1f, #364532). */
  --ink:#24301f;             /* body, default text */
  --ink-strong:#1e2b1c;      /* headings. Deeper than body by enough to read as
                                a distinct ink in greyscale (ΔL 0.043); the
                                previous #2e3829 sat 0.013 away, which the grey
                                test showed was doing nothing. */
  --muted:#56654e;           /* secondary text, captions, disclosures.
                                #5a7f52 measured APCA Lc 74 on the tint field,
                                under the Lc 75 body bar. #54764c is Lc 76. */
  --on-primary:#ffffff;

  /* ── Borders ──────────────────────────────────────────────────────────────
     Eight border colours were rendering, all the same pale blue plus white at
     0.90 and 0.91. */
  --line:#d8e3cf;            /* default hairline */
  --line-strong:rgba(228,237,226,.92);     /* emphasised edge */
  --line-glass:rgba(211,227,207,.72); /* edge on a translucent surface */
  --line-on-dark:rgba(255,255,255,.153);

  /* ── Actions ──────────────────────────────────────────────────────────────
     Four values claiming one brand: #3f4a3c, #3f4a3c, #3f4a3c, #3f4a3c.
     #3f4a3c measured 4.38:1 on the canvas, under the 4.5 floor, so it could
     never legally carry small text. Kept #3f4a3c: it is the mark, the favicon
     and the social card, and it clears 5.07:1. */
  --primary:#2e4230;
  --primary-hover:#263a28;
  /* The brand blue as TEXT on a light surface measured APCA Lc 72 on the
     canvas, under the Lc 75 body bar, while working fine as a fill. A brand
     colour used as a large fill may be lighter than the same hue used as small
     text, so the two roles split rather than darkening the mark, the favicon
     and the social card. Same hue, 0.2° drift. */
  --primary-ink:#2e4230;
  --primary-soft:#e3edda;
  --secondary-fg:#476b78;

  /* ── Action fill ──────────────────────────────────────────────────────────
     The button fill, split off from the brand blue. Measured across the page,
     every button that carried a fill was the same brand blue, sitting on a
     light surface — so the buttons read as one more blue object beside the blue
     eyebrow, the blue links and the blue selected states. The action role is the
     heading ink instead: blue stays the accent, and the button becomes the only
     dark object on the surface.
     Aliased rather than declared again — measured, it is the same colour, and a
     second declaration of one colour is what this file exists to prevent. */
  --action:var(--ink-strong);
  --action-hover:#16211a;
  --on-action:#ffffff;

  /* ── Focus ────────────────────────────────────────────────────────────────
     Three rings were in use (#b0cda9, #3f4a3c, #3f4a3c). One. 3.90:1 on white
     and 3.99:1 on the dark panel, both above the 3:1 floor for UI. */
  --focus:#4d7f95;

  /* ── Selection ───────────────────────────────────────────────────────────── */
  --selected-bg:#d5eef8;
  --selected-fg:#1f4556;

  /* ── Status ───────────────────────────────────────────────────────────────
     Success and warning existed; error and disabled did not, so the range
     warning was borrowing the warning gold and nothing styled an error. */
  --success:#10795f;
  --success-bg:#e8f6f0;
  --warning:#8a690f;
  --warning-bg:#fffaf0;
  --error:#b3261e;
  --error-bg:#fdf2f2;
  --disabled-fg:#77836f;
  --disabled-bg:#f0f3ea;

  /* ── Legacy aliases ───────────────────────────────────────────────────────
     Every name the earlier layers declared, pointed at the role it was
     reaching for. These keep existing var() usages resolving to one system. */
  --navy:var(--ink-strong);
  --green:var(--success);
  --gold:var(--warning);
  --blue:var(--primary);
  --soft-line:var(--line);
  --glass:var(--surface-glass);
  --detail-blue:var(--primary);
  --detail-ink:var(--ink);
  --detail-muted:var(--muted);
  --detail-line:var(--line);
  --unified-ink:var(--ink);
  --unified-copy:var(--muted);
  --unified-line:var(--line-glass);
  --unified-glass:var(--surface-glass);
  --v5-ink:var(--ink);
  --v5-muted:var(--muted);
  --v5-blue:var(--primary);
  --v5-line:var(--line-glass);
  --c:var(--primary-ink);
  --c-light:var(--primary-soft);
  --cap-accent:var(--primary);
  --cap-soft:var(--primary-soft);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Roles applied. A role no component uses is a declaration, not a system.
   These wire the two states the surface could enter but had no answer for.
   ───────────────────────────────────────────────────────────────────────────── */

/* Failure: a signup handoff that cannot complete. This is the only genuine
   failure path on the site, and it was styled as an informational note. */
#v5-signup-handoff[aria-disabled="true"]{cursor:not-allowed;opacity:.75}
#v5-signup-handoff[aria-disabled="true"]~.v5-inline-status{
  color:var(--error);
  background:var(--error-bg);
  border:1px solid currentColor;
  border-radius:10px;
  padding:9px 11px;
}

/* Disabled: role colours rather than a blanket opacity fade. Fading a control
   is transparency standing in for a state, and it hides the label instead of
   explaining that the action is unavailable. */
.tour-controls button:disabled{
  background:var(--disabled-bg);
  color:var(--disabled-fg);
  box-shadow:none;
  opacity:1;
}

/* Completed: the wholesale add-to-store button locks as "added", which is a
   success state, not a disabled one. It was carrying an unrelated green. */
.wholesale-product-grid button:disabled{
  background:var(--success-bg);
  color:var(--success);
  cursor:default;
}