/* =============================================================================
   PDP design tokens — the shared vocabulary for the product-detail template.
   =============================================================================

   Every PDP stylesheet (product-detail.css and each pdp-*.css section file)
   reads from here so the page composes as one design instead of five. Values are
   ported from the approved ECOM-first mockup:
   https://cortex.ernieball.com/pin/moderith/eb-pdp-ecom-mockup

   THREE RULES:

   1. Names are all `--pdp-*` prefixed and declared on :root. Prefixing (rather
      than scoping to .pdp) means a sticky bar or modal rendered outside the
      <article> still resolves them, with no chance of colliding with the
      site-wide tokens in resources/css.

   2. Structural tokens (ink, line, surface, radius, shadow) are literal values.
      BRAND-COLOURED roles delegate to the existing per-brand --brand-* tokens in
      resources/css/{eb,mm}/brand.css. The mockup hardcoded Slinky pink, but
      copying that would have made the PDP the only page on the site that ignores
      brand — and this template has to carry Music Man too, where the accent is
      gold and needs DARK ink on fill rather than white. Delegating means EB and
      MM both come out right with no per-brand PDP stylesheet.

   3. LIGHT MODE ONLY. Dark mode is a deliberate post-launch item. Do not add a
      prefers-color-scheme block or a theme toggle to any PDP stylesheet.

   Contrast: the neutral ramp is tuned for AA on white. --pdp-ink-3 is #6b6b75
   rather than the lighter grey it started as, because it is used at 12-13px
   where the lighter value failed. --pdp-star is a darkened amber that holds 3:1
   as a graphic. Don't lighten either without re-checking.
   ========================================================================== */

:root {
    /* --- Ink ramp ------------------------------------------------------- */
    --pdp-ink: #161619;              /* headings, price, primary copy */
    --pdp-ink-2: #4e4e58;            /* secondary copy, labels */
    --pdp-ink-3: #6b6b75;            /* meta, captions — AA at 12px, see above */

    /* --- Surfaces ------------------------------------------------------- */
    --pdp-bg: #ffffff;
    --pdp-bg-alt: #f5f5f8;           /* section bands, inset panels */
    --pdp-card: #ffffff;
    --pdp-stage: var(--brand-pdp-stage, linear-gradient(180deg, #fcfcfe, #f0f0f5)); /* product-photo stage */
    /* The stage's frame. A brand whose photos carry their own white ground
       (Music Man's) opts out with --brand-pdp-stage-*, or the frame reads as a
       grey border around every photo (Shelly, 2026-09-28). */
    --pdp-stage-line: var(--brand-pdp-stage-line, #e4e4ea);
    --pdp-stage-shadow: var(--brand-pdp-stage-shadow, 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05));

    /* --- Lines ---------------------------------------------------------- */
    --pdp-line: #e4e4ea;             /* hairlines, table rules */
    --pdp-line-2: #c9c9d4;           /* control borders, unselected swatches */

    /* --- Status --------------------------------------------------------- */
    /* Ink on its own soft fill must clear 4.5:1 as TEXT, because the
       availability box and restock notice set copy in these. #067a41 on
       #e6f6ed was 4.86:1 and the detail line sat at 90% opacity under that
       (WAVE, 2026-09-01). Darkened to 6.7:1 / 6.9:1; PdpStatusContrastTest
       recomputes both from this file. */
    --pdp-ok: #046236;
    --pdp-ok-soft: #e6f6ed;
    --pdp-warn: #7a4900;
    --pdp-warn-soft: #fff4e2;

    /* --- Ratings -------------------------------------------------------- */
    --pdp-star: #c8790a;
    --pdp-star-off: #c9c9d4;

    /* --- Brand roles (delegated — see rule 2) --------------------------- */
    --pdp-accent: var(--brand-primary);                    /* borders, selected state, fills */
    --pdp-accent-hover: var(--brand-primary-hover);
    --pdp-accent-ink: var(--brand-link);                   /* brand colour for TEXT (AA) */
    --pdp-accent-ink-hover: var(--brand-link-hover);
    --pdp-accent-fill: var(--brand-primary-fill);          /* CTA background (AA vs on-accent) */
    --pdp-accent-fill-hover: var(--brand-primary-fill-hover);
    --pdp-on-accent: var(--brand-on-primary);              /* text ON an accent fill */
    --pdp-accent-soft: rgba(var(--brand-primary-rgb), 0.10); /* tints, selected backgrounds */

    /* --- Focus ---------------------------------------------------------- */
    --pdp-focus: #1e6bff;            /* deliberately NOT brand — must read as a
                                        focus ring, not as a selected state */

    /* --- Type ----------------------------------------------------------- */
    --pdp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* --- Geometry ------------------------------------------------------- */
    --pdp-radius: 14px;
    --pdp-radius-sm: 9px;
    --pdp-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);
    --pdp-maxw: 1180px;

    /* --- Spacing scale (section rhythm) --------------------------------- */
    --pdp-gap-xs: 6px;
    --pdp-gap-sm: 10px;
    --pdp-gap: 16px;
    --pdp-gap-lg: 26px;
    --pdp-section-y: 44px;           /* vertical space between below-fold sections */
}

/* Every below-fold section wrapper the registry emits. Keeps the rhythm in one
   place so a new section inherits spacing without touching its own stylesheet. */
.pdp__section {
    margin-top: var(--pdp-section-y);
}

/* Wide content (spec tables, gauge tables, swatch grids, cross-sell rails) must
   scroll inside its own container. The page body must never scroll sideways. */
.pdp__scroller {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}