/* Shared by both audiences: Bootstrap's variables bent to this project's
 * defaults, and the token contract a shop paints against.
 *
 * Loaded by the admin layout and the storefront layout alike, so nothing here
 * may assume which one it is in.
 *
 * ---------------------------------------------------------------------------
 * OWNED BY THE TEMPLATE. A shop does not edit this file.
 *
 * A clone's styling lives in brand.css, the only stylesheet it writes. Keeping
 * these identical is what makes a template update a copy rather than a merge,
 * and lib/verify/checks/stylesheets.rb fails the run when one has been edited.
 * --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   The token contract
   The names a shop sets and the template reads. Neutral values here, so an
   unstyled clone is plain rather than broken, and a new shop starts by filling
   in fifteen variables rather than rewriting components.

   Set them on :root in brand.css. Anything a shop wants that is not in this
   list is a component it is inventing, and belongs in brand.css whole.
   --------------------------------------------------------------------------- */
:root {
  /* Ink and ground */
  --shop-ink: #1a1a1a;
  --shop-ink-soft: #5b5b5b;
  --shop-paper: #ffffff;
  --shop-card: #ffffff;
  --shop-line: rgba(0, 0, 0, 0.14);

  /* Two accents, because a brand colour bright enough to be a fill is rarely
     dark enough to carry small text. --shop-accent fills; --shop-accent-aa is
     the same colour darkened until words on paper clear 4.5:1; and
     --shop-accent-ink is what sits legibly on the fill. */
  --shop-accent: #1a1a1a;
  --shop-accent-aa: #1a1a1a;
  --shop-accent-ink: #ffffff;

  /* Shape */
  --shop-radius-sm: 0.375rem;
  --shop-radius: 0.5rem;
  --shop-radius-lg: 0.75rem;
  --shop-radius-pill: 999px;
  --shop-keyline: 1px solid var(--shop-line);
  --shop-shadow: none;

  /* Type */
  --shop-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --shop-font-display: var(--shop-font-body);
}

/* ---------------------------------------------------------------------------
   Link color
   Bootstrap's default link blue reads as a stock framework and fights the
   near-black the rest of the interface uses. Overridden here rather than in
   the vendored bootstrap.min.css, which stays untouched so it can be replaced
   wholesale on an upgrade.

   Both variables are needed: a plain <a> reads --bs-link-color-rgb, while
   .nav-link, .btn-link and .page-link all derive from --bs-link-color. Setting
   only one leaves half the application blue.
   --------------------------------------------------------------------------- */
:root {
  --bs-link-color: #1a1a1a;
  --bs-link-color-rgb: 26, 26, 26;
  --bs-link-hover-color: #000000;
  --bs-link-hover-color-rgb: 0, 0, 0;
}

/* Color was doing the work of saying "this is a link" for the 58 places that
   opt out of the underline. Once it matches body text that cue is gone, so it
   comes back on hover and on keyboard focus — otherwise a link in a sentence
   is indistinguishable from the sentence.
   */
a.text-decoration-none:hover,
a.text-decoration-none:focus-visible {
  text-decoration: underline !important;
}

/* The sidebar and storefront nav sit on a light background where near-black on
   near-black gives no feedback at all. */
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--bs-link-hover-color);
  background-color: rgba(0, 0, 0, 0.04);
}