/* ==========================================================================
   demo-skin.css — GLOBAL skin: re-skins the real fwk-* components to the
   demo-frame --demo-* tokens wherever a `:is(#fwre, .ds-skin)` wrapper is applied
   (the Components catalog, the chrome topbar/footer, and page furniture).
   Loaded on every page by _inc/head.php so themed fwk components work app-wide.
   Vendor selectors are single-class, so `:is(#fwre, .ds-skin) .fwk-*` (0,2,0) wins without
   !important except where the vendor uses it (badge colour). Everything maps to
   a token, so it re-tones with [data-theme]. SCOPED: the captured product
   galleries (never inside :is(#fwre, .ds-skin)) keep the true product look.
   Layer order: fw-uikit -> tokens -> demo-frame -> demo-pages -> THIS -> page.
   ========================================================================== */

/* — Buttons — */
:is(#fwre, .ds-skin) .fwk-button-default {
  background-color: var(--demo-surface-2);
  color: var(--demo-ink);
  border: 1px solid var(--demo-border-strong);
  border-radius: var(--demo-radius-sm);
}
:is(#fwre, .ds-skin) .fwk-button-default:hover {
  background-color: var(--demo-hover);
  border-color: var(--demo-accent);
  color: var(--demo-ink);
}
:is(#fwre, .ds-skin) .fwk-button-primary {
  background: var(--demo-gradient);
  color: var(--demo-on-accent);
  border: 1px solid transparent;
  border-radius: var(--demo-radius-sm);
}
:is(#fwre, .ds-skin) .fwk-button-secondary {
  background: var(--demo-accent-2);
  color: var(--demo-on-accent);
  border: 1px solid transparent;
  border-radius: var(--demo-radius-sm);
}
:is(#fwre, .ds-skin) .fwk-button-danger {
  background: var(--demo-accent);
  color: var(--demo-on-accent);
  border: 1px solid transparent;
  border-radius: var(--demo-radius-sm);
}
:is(#fwre, .ds-skin) .fwk-button-text,
:is(#fwre, .ds-skin) .fwk-button-link { color: var(--demo-accent); }
:is(#fwre, .ds-skin) .fwk-button-text:hover,
:is(#fwre, .ds-skin) .fwk-button-link:hover { color: var(--demo-accent-hover); }

/* — Badges & labels — */
:is(#fwre, .ds-skin) .fwk-badge {
  background: var(--demo-gradient);
  color: var(--demo-on-accent) !important;
}
:is(#fwre, .ds-skin) .fwk-label {
  background: var(--demo-surface-2);
  color: var(--demo-ink);
  border-radius: var(--demo-radius-sm);
}
:is(#fwre, .ds-skin) .fwk-label-success { background: color-mix(in srgb, var(--demo-info)   20%, var(--demo-surface)); color: var(--demo-info); }
:is(#fwre, .ds-skin) .fwk-label-warning { background: color-mix(in srgb, var(--demo-warm)   26%, var(--demo-surface)); color: var(--demo-warm); }
:is(#fwre, .ds-skin) .fwk-label-danger  { background: color-mix(in srgb, var(--demo-accent) 22%, var(--demo-surface)); color: var(--demo-accent); }

/* — Cards — */
:is(#fwre, .ds-skin) .fwk-card-default {
  background: var(--demo-surface);
  color: var(--demo-ink-muted);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius);
  box-shadow: var(--demo-shadow);
}
:is(#fwre, .ds-skin) .fwk-card-default .fwk-card-title { color: var(--demo-ink); }
:is(#fwre, .ds-skin) .fwk-card-primary {
  background: var(--demo-gradient);
  color: var(--demo-on-accent);
  border-radius: var(--demo-radius);
  box-shadow: var(--demo-shadow);
}
:is(#fwre, .ds-skin) .fwk-card-primary .fwk-card-title,
:is(#fwre, .ds-skin) .fwk-card-primary p { color: var(--demo-on-accent); }
:is(#fwre, .ds-skin) .fwk-card code {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  padding: .05em .35em;
  text-wrap: wrap;
}

/* — Tiles — */
:is(#fwre, .ds-skin) .fwk-tile { border-radius: var(--demo-radius-sm); }
:is(#fwre, .ds-skin) .fwk-tile-default   { background: var(--demo-surface);   color: var(--demo-ink); }
:is(#fwre, .ds-skin) .fwk-tile-muted     { background: var(--demo-surface-2); color: var(--demo-ink); }
:is(#fwre, .ds-skin) .fwk-tile-primary   { background: var(--demo-gradient);  color: var(--demo-on-accent); }
:is(#fwre, .ds-skin) .fwk-tile-secondary { background: var(--demo-accent-2);  color: var(--demo-on-accent); }

/* — Forms — */
:is(#fwre, .ds-skin) .fwk-input,
:is(#fwre, .ds-skin) .fwk-select,
:is(#fwre, .ds-skin) .fwk-textarea {
  background: var(--demo-bg);
  color: var(--demo-ink);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-sm);
}
:is(#fwre, .ds-skin) .fwk-input:focus,
:is(#fwre, .ds-skin) .fwk-select:focus,
:is(#fwre, .ds-skin) .fwk-textarea:focus {
  background: var(--demo-bg);
  color: var(--demo-ink);
  border-color: var(--demo-accent);
  box-shadow: var(--demo-ring);
  outline: none;
}
:is(#fwre, .ds-skin) .fwk-input::placeholder,
:is(#fwre, .ds-skin) .fwk-textarea::placeholder { color: var(--demo-ink-muted); }
:is(#fwre, .ds-skin) .fwk-form-label { color: var(--demo-ink); }
:is(#fwre, .ds-skin) .fwk-checkbox:checked,
:is(#fwre, .ds-skin) .fwk-radio:checked {
  background-color: var(--demo-accent);
  border-color: var(--demo-accent);
}

/* — Alerts (tinted surface + state-coloured edge, ink text → readable both themes) — */
:is(#fwre, .ds-skin) .fwk-alert {
  background: var(--demo-surface);
  color: var(--demo-ink);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius);
}
:is(#fwre, .ds-skin) .fwk-alert p,
:is(#fwre, .ds-skin) .fwk-alert code { color: var(--demo-ink); background: var(--demo-surface-2); }
:is(#fwre, .ds-skin) .fwk-alert-close { color: var(--demo-ink-muted); }
:is(#fwre, .ds-skin) .fwk-alert-primary { background: color-mix(in srgb, var(--demo-accent) 14%, var(--demo-surface)); border-color: color-mix(in srgb, var(--demo-accent) 45%, transparent); }
:is(#fwre, .ds-skin) .fwk-alert-success { background: color-mix(in srgb, var(--demo-info)   14%, var(--demo-surface)); border-color: color-mix(in srgb, var(--demo-info)   45%, transparent); }
:is(#fwre, .ds-skin) .fwk-alert-warning { background: color-mix(in srgb, var(--demo-warm)   16%, var(--demo-surface)); border-color: color-mix(in srgb, var(--demo-warm)   45%, transparent); }
:is(#fwre, .ds-skin) .fwk-alert-danger  { background: color-mix(in srgb, var(--demo-accent) 14%, var(--demo-surface)); border-color: color-mix(in srgb, var(--demo-accent) 45%, transparent); }

/* — Navigation (fwk-nav / breadcrumb / subnav) — */
:is(#fwre, .ds-skin) .fwk-nav-default > li > a { color: var(--demo-ink-muted); }
:is(#fwre, .ds-skin) .fwk-nav-default > li > a:hover { color: var(--demo-ink); }
:is(#fwre, .ds-skin) .fwk-nav-default > li.fwk-active > a { color: var(--demo-accent); }
:is(#fwre, .ds-skin) .fwk-nav-default .fwk-nav-sub a { color: var(--demo-ink-muted); }
:is(#fwre, .ds-skin) .fwk-nav-default .fwk-nav-sub a:hover,
:is(#fwre, .ds-skin) .fwk-nav-default .fwk-nav-sub li.fwk-active > a { color: var(--demo-accent); }
:is(#fwre, .ds-skin) .fwk-nav-default .fwk-nav-header { color: var(--demo-ink); }
:is(#fwre, .ds-skin) .fwk-nav-default .fwk-nav-divider { border-top: 1px solid var(--demo-border); }
:is(#fwre, .ds-skin) .fwk-breadcrumb > * > * { color: var(--demo-ink-muted); }
:is(#fwre, .ds-skin) .fwk-breadcrumb > :last-child > * { color: var(--demo-ink); }
:is(#fwre, .ds-skin) .fwk-subnav-pill > * > :first-child {
  background: var(--demo-surface-2);
  color: var(--demo-ink);
  border-radius: var(--demo-radius-sm);
}
:is(#fwre, .ds-skin) .fwk-subnav-pill > .fwk-active > a {
  background: var(--demo-gradient);
  color: var(--demo-on-accent);
}

/* — Tabs — */
:is(#fwre, .ds-skin) .fwk-tab::before { border-bottom-color: var(--demo-border); }
:is(#fwre, .ds-skin) .fwk-tab > * > a { color: var(--demo-ink-muted); }
:is(#fwre, .ds-skin) .fwk-tab > * > a:hover { color: var(--demo-ink); }
:is(#fwre, .ds-skin) .fwk-tab > .fwk-active > a { color: var(--demo-ink); border-color: var(--demo-accent); }

/* — Lists & accordion — */
:is(#fwre, .ds-skin) .fwk-list-divider > :nth-child(n+2) { border-top-color: var(--demo-border); }
:is(#fwre, .ds-skin) .fwk-description-list > dt { color: var(--demo-ink); }
:is(#fwre, .ds-skin) .fwk-description-list-divider > dt:nth-child(n+2) { border-top-color: var(--demo-border); }
:is(#fwre, .ds-skin) .fwk-accordion-title { color: var(--demo-ink); }
:is(#fwre, .ds-skin) .fwk-accordion-content { color: var(--demo-ink-muted); }

/* — Page-furniture helpers on standard cards (home + capability pages) — */
:is(#fwre, .ds-skin) .fwk-card-default.demo-hero-card {           /* hero = flat themed card (flat design) */
  background: var(--demo-surface);
}
:is(#fwre, .ds-skin) a.fwk-card { display: block; text-decoration: none; }   /* clickable cards */
:is(#fwre, .ds-skin) .demo-tilecard-ic { color: var(--demo-accent); display: inline-flex; margin-bottom: .35rem; }
:is(#fwre, .ds-skin) .fwk-card .fwk-card-title { margin: 0 0 .35rem; font-size: 1.02rem; }
:is(#fwre, .ds-skin) .fwk-card p { margin: 0; font-size: .85rem; color: var(--demo-ink-muted); }