/* ============================================================================
   SKINT — the product layer
   ----------------------------------------------------------------------------
   Everything structural comes from `revbydesign-docs`, the shared RevByDesign
   skin, which this file is loaded after so that it wins.

   Keep this file small. The sibling sites each carried ~560 lines of hand-copied
   skin that drifted apart from one another; the shared package exists so that
   cannot happen again. What belongs here is the accent and anything genuinely
   specific to SKINT's own pages — nothing else.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. The accent
   ----------------------------------------------------------------------------
   Violet — surface, theming, skin. Not chosen here: this is the value SKINT
   already carries on revbydesign.studio's work index, read from
   `src/styles/products.css`, so the product page and its documentation cannot
   disagree about what colour SKINT is.

   Verified as link text against the page background, computed rather than
   inherited from a sibling:

     light  #6f4493 on #fbfbfa  6.94:1
     dark   #b98ed6 on #0d0e10  7.27:1

   and as ink drawn on the accent itself:

     light  #ffffff on #6f4493  7.18:1
     dark   #130a1b on #b98ed6  7.27:1

   All four clear WCAG AA for normal text (4.5:1) with room to spare, which
   matters more than usual on a site documenting a theming tool that ships its
   own contrast test.
   ------------------------------------------------------------------------- */

:root {
  --rbd-accent-light: #6f4493;
  --rbd-accent-dark: #b98ed6;
  --rbd-accent-ink-light: #ffffff;
  --rbd-accent-ink-dark: #130a1b;
}

/* ----------------------------------------------------------------------------
   2. Components
   ----------------------------------------------------------------------------
   Used by docs/index.md only. The `skint-` prefix matches the estate's habit of
   prefixing per product (`snap-`, `rf-`); renaming either way buys nothing and
   would mean editing markdown to achieve a restyle.
   ------------------------------------------------------------------------- */

.md-typeset .skint-grid {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.md-typeset .skint-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.md-typeset .skint-card {
  padding: 1.1rem 1.2rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--rbd-line, var(--md-default-fg-color--lightest));
  border-radius: var(--rbd-radius, 2px);
  transition: border-color 120ms cubic-bezier(0.2, 0, 0.1, 1);
}

.md-typeset .skint-card:hover {
  border-color: var(--rbd-accent, var(--md-accent-fg-color));
}

.md-typeset .skint-card h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.md-typeset .skint-card > :last-child {
  margin-bottom: 0;
}

.md-typeset .skint-docs-intro {
  padding: 1.1rem 1.3rem;
  background: var(--rbd-bg-sunken, var(--md-code-bg-color));
  border: 1px solid var(--rbd-line, var(--md-default-fg-color--lightest));
  border-radius: var(--rbd-radius, 2px);
}

.md-typeset .skint-docs-intro > :last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   3. Screenshots
   ----------------------------------------------------------------------------
   A bare capture of a dark Unity editor window sitting on a light page has no
   edge, so it bleeds into the paper. A hairline gives it one, in the same
   language as the cards above.
   ------------------------------------------------------------------------- */

.md-typeset img[src*='/img/'] {
  border: 1px solid var(--rbd-line, var(--md-default-fg-color--lightest));
  border-radius: var(--rbd-radius, 2px);
}