/* Theme preview colors remain available while another theme is active. */
:root {
  --color-theme-super-ball-preview-primary: #1d4ed8;
  --color-theme-super-ball-preview-secondary: #f8fbff;
  --color-theme-super-ball-preview-tertiary: #dc2626;
}

/* Super Ball tier theme for Cherish Dex application chrome. */
:root[data-app-theme='super-ball'] {
  color-scheme: light;

  /* Surfaces */
  --color-bg-base: #f8fbff;
  --color-bg-deep: #ffffff;
  --color-bg-surface: #ffffff;
  --color-bg-panel: #edf5ff;
  --color-bg-card: #ffffff;
  --color-bg-popover: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-canvas: #f0f6ff;
  --color-bg-canvas-alt: #f8fbff;
  --color-bg-panel-subtle: #e3efff;
  --color-bg-hero: #eaf3ff;
  --color-bg-card-warm: #ffffff;
  --color-bg-card-warm-alt: #f8fbff;
  --color-bg-media: #e3efff;
  --color-bg-thumbnail: #d8e8ff;
  --color-bg-thumbnail-alt: #e0f0ff;
  --color-bg-placeholder: #d8e8ff;
  --color-bg-success-edge: #ecfdf5;
  --color-bg-danger-panel: #fff1f2;
  --color-bg-step-inactive: #d8e8ff;
  --color-bg-tech: #edf6ff;

  /* Content */
  --color-text-primary: #101828;
  --color-text-strong: #182230;
  --color-text-soft: #344054;
  --color-text-body: #29394f;
  --color-text-body-strong: #182230;
  --color-text-secondary: #526071;
  --color-text-caption: #667085;
  --color-text-caption-alt: #667085;
  --color-text-tertiary: #7a8494;
  --color-text-low: #8a94a6;
  --color-text-muted: #98a2b3;
  --color-text-subtle: #aeb8c8;
  --color-text-placeholder: #8a94a6;
  --color-text-disabled: #c0c7d2;
  --color-text-ghost: #d6dce5;
  --color-text-emphasis: #0f172a;
  --color-text-control: #344054;
  --color-text-feature: #344054;
  --color-text-detail: #526071;
  --color-text-description: #526071;
  --color-text-summary: #667085;
  --color-text-plan-label: #667085;
  --color-text-bulk: #526071;
  --color-text-code: #1d4ed8;
  --color-text-bulk-subtle: #667085;
  --color-text-scanner-label: #607080;
  --color-text-confidence: #526071;
  --color-text-limit: #667085;
  --color-text-detected: #0f7285;
  --color-text-hint: #667085;
  --color-text-referral-note: #667085;
  --color-text-alert-note: #667085;
  --color-text-about-muted: #526071;
  --color-text-card: #29394f;
  --color-text-card-alt: #29394f;
  --color-text-search: #29394f;
  --color-text-upload: #29394f;
  --color-text-scanner: #526071;
  --color-text-scanner-summary: #667085;
  --color-text-alert-description: #607080;
  --color-text-manual: #5f5363;
  --color-text-referral: #7a5c41;
  --color-text-neutral: #344054;
  --color-on-accent: #ffffff;
  --color-on-action-wishlist: #ffffff;
  --color-accent-text: var(--color-accent-primary-dark);
  --color-account-highlight: #003cff;
  --color-status-success-text: #047857;
  --color-status-warning-text: var(--color-medal-gold-dark);
  --color-status-danger-text: var(--color-action-destructive-deep);
  --color-control-check-bg: var(--color-bg-elevated);
  --color-control-check-border: rgb(var(--rgb-overlay) / 18%);
  --color-control-check-border-hover: var(--color-accent-primary-light);
  --color-control-check-bg-checked: var(--color-accent-primary);
  --color-control-check-border-checked: var(--color-accent-primary-light);
  --color-control-check-mark: var(--color-on-accent);
  --color-scrollbar-track: rgb(var(--rgb-overlay) / 3%);
  --color-scrollbar-thumb: rgb(var(--rgb-accent-primary) / 42%);
  --color-scrollbar-thumb-hover: rgb(var(--rgb-accent-primary) / 68%);
  --color-control-field-bg: var(--color-bg-elevated);
  --color-control-field-border: rgb(var(--rgb-overlay) / 14%);
  --color-control-field-border-hover: var(--color-accent-primary-light);
  --color-control-menu-bg: var(--color-bg-popover);
  --color-control-option-hover: rgb(var(--rgb-accent-primary) / 12%);
  --color-control-option-selected: rgb(var(--rgb-accent-primary) / 20%);
  --color-control-stepper-bg: rgb(var(--rgb-overlay) / 5%);
  --color-control-stepper-hover: rgb(var(--rgb-accent-primary) / 16%);
  --color-control-slider-track: rgb(var(--rgb-overlay) / 13%);
  --color-control-slider-fill: var(--color-accent-primary);
  --color-control-slider-thumb: var(--color-accent-primary-light);
  --color-control-slider-thumb-ring: var(--color-bg-surface);

  --color-price-tcgplayer-text: #1e3a8a;
  --color-price-tcgplayer-bg: #dbeafe;
  --color-price-tcgplayer-border: #2563eb;
  --color-price-cardmarket-text: #78350f;
  --color-price-cardmarket-bg: #fef3c7;
  --color-price-cardmarket-border: #d97706;
  /* Reacciones sociales (💗 me encanta, 👍 me gusta, ⭐ favorito). */
  --color-reaction-heart: #eb3b5a;
  --color-reaction-like: #3867d6;
  --color-reaction-star: #f0a020;

  /* Product brand and application accents */
  --color-brand-primary: #1d4ed8;
  --color-brand-primary-light: #3b82f6;
  --color-brand-primary-dark: #1e40af;
  --color-brand-primary-deep: #172554;
  --color-brand-soft: #dbeafe;
  --color-brand-muted: #93c5fd;
  --color-brand-red: #dc2626;
  --color-brand-gold: #f8cf5a;

  --color-brand-name-primary: var(--color-brand-primary);
  --color-brand-name-secondary: #101828;
  --color-brand-name-dark: var(--color-brand-primary-dark);

  --color-accent-primary: var(--color-brand-primary);
  --color-accent-primary-light: var(--color-brand-primary-light);
  --color-accent-primary-dark: var(--color-brand-primary-dark);
  --color-accent-primary-deep: var(--color-brand-primary-deep);
  --color-accent-primary-soft: var(--color-brand-soft);
  --color-accent-primary-muted: #93c5fd;

  --color-accent-violet-soft: #bfdbfe;
  --color-accent-violet: #2563eb;
  --color-accent-secondary: var(--color-brand-red);
  --color-accent-secondary-light: #ef4444;
  --color-accent-tertiary: #0369a1;
  --color-accent-fuchsia: #db2777;

  /* Functional actions */
  --color-action-wishlist: #db2777;
  --color-action-wishlist-strong: #be185d;
  --color-action-wishlist-deep: #831843;
  --rgb-action-wishlist: 219 39 119;
  --rgb-action-wishlist-strong: 190 24 93;

  --color-action-destructive: #dc2626;
  --color-action-destructive-strong: #b91c1c;
  --color-action-destructive-deep: #7f1d1d;
  --rgb-action-destructive: 220 38 38;
  --rgb-action-destructive-strong: 185 28 28;

  --color-action-cancel: #64748b;
  --rgb-action-cancel: 100 116 139;

  /* RGB channels */
  --rgb-overlay: 16 24 40;
  --rgb-shadow: 15 23 42;
  --rgb-white: 255 255 255;
  --rgb-black: 0 0 0;
  --rgb-bg-base: 248 251 255;
  --rgb-bg-deep: 255 255 255;
  --rgb-bg-surface: 255 255 255;
  --rgb-bg-void: 240 246 255;
  --rgb-bg-tech: 237 246 255;
  --rgb-champagne: 250 232 170;

  --rgb-accent-primary: 29 78 216;
  --rgb-accent-primary-200: 219 234 254;
  --rgb-accent-primary-300: 147 197 253;
  --rgb-accent-primary-light: 59 130 246;
  --rgb-accent-primary-dark: 30 64 175;
  --rgb-accent-secondary: 220 38 38;
  --rgb-accent-secondary-300: 239 68 68;
  --rgb-accent-secondary-500: 220 38 38;
  --rgb-accent-tertiary: 3 105 161;
  --rgb-accent-tertiary-300: 125 211 252;
  --rgb-accent-tertiary-400: 56 189 248;
  --rgb-accent-fuchsia: 219 39 119;

  /* Backwards-compatible aliases */
  --bg-base: var(--color-bg-base);
  --bg-surface: var(--color-bg-surface);
  --bg-elevated: var(--color-bg-elevated);
  --border: rgb(var(--rgb-overlay) / 12%);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-disabled);
  --accent-cyan: var(--color-accent-tertiary);
  --accent-purple: var(--color-accent-primary);
  --accent-pink: var(--color-action-wishlist);
}