/* =============================================================================
   Loading skeleton theme tokens

   Skeletons tint from --theme-cover-rgb (same triplet as sitewide cover themes).
   To add a new cover theme, only extend theme-variables.css:
     1. body[data-cover-theme="<key>"] { --theme-cover-rgb: R, G, B; }
     2. Existing shell tokens (page, nav, home column, …)
   Do not add per-component skeleton overrides unless a one-off needs different
   contrast — adjust the mix ratios in the body {} block below.

   Tokens are defined on body (not :root) so they always resolve --theme-cover-rgb
   from the same element that carries data-cover-theme.

   Consumed by: base.css, charts.css, home.css, item-lookup.css, explore.css,
   trends.css, analysis.css, collector-insights.css
   ============================================================================= */

body {
  --theme-skeleton-overlay-bg: var(--theme-bg-page-end);

  /* Match real tab panels (home columns, chart shells) */
  --theme-skeleton-panel-bg: var(--theme-tab-surface-bg, var(--theme-bg-surface));
  --theme-skeleton-panel-border: var(--theme-tab-surface-border, var(--theme-border-default));
  --theme-skeleton-panel-shadow: var(--theme-tab-surface-shadow, none);

  --theme-skeleton-fill: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 34%,
    var(--theme-bg-surface-elevated) 66%
  );
  --theme-skeleton-fill-soft: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 22%,
    var(--theme-bg-surface-elevated) 78%
  );
  --theme-skeleton-line: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 30%,
    var(--theme-border-muted) 70%
  );

  --theme-skeleton-shimmer-start: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 16%,
    var(--theme-bg-surface-elevated) 84%
  );
  --theme-skeleton-shimmer-mid: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 48%,
    var(--theme-bg-surface-elevated) 52%
  );
  --theme-skeleton-shimmer-end: var(--theme-skeleton-shimmer-start);
  --theme-skeleton-gradient: linear-gradient(
    110deg,
    var(--theme-skeleton-shimmer-start) 0%,
    var(--theme-skeleton-shimmer-mid) 45%,
    var(--theme-skeleton-shimmer-end) 90%
  );

  --theme-skeleton-shimmer-highlight: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 52%,
    transparent
  );
  --theme-skeleton-sweep-gradient: linear-gradient(
    90deg,
    transparent 0%,
    var(--theme-skeleton-shimmer-highlight) 50%,
    transparent 100%
  );

  --theme-skeleton-accent: rgb(var(--theme-cover-rgb));
  --theme-skeleton-accent-muted: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 62%,
    transparent
  );
  --theme-skeleton-accent-line-opacity: 0.5;

  --theme-skeleton-border: rgba(var(--theme-cover-rgb), 0.28);
  --theme-skeleton-border-soft: rgba(var(--theme-cover-rgb), 0.18);
  --theme-skeleton-card-bg: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 10%,
    var(--theme-bg-analysis-toolbar, rgba(255, 255, 255, 0.05)) 90%
  );
  --theme-skeleton-card-border: var(--theme-skeleton-border-soft);
}

body.light-mode {
  --theme-skeleton-overlay-bg: var(--theme-bg-page-solid);

  --theme-skeleton-fill: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 22%,
    #e8ecf2 78%
  );
  --theme-skeleton-fill-soft: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 14%,
    #f1f5f9 86%
  );
  --theme-skeleton-line: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 20%,
    var(--theme-border-muted) 80%
  );

  --theme-skeleton-shimmer-start: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 12%,
    #f8fafc 88%
  );
  --theme-skeleton-shimmer-mid: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 32%,
    #e2e8f0 68%
  );
  --theme-skeleton-shimmer-highlight: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 40%,
    transparent
  );

  --theme-skeleton-accent-line-opacity: 0.58;
  --theme-skeleton-card-bg: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 8%,
    #f8fafc 92%
  );
  --theme-skeleton-card-border: color-mix(
    in srgb,
    rgb(var(--theme-cover-rgb)) 22%,
    #e2e8f0 78%
  );
}