/* ── Unified Design Tokens ─────────────────────────────────────── */
@import '/design-tokens.css';

/* ControlPanel-specific aliases → unified tokens
   CP keeps --cp-* prefix for backward-compat with index.html */
:root {
  --cp-bg: var(--no-bg);
  --cp-bg-2: var(--no-bg-soft);
  --cp-surface: var(--no-bg-raised);
  --cp-surface-soft: var(--no-bg-soft);
  --cp-border: var(--no-border);
  --cp-text: var(--no-text);
  --cp-text-soft: var(--no-text-secondary);

  --cp-accent: var(--no-brand-primary);
  --cp-accent-hover: var(--no-brand-primary-hover);

  --cp-success: var(--no-success);
  --cp-warning: var(--no-warning);
  --cp-error: var(--no-error);
  --cp-info: var(--no-info);

  --cp-radius-sm: var(--no-radius-sm);
  --cp-radius-md: var(--no-radius-md);
  --cp-radius-lg: var(--no-radius-lg);

  --cp-space-1: var(--no-space-2);
  --cp-space-2: var(--no-space-4);
  --cp-space-3: var(--no-space-6);
  --cp-space-4: var(--no-space-8);
  --cp-space-5: var(--no-space-10);

  --cp-duration-fast: var(--no-duration-fast);
  --cp-duration-base: var(--no-duration-base);
  --cp-duration-slow: var(--no-duration-moderate);

  --cp-shadow-1: var(--no-shadow);
  --cp-shadow-2: var(--no-shadow-lg);
}

[data-theme="light"] {
  --cp-bg: var(--no-bg);
  --cp-bg-2: var(--no-bg-raised);
  --cp-surface: var(--no-bg-raised);
  --cp-surface-soft: var(--no-bg-soft);
  --cp-border: var(--no-border);
  --cp-text: var(--no-text);
  --cp-text-soft: var(--no-text-secondary);

  --cp-accent: var(--no-brand-primary);
  --cp-accent-hover: var(--no-brand-primary-hover);

  --cp-success: var(--no-success);
  --cp-warning: var(--no-warning);
  --cp-error: var(--no-error);
  --cp-info: var(--no-info);

  --cp-shadow-1: var(--no-shadow);
  --cp-shadow-2: var(--no-shadow-lg);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --cp-bg: var(--no-bg);
    --cp-bg-2: var(--no-bg-raised);
    --cp-surface: var(--no-bg-raised);
    --cp-surface-soft: var(--no-bg-soft);
    --cp-border: var(--no-border);
    --cp-text: var(--no-text);
    --cp-text-soft: var(--no-text-secondary);

    --cp-accent: var(--no-brand-primary);
    --cp-accent-hover: var(--no-brand-primary-hover);

    --cp-success: var(--no-success);
    --cp-warning: var(--no-warning);
    --cp-error: var(--no-error);
    --cp-info: var(--no-info);

    --cp-shadow-1: var(--no-shadow);
    --cp-shadow-2: var(--no-shadow-lg);
  }
}