/**
 * ProjectPlayCore design tokens — canonical visual foundation.
 *
 * Keep this file free of component and page layout rules. Existing component
 * variables remain available through compatibility aliases while migration is
 * in progress.
 */
:root {
  /* Color: foundations and surfaces */
  --ppc-bg: #0c1218;
  --ppc-bg-elevated: #111a22;
  --ppc-surface: #141e28;
  --ppc-surface-raised: #1a2838;
  --ppc-surface-overlay: #1e3044;

  /* Color: borders and text */
  --ppc-border: #243447;
  --ppc-border-strong: #2d4a63;
  --ppc-border-subtle: rgba(148, 163, 184, 0.18);
  --ppc-text: #e8eef4;
  --ppc-text-muted: #9aa8b8;
  --ppc-text-dim: #64748b;
  --ppc-text-inverse: #0c1218;

  /* Color: brand, technical information, and status */
  --ppc-accent: #f97316;
  --ppc-accent-hover: #fb923c;
  --ppc-accent-active: #c2410c;
  --ppc-accent-soft: rgba(249, 115, 22, 0.16);
  --ppc-tech: #38bdf8;
  --ppc-tech-hover: #7dd3fc;
  --ppc-tech-soft: rgba(56, 189, 248, 0.14);
  --ppc-success: #34d399;
  --ppc-success-soft: rgba(52, 211, 153, 0.14);
  --ppc-warning: #fbbf24;
  --ppc-warning-soft: rgba(251, 191, 36, 0.14);
  --ppc-danger: #f87171;
  --ppc-danger-soft: rgba(248, 113, 113, 0.14);
  --ppc-info: #60a5fa;
  --ppc-info-soft: rgba(96, 165, 250, 0.14);

  /* Holo: translucent visual foundation; geometry remains type-specific. */
  --ppc-holo-surface: rgba(7, 14, 26, 0.78);
  --ppc-holo-surface-raised: rgba(12, 22, 38, 0.82);
  --ppc-holo-surface-overlay: rgba(15, 25, 45, 0.92);
  --ppc-holo-surface-soft: rgba(15, 23, 42, 0.45);
  --ppc-holo-surface-medium: rgba(15, 23, 42, 0.65);
  --ppc-holo-surface-strong: rgba(15, 23, 42, 0.72);
  --ppc-holo-border: rgba(82, 122, 176, 0.34);
  --ppc-holo-border-control: rgba(90, 130, 180, 0.45);
  --ppc-holo-border-strong: rgba(116, 166, 230, 0.48);
  --ppc-holo-divider: rgba(148, 163, 184, 0.16);
  --ppc-holo-text: #eaf2ff;
  --ppc-holo-text-strong: #f8fafc;
  --ppc-holo-text-muted: #9fb0c6;
  --ppc-holo-text-placeholder: rgba(180, 195, 215, 0.65);
  --ppc-holo-scrollbar-thumb: rgba(249, 115, 22, 0.45);
  --ppc-holo-scrollbar-track: rgba(15, 23, 42, 0.35);

  /* Typography */
  --ppc-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ppc-font-size-xs: 0.75rem;
  --ppc-font-size-sm: 0.875rem;
  --ppc-font-size-md: 1rem;
  --ppc-font-size-lg: 1.125rem;
  --ppc-font-size-xl: 1.25rem;
  --ppc-font-size-2xl: 1.5rem;
  --ppc-font-weight-normal: 400;
  --ppc-font-weight-medium: 500;
  --ppc-font-weight-semibold: 600;
  --ppc-font-weight-bold: 700;
  --ppc-line-height-tight: 1.25;
  --ppc-line-height-normal: 1.5;
  --ppc-line-height-relaxed: 1.7;

  /* Spacing: four-pixel base scale */
  --ppc-space-1: 0.25rem;
  --ppc-space-2: 0.5rem;
  --ppc-space-3: 0.75rem;
  --ppc-space-4: 1rem;
  --ppc-space-5: 1.25rem;
  --ppc-space-6: 1.5rem;
  --ppc-space-8: 2rem;
  --ppc-space-10: 2.5rem;
  --ppc-space-12: 3rem;

  /* Shape */
  --ppc-radius-sm: 0.25rem;
  --ppc-radius-md: 0.5rem;
  --ppc-radius-lg: 0.625rem;
  --ppc-radius-xl: 0.875rem;
  --ppc-radius-round: 9999px;

  /* Elevation and restrained glow */
  --ppc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
  --ppc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
  --ppc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.38);
  --ppc-shadow-holo: 0 16px 44px rgba(0, 0, 0, 0.42);
  --ppc-glow-accent: 0 0 14px rgba(249, 115, 22, 0.2);
  --ppc-glow-tech: 0 0 14px rgba(56, 189, 248, 0.16);

  /* Motion references; components decide which property transitions. */
  --ppc-duration-fast: 120ms;
  --ppc-duration-normal: 200ms;
  --ppc-duration-slow: 320ms;
  --ppc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ppc-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);

  /* Content and Holo size references. Existing Holo classes remain authoritative. */
  --ppc-content-sm: 40rem;
  --ppc-content-md: 56rem;
  --ppc-content-lg: 75rem;
  --ppc-content-xl: 90rem;
  --ppc-holo-sm: 20rem;
  --ppc-holo-md: 36rem;
  --ppc-holo-lg: 56rem;
  --ppc-holo-full: 100vw;

  /* Layer references derived from the current Orbit/Holo hierarchy. */
  --ppc-z-base: 0;
  --ppc-z-dropdown: 1000;
  --ppc-z-sticky: 10000;
  --ppc-z-overlay: 10030;
  --ppc-z-modal: 10040;
  --ppc-z-holo: 10050;
  --ppc-z-toast: 120000;

  /* Compatibility aliases for the established App/Admin component family. */
  --ppc-app-bg: var(--ppc-bg);
  --ppc-app-surface: var(--ppc-surface);
  --ppc-app-panel: var(--ppc-surface-raised);
  --ppc-app-panel-border: var(--ppc-border);
  --ppc-app-input-bg: var(--ppc-surface-overlay);
  --ppc-app-input-border: var(--ppc-border-strong);
  --ppc-app-text: var(--ppc-text);
  --ppc-app-muted: var(--ppc-text-muted);
  --ppc-app-text-muted: var(--ppc-text-muted);
  --ppc-app-accent: var(--ppc-accent);
  --ppc-app-accent-hover: var(--ppc-accent-hover);
  --ppc-app-accent-dim: var(--ppc-accent-active);
  --ppc-app-border: var(--ppc-border);
  --ppc-app-success: var(--ppc-success);
  --ppc-app-danger: var(--ppc-danger);
  --ppc-app-radius: var(--ppc-radius-lg);
  --ppc-app-max: var(--ppc-content-lg);
  --ppc-app-font-family: var(--ppc-font-family);
  --ppc-app-font-size-base: var(--ppc-font-size-md);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ppc-duration-fast: 0ms;
    --ppc-duration-normal: 0ms;
    --ppc-duration-slow: 0ms;
  }
}