/**
 * Studio Hub — tokens (split from studio-hub.css).
 * @package YOOAdmin_Studio_Hub
 */

/**
 * Studio Hub — dashboard + submenu popup (scoped to active theme body class).
 * Accent uses --ysh-brand from inline theme vars; falls back to --yooadmin-primary.
 */

body.yooadmin-theme-yooadmin-studio-hub {
  --ysh-layout-max: 1400px;
  --ysh-brand: var(--yooadmin-brand-source, var(--yooadmin-primary, #eda934));
  --ysh-breadcrumbs-elev: 0 2px 8px rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.04);
  --ysh-radius: 14px;
  --ysh-surface: #f6f7f8;
  --ysh-card: #ffffff;
  --ysh-text: #1f2933;
  /* Heading / muted: light shell follows Theme Colors via print_studio_hub_shell_color_bridge; fallbacks match dashboard */
  --ysh-heading: var(--yooadmin-text-600, #5d5d5d);
  --ysh-muted: var(--yooadmin-text-500, #555555);
  --ysh-border: rgba(0, 0, 0, 0.06);
  --ysh-border-subtle: rgba(0, 0, 0, 0.04);
  --ysh-icon-well: color-mix(in srgb, var(--yooadmin-brand-source, var(--ysh-brand, #eda934)) 12%, transparent);
  /* Depth tokens (soft elevation — borders stay hairline / invisible on cards) */
  --ysh-elev-hairline: 0 0 0 1px rgba(0, 0, 0, 0.045);
  --ysh-elev-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.035);
  --ysh-elev-2: 0 1px 2px rgba(0, 0, 0, 0.045), 0 4px 18px rgba(0, 0, 0, 0.06), 0 14px 42px rgba(0, 0, 0, 0.04);
  --ysh-elev-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --ysh-card-raised: var(--ysh-card);
  --ysh-tile-bg: color-mix(in srgb, var(--ysh-card) 90%, var(--ysh-surface) 10%);
  /* Beat yp-dashboard.css :root --yp-surface (light #f8fafd) on .yp-icon-tile tiles */
  --yp-surface: var(--ysh-tile-bg);
  --yooadmin-surface: var(--ysh-surface);
}

html[data-yooadmin-studio-color-mode-effective="dark"] body.yooadmin-theme-yooadmin-studio-hub {
  --ysh-dark-brand: color-mix(in srgb, var(--yooadmin-brand-source, #eda934) 88%, #c9a15a 12%);
  --ysh-brand: var(--ysh-dark-brand);
  --yooadmin-primary: var(--ysh-dark-brand);
  --yp-primary: var(--ysh-dark-brand);
  --_yp-primary: var(--ysh-dark-brand);
  --_yp-primary-600: color-mix(in srgb, var(--ysh-dark-brand) 88%, #000 12%);
  --_yp-primary-700: color-mix(in srgb, var(--ysh-dark-brand) 78%, #000 22%);
  --yp-yoo-btn-primary: var(--ysh-dark-brand);
  --yp-primary-rgb: var(--ysh-brand-rgb);
  --ysh-brand-badge-bg: color-mix(in srgb, var(--ysh-brand, #eda934) 84%, #5b4630 16%);
  --ysh-brand-soft-text: color-mix(in srgb, var(--ysh-brand, #eda934) 42%, #ffffff 58%);
  --ysh-brand-soft-bg: rgba(var(--ysh-brand-rgb, 233, 168, 57), 0.12);
  --ysh-brand-soft-bg-strong: rgba(var(--ysh-brand-rgb, 233, 168, 57), 0.15);
  --ysh-brand-soft-border: rgba(var(--ysh-brand-rgb, 233, 168, 57), 0.32);
  --ysh-breadcrumbs-elev: 0 3px 12px rgba(0, 0, 0, 0.28), 0 8px 22px rgba(0, 0, 0, 0.18);
  --ysh-surface: #121418;
  --ysh-card: #1a1d23;
  /* Readable hierarchy — not pure white, WCAG-friendly on #1a1d23 cards */
  --ysh-text: #d0d7df;
  --ysh-heading: #dfe4ea;
  --ysh-muted: #9eb0bd;
  --ysh-label: #b0becb;
  --ysh-field-label: #c2ccd6;
  /* Bridge legacy YOOAdmin vars (yp-admin-core defaults to #646970). */
  --yp-text: var(--ysh-text);
  --yp-text-primary: var(--ysh-heading);
  --yp-text-secondary: var(--ysh-muted);
  --yp-text-600: var(--ysh-heading);
  --yp-text-500: var(--ysh-muted);
  --yp-card-bg: var(--ysh-card);
  --ysh-border: rgba(255, 255, 255, 0.08);
  --ysh-border-subtle: rgba(255, 255, 255, 0.05);
  --ysh-icon-well: color-mix(in srgb, var(--ysh-brand, #eda934) 18%, transparent);
  --ysh-elev-hairline: 0 0 0 1px rgba(255, 255, 255, 0.07);
  --ysh-elev-1: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 10px rgba(0, 0, 0, 0.22);
  --ysh-elev-2: 0 2px 8px rgba(0, 0, 0, 0.34), 0 10px 32px rgba(0, 0, 0, 0.38), 0 28px 60px rgba(0, 0, 0, 0.26);
  --ysh-elev-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ysh-card-raised: color-mix(in srgb, var(--ysh-card) 96%, #ffffff 4%);
  --ysh-tile-bg: color-mix(in srgb, var(--ysh-card) 90%, var(--ysh-surface) 10%);
  --yp-surface: var(--ysh-tile-bg);
  --yooadmin-surface: var(--ysh-surface);
  /*
   * Night chrome: do not paint the raw Theme “Header Background” on the strip — that often stays a mid gray
   * in both modes and looks “stuck”. Blend it into a dark base so the bar matches the dark shell but still
   * shifts when Brand Colors → Header Background changes.
   */
  --yp-header-bg: color-mix(in srgb, var(--yooadmin-header-bg, #4b4b4b) 22%, #0c0e12 78%);
}