/*
  render-greyscale-skeleton.css — the default Render layer
  token map aligned to BU-CORE-UIUX-001 §4.1, 2026-07-04 (R3 repair)
  ===========================================================================
  Fires when no data-theme is set, when a skin fails to load, or when the
  skeleton skin is explicitly selected (D-TPL-SHIP-03). This is the required
  default state of a freshly scaffolded application, not an error condition.

  Token law (D-TPL-PLUMB-02 / D-TPL-TOK-03): every custom property here uses
  the --theme- prefix exclusively. No --bu- or --vd- prefix appears anywhere
  in this file (those prefixes are retired; see Rules/DeprecatedTerms.md).
  This is the ONLY file in the template permitted to contain color literals
  (hex values) — see D-TPL-TOK-03.

  Complete-assignment-or-refuse (D-TPL-TOK-02): every semantic token category
  is assigned here — surfaces, text roles, interactive states, feedback
  colors, elevation/glass effects, spacing/typography scale. No partial
  assignment.

  R3 MIGRATION (2026-07-04): this file previously used a pre-§4.1 dialect
  (--theme-canvas, --theme-surface, --theme-accent, --theme-success/warning/
  danger/info, etc.) that predates the BU-CORE-UIUX-001 §4.1 required token
  map. Migrated to canonical names the same way the Admin sibling file
  (BeltUp.Web.Admin/wwwroot/css/skins/render-greyscale-skeleton.css) was
  migrated 2026-07-03, using the identical value set (this skin's light/grey
  palette is shared across every BU ecosystem product per Part 1/2 of canon).
  Old name -> canonical name map applied throughout this file:
    --theme-canvas            -> --theme-bg-canvas
    --theme-surface           -> --theme-bg-surface
    --theme-surface-raised    -> --theme-bg-card
    --theme-surface-sunken    -> --theme-x-bg-sunken
    --theme-border            -> --theme-border-inactive
    --theme-border-strong     -> --theme-border-active
    --theme-text-primary      -> --theme-text-main
    --theme-text-secondary    -> --theme-x-text-secondary
    --theme-text-muted        -> --theme-text-muted (unchanged, already canonical)
    --theme-text-inverse      -> --theme-x-text-inverse
    --theme-text-disabled     -> --theme-x-text-disabled
    --theme-accent            -> --theme-accent-primary
    --theme-accent-hover      -> --theme-x-accent-hover
    --theme-accent-active     -> --theme-x-accent-active
    --theme-accent-disabled   -> --theme-x-accent-disabled
    --theme-accent-text       -> --theme-x-accent-text
    --theme-focus-ring        -> --theme-x-focus-ring
    --theme-success           -> --theme-state-healthy
    --theme-warning           -> --theme-state-warning
    --theme-danger            -> --theme-state-error
    --theme-info              -> --theme-x-state-info
    --theme-elevation-1/2/3   -> --theme-x-elevation-1/2/3
    --theme-glass-tint        -> --theme-x-glass-tint
    --theme-glass-blur        -> --theme-backdrop-blur
    --theme-font-family-base  -> --theme-x-font-family-base
    --theme-font-size-*       -> --theme-x-font-size-*
    --theme-line-height-base  -> --theme-x-line-height-base
    --theme-space-unit        -> --theme-x-space-unit
  §4.1-required tokens with no prior equivalent (--theme-bg-frosted,
  --theme-accent-secondary, --theme-accent-glow, --theme-accent-glow-secondary)
  are added below per the Admin reference's derivation notes so this file has
  no omissions against the required token map.

  LIGHT default: the owner's approved reference render (BeltUp Online,
  legacy-v1 branch, bu-skin-skeleton.css — the "ironed-out" skeleton verified
  live at the owner's own localhost:5087) uses a clean white/light-grey
  palette. Values below are that reference's token values, carried forward
  unchanged from the pre-migration version of this file (only names changed,
  not values): --bu-bg-app #f4f4f4 -> --theme-bg-canvas; --bu-surface-slab
  #ffffff -> --theme-bg-surface; --bu-border-base #dddddd -> --theme-border-inactive;
  --bu-text-main #222222 -> --theme-text-main; --bu-text-muted #666666
  -> --theme-x-text-secondary/--theme-text-muted; --bu-status-active #222222
  (high-contrast ink, not a hue) -> --theme-accent-primary. The reference's dark
  "stress test" override block (.skin-dojo-dark) and its Fight Night token
  pair are harvested as SKIN DATA for a future dark/brand render, NOT
  shipped as any default here — see BUP-SRS-001-S07 revision log.

  Selector scope note: the data-theme attribute is set on the document root
  element (<html>) in App.razor, so these rules key off :root[data-theme=...]
  directly — matching CSS :root semantics (the html element). Do not move
  data-theme onto a nested element; :root will not match a descendant.
  ===========================================================================
*/

:root[data-theme="greyscale"] {
  /* --- Surfaces ---------------------------------------------------------- */
  --theme-bg-canvas: #f4f4f4;
  --theme-bg-surface: #ffffff;
  --theme-bg-frosted: var(--theme-bg-surface); /* alias — dialect has no distinct frosted-fill token; §4.1 requires this name, value derived from bg-surface */
  --theme-bg-card: #ffffff;
  --theme-x-bg-sunken: #f4f4f4;
  --theme-border-inactive: #dddddd;
  --theme-border-active: #222222;

  /* --- Text roles ---------------------------------------------------------
     --theme-text-muted contrast against --theme-bg-canvas MUST be >= 4.5:1. */
  --theme-text-main: #222222;
  --theme-x-text-secondary: #444444;
  --theme-text-muted: #666666;
  --theme-x-text-inverse: #ffffff;
  --theme-x-text-disabled: #999999;

  /* --- Interactive states -------------------------------------------------
     --theme-accent-primary is for interactive highlights only — never body text.
     High-contrast ink (not a hue) per the reference's --bu-status-active. */
  --theme-accent-primary: #222222;
  --theme-accent-secondary: var(--theme-accent-primary); /* alias — no distinct secondary accent hue exists in sources; §4.1 requires this name */
  --theme-x-accent-hover: #000000;
  --theme-x-accent-active: #444444;
  --theme-x-accent-disabled: #999999;
  --theme-x-accent-text: #ffffff;
  --theme-x-focus-ring: #222222;

  /* --- Feedback colors ----------------------------------------------------
     Greyscale skeleton expresses feedback states as distinct greys only;
     brand skins assign true color here. */
  --theme-state-healthy: #444444;
  --theme-state-warning: #666666;
  --theme-state-error: #222222;
  --theme-x-state-info: #666666;

  /* --- Elevation / glass effects ------------------------------------------ */
  --theme-x-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --theme-x-elevation-2: 0 2px 8px rgba(0, 0, 0, 0.1);
  --theme-x-elevation-3: 0 8px 24px rgba(0, 0, 0, 0.14);
  --theme-accent-glow: 0 8px 24px rgba(0, 0, 0, 0.14); /* derived — same glow value as --theme-x-elevation-3 (measured/authored glow shadow); §4.1 requires this name */
  --theme-accent-glow-secondary: 0 8px 24px rgba(0, 0, 0, 0.14); /* derived — no distinct secondary glow exists in sources; aliased to primary glow value */
  --theme-x-glass-tint: rgba(255, 255, 255, 0.85);
  --theme-backdrop-blur: 10px;

  /* --- Spacing / typography scale ----------------------------------------
     Structural sizing already lives in the Primer as structural tokens; this
     scale exists so a Render layer can express type-role sizing without
     ever touching the Primer's structural values. */
  --theme-x-font-family-base: system-ui, sans-serif;
  --theme-x-font-size-sm: 0.875rem;
  --theme-x-font-size-base: 1rem;
  --theme-x-font-size-lg: 1.25rem;
  --theme-x-font-size-xl: 1.75rem;
  --theme-x-line-height-base: 1.5;
  --theme-x-space-unit: 0.5rem;
}

/* Applies the token set to the page. Structural rules remain in the Primer;
   this block only assigns appearance via the tokens above. */
:root[data-theme="greyscale"] body {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] a {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] h1,
:root[data-theme="greyscale"] h2,
:root[data-theme="greyscale"] h3,
:root[data-theme="greyscale"] h4,
:root[data-theme="greyscale"] h5,
:root[data-theme="greyscale"] h6 {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] p,
:root[data-theme="greyscale"] li {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="greyscale"] .bu-panel {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-inactive);
  box-shadow: var(--theme-x-elevation-1);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-rail {
  background-color: var(--theme-x-glass-tint);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
  border-bottom: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

/* WT-0915-009 — the Dojo's fixed bottom tab bar had no skin rule at all, so it
   was transparent (rgba(0,0,0,0)) and page text and the footer showed through
   under its labels. It is the header rail's bottom counterpart, so it wears the
   rail's own recipe, mirrored (border on top). Existing tokens only: no new
   colour identity. */
:root[data-theme="greyscale"] .bu-tab-bar {
  background-color: var(--theme-x-glass-tint);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

/* .bu-soffit doubles as the page footer region (harvested pattern: two-column
   footer — primary label left, secondary/utility link right). */
:root[data-theme="greyscale"] .bu-soffit {
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-muted);
  font-size: var(--structure-text-sm, 0.875rem);
}

:root[data-theme="greyscale"] .bu-soffit a {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-soffit a:hover {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-brick {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="greyscale"] .bu-hero-label,
:root[data-theme="greyscale"] .bu-hero-lede {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-hero-headline {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-metric {
  background-color: var(--theme-x-bg-sunken);
  border: 1px solid var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-metric-value {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-metric-label {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-transom {
  background-color: var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-mullion {
  background-color: var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-control {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-control:hover {
  background-color: var(--theme-x-accent-hover);
  color: var(--theme-x-text-inverse);
}

:root[data-theme="greyscale"] .bu-control:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring);
  outline-offset: 2px;
}

/* --- Nav -------------------------------------------------------------------
   Fixed header, logo left, link row centered, CTA action right — harvested
   pattern (owner's reference, verified live at localhost:5087). */
:root[data-theme="greyscale"] .bu-nav-brand {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-nav-links a {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="greyscale"] .bu-nav-links a:hover,
:root[data-theme="greyscale"] .bu-nav-links a.active {
  color: var(--theme-text-main);
}

/* --- Buttons ---------------------------------------------------------------
   .bu-btn = primary solid, high-contrast. .bu-btn-secondary = bordered,
   transparent fill (BENTO-CORE button inventory). */
:root[data-theme="greyscale"] .bu-btn {
  background-color: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  color: var(--theme-x-accent-text);
}

:root[data-theme="greyscale"] .bu-btn:hover {
  background-color: var(--theme-x-accent-hover);
  border-color: var(--theme-x-accent-hover);
}

:root[data-theme="greyscale"] .bu-btn:disabled {
  background-color: var(--theme-x-accent-disabled);
  border-color: var(--theme-x-accent-disabled);
  color: var(--theme-x-text-disabled);
}

:root[data-theme="greyscale"] .bu-btn-secondary {
  background-color: transparent;
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-btn-secondary:hover {
  border-color: var(--theme-x-accent-hover);
  color: var(--theme-x-accent-hover);
}

:root[data-theme="greyscale"] .bu-btn:focus-visible,
:root[data-theme="greyscale"] .bu-btn-secondary:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring);
  outline-offset: 2px;
}

/* --- Forms ------------------------------------------------------------------ */
:root[data-theme="greyscale"] .bu-field label {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="greyscale"] .bu-field input[type="text"],
:root[data-theme="greyscale"] .bu-field input[type="email"],
:root[data-theme="greyscale"] .bu-field input[type="tel"],
:root[data-theme="greyscale"] .bu-field input[type="password"],
:root[data-theme="greyscale"] .bu-field input[type="number"],
:root[data-theme="greyscale"] .bu-field select,
:root[data-theme="greyscale"] .bu-field textarea,
:root[data-theme="greyscale"] input.bu-input,
:root[data-theme="greyscale"] select.bu-input,
:root[data-theme="greyscale"] textarea.bu-input {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-field input:focus-visible,
:root[data-theme="greyscale"] .bu-field select:focus-visible,
:root[data-theme="greyscale"] .bu-field textarea:focus-visible,
:root[data-theme="greyscale"] .bu-input:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring);
  outline-offset: 1px;
  border-color: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-field-error {
  color: var(--theme-state-error);
}

:root[data-theme="greyscale"] .bu-gate {
  background-color: var(--theme-x-glass-tint);
  backdrop-filter: blur(var(--theme-backdrop-blur));
}

/* ===========================================================================
   HARVESTED COMPONENT COLORS — appearance for the reference-skeleton shapes
   added to the Primer this session. Tokens only; shapes live in the Primer.
   =========================================================================== */

:root[data-theme="greyscale"] .bu-text-muted {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-panel-title,
:root[data-theme="greyscale"] .bu-corner-title,
:root[data-theme="greyscale"] .bu-command-title,
:root[data-theme="greyscale"] .bu-section-heading,
:root[data-theme="greyscale"] .bu-panel-headline,
:root[data-theme="greyscale"] .bu-media-title,
:root[data-theme="greyscale"] .bu-pillar-title {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-panel-sublabel,
:root[data-theme="greyscale"] .bu-command-label,
:root[data-theme="greyscale"] .bu-panel-footnote,
:root[data-theme="greyscale"] .bu-media-label,
:root[data-theme="greyscale"] .bu-pillar-label,
:root[data-theme="greyscale"] .bu-corner-label,
:root[data-theme="greyscale"] .bu-gauge-label {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-pillar-body,
:root[data-theme="greyscale"] .bu-corner-body,
:root[data-theme="greyscale"] .bu-media-lede {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-gauge-value {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-gauge svg .bg {
  stroke: var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-gauge svg .fg {
  stroke: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-progress-track {
  background-color: var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-track-hard {
  background-color: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-media-frame {
  background-color: var(--theme-x-bg-sunken);
  border: 1px solid var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-play-circle {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-play-icon {
  fill: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-badge-tag {
  background-color: var(--theme-x-bg-sunken);
  border: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-metric-cell-bordered {
  border-left: 1px solid var(--theme-border-inactive);
  border-right: 1px solid var(--theme-border-inactive);
}

@media (max-width: 720px) {
  :root[data-theme="greyscale"] .bu-metric-cell-bordered {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--theme-border-inactive);
    border-bottom: 1px solid var(--theme-border-inactive);
  }
}

:root[data-theme="greyscale"] .bu-slat {
  background-color: var(--theme-x-bg-sunken);
  border: 1px solid var(--theme-border-inactive);
  border-radius: 4px;
}

:root[data-theme="greyscale"] .bu-slat-level {
  color: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-slat-info p {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-status-dot {
  background-color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-status-dot.is-active {
  background-color: var(--theme-state-healthy);
  box-shadow: 0 0 8px var(--theme-state-healthy);
}

:root[data-theme="greyscale"] .bu-status-dot.is-alert {
  background-color: var(--theme-state-error);
  box-shadow: 0 0 8px var(--theme-state-error);
}

:root[data-theme="greyscale"] .bu-link-stealth {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-link-stealth:hover {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-nav-brand span {
  color: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-footer {
  border-top: 2px solid var(--theme-border-inactive);
  background-color: var(--theme-bg-surface);
}

:root[data-theme="greyscale"] .bu-footer-heading {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-footer-copyright {
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-footer-lab-link {
  color: var(--theme-text-muted);
}

/* ===========================================================================
   LOCKER ROOM GAME-PROGRESS SCREEN — appearance for the 2026-07-09 rebuild
   shapes added to the Primer this pass (HUD header, skill path connector,
   compact rank rail, quest/skill callout medallions). Greyscale-first per
   the ruling: state is still expressed via fill/opacity/icon everywhere, not
   a new hue — these rules only assign the neutral tokens already defined
   above so nothing renders unstyled default black/transparent.
   =========================================================================== */

:root[data-theme="greyscale"] .bu-locker-hud-school {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-locker-hud-rank-label {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-rank-chip-name {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-rank-ladder .bu-rank-chip[data-achieved="false"] {
  opacity: 0.6;
}

/* Skill path connector rail + per-tier tick marks. */
:root[data-theme="greyscale"] .bu-skill-tree::before,
:root[data-theme="greyscale"] .bu-skill-tier::before {
  background-color: var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-callout-face {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-callout-face:hover {
  border-color: var(--theme-border-active);
}

:root[data-theme="greyscale"] .bu-callout[data-variant="skill-node"][data-state="unlocked"] .bu-callout-face {
  border-color: var(--theme-border-active);
}

:root[data-theme="greyscale"] .bu-callout-popover {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-active);
  box-shadow: var(--theme-x-elevation-2);
  color: var(--theme-text-main);
}

/* ===========================================================================
   GHOST LOCKER MOCKUP REBUILD (2026-07-10) — avatar status-ring, momentum
   bar, achievement medallions. Greyscale primer: the momentum bar's
   two-stop gradient (Iteration 2 item 3 — "primer carries the two-stop
   gradient BOUND TO current/next rank as tokens; greyscale primer uses two
   grey stops") is literally two grey stops here; a skin overrides the
   gradient stops (and the avatar ring color) to the current/next belt
   colors without touching this file.
   =========================================================================== */

:root[data-theme="greyscale"] .bu-locker-avatar-slot {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-momentum-track {
  background-color: var(--theme-x-bg-sunken);
  border: 1px solid var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-momentum-fill {
  background: linear-gradient(90deg, var(--theme-text-muted), var(--theme-border-active));
}

:root[data-theme="greyscale"] .bu-momentum-endpoint-current,
:root[data-theme="greyscale"] .bu-momentum-endpoint-next {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-momentum-percent {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-momentum-stat {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-achievement-medallion {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-achievement-medallion[data-locked="true"] {
  border-style: dashed;
  color: var(--theme-text-muted);
}