/*
 * MBall admin color scheme.
 *
 * Keep the current product palette and Django admin color aliases in this file.
 * Layout, spacing, and component styles consume these semantic tokens.
 */

:root,
html[data-admin-theme="light"] {
  --mball-page: #f4f5f9;
  --mball-page-tint: #eef4e9;
  --mball-ink: #171827;
  --mball-ink-soft: #565b70;
  --mball-ink-faint: #84899d;
  --mball-panel: #ffffff;
  --mball-panel-muted: #f8f8fb;
  --mball-panel-hover: #f2f8eb;
  --mball-line: #e7e8ef;
  --mball-line-strong: #d7d9e5;
  --mball-violet: #78e800;
  --mball-violet-deep: #347a00;
  --mball-violet-wash: #edf9df;
  --mball-aqua: #6dcbd4;
  --mball-shell: #070a05;
  --mball-shell-raised: #10150d;
  --mball-positive: #168b65;
  --mball-positive-wash: #e5f7f0;
  --mball-negative: #cc3b58;
  --mball-negative-wash: #ffedf1;
  --mball-caution: #a66b08;
  --mball-caution-wash: #fff5d9;
  --mball-card-shadow: 0 1px 2px rgba(20, 22, 39, 0.03), 0 10px 30px rgba(20, 22, 39, 0.055);
  --mball-card-shadow-hover: 0 4px 8px rgba(20, 22, 39, 0.04), 0 20px 50px rgba(20, 22, 39, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root {
    --mball-page: #0b0e0a;
    --mball-page-tint: #14200d;
    --mball-ink: #f2f3f8;
    --mball-ink-soft: #b3b6c7;
    --mball-ink-faint: #7f8499;
    --mball-panel: #151913;
    --mball-panel-muted: #0f130d;
    --mball-panel-hover: #1b2714;
    --mball-line: #293024;
    --mball-line-strong: #3a4433;
    --mball-violet: #8cff00;
    --mball-violet-deep: #b4ff5c;
    --mball-violet-wash: #203512;
    --mball-aqua: #7ad5dc;
    --mball-shell: #050704;
    --mball-shell-raised: #10150d;
    --mball-positive: #56cda3;
    --mball-positive-wash: #17392f;
    --mball-negative: #ff7891;
    --mball-negative-wash: #421d29;
    --mball-caution: #efbc5c;
    --mball-caution-wash: #3a301b;
    --mball-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 38px rgba(0, 0, 0, 0.18);
    --mball-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.22), 0 24px 60px rgba(0, 0, 0, 0.28);
  }
}

html[data-admin-theme="dark"] {
  --mball-page: #0b0e0a;
  --mball-page-tint: #14200d;
  --mball-ink: #f2f3f8;
  --mball-ink-soft: #b3b6c7;
  --mball-ink-faint: #7f8499;
  --mball-panel: #151913;
  --mball-panel-muted: #0f130d;
  --mball-panel-hover: #1b2714;
  --mball-line: #293024;
  --mball-line-strong: #3a4433;
  --mball-violet: #8cff00;
  --mball-violet-deep: #b4ff5c;
  --mball-violet-wash: #203512;
  --mball-aqua: #7ad5dc;
  --mball-shell: #050704;
  --mball-shell-raised: #10150d;
  --mball-positive: #56cda3;
  --mball-positive-wash: #17392f;
  --mball-negative: #ff7891;
  --mball-negative-wash: #421d29;
  --mball-caution: #efbc5c;
  --mball-caution-wash: #3a301b;
  --mball-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 38px rgba(0, 0, 0, 0.18);
  --mball-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.22), 0 24px 60px rgba(0, 0, 0, 0.28);
}

:root,
html[data-admin-theme="light"],
html[data-admin-theme="dark"] {
  /*
   * Fixed colors and RGB channels used to compose translucent component
   * treatments. Keeping the channels here means component styles control only
   * opacity and layout; the actual palette remains centralized.
   */
  --mball-on-dark: #ffffff;
  --mball-on-bright: #111807;
  --mball-on-bright-strong: #111907;
  --mball-on-lime: #0b1206;
  --mball-black: #000000;
  --mball-on-dark-rgb: 255 255 255;
  --mball-black-rgb: 0 0 0;
  --mball-shell-shadow-rgb: 6 7 14;
  --mball-header-shadow-rgb: 9 10 19;
  --mball-popup-shadow-rgb: 6 7 15;
  --mball-dashboard-shadow-rgb: 4 8 2;
  --mball-directory-shadow-rgb: 5 9 3;
  --mball-mobile-shadow-rgb: 4 5 12;
  --mball-input-shadow-rgb: 15 17 30;
  --mball-input-inset-rgb: 10 12 22;
  --mball-sidebar-shadow-rgb: 18 20 35;
  --mball-sidebar-shadow-soft-rgb: 19 21 36;
  --mball-action-shadow-rgb: 11 10 45;
  --mball-live-panel-rgb: 12 20 40;
  --mball-theme-shadow-rgb: 20 17 80;
  --mball-light-popup-shadow-rgb: 31 37 25;
  --mball-legacy-violet-rgb: 99 91 255;
  --mball-legacy-cyan-rgb: 17 184 199;
  --mball-brand-shadow-rgb: 69 61 221;
  --mball-button-shadow-rgb: 76 69 223;
  --mball-theme-active-rgb: 124 116 255;
  --mball-theme-green-shadow-rgb: 91 171 0;
  --mball-lime-rgb: 140 255 0;
  --mball-aqua-fixed-rgb: 109 203 212;
  --mball-directory-border-rgb: 122 213 220;
  --mball-legacy-hero-aqua-rgb: 93 225 236;
  --mball-legacy-hero-violet-rgb: 163 135 255;
  --mball-status-legacy-rgb: 97 230 181;
  --mball-status-stat-rgb: 104 224 180;
  --mball-status-live-rgb: 105 230 183;
  --mball-eyebrow-glow-rgb: 54 196 204;
  --mball-error-rgb: 207 54 84;
  --mball-dashboard-gradient-start-rgb: 3 7 2;
  --mball-dashboard-gradient-middle-rgb: 10 20 6;
  --mball-dashboard-gradient-end-rgb: 9 45 34;

  /* Fixed component accents retained from the existing visual design. */
  --mball-brand-gradient-start: #827cff;
  --mball-brand-gradient-middle: #5b53f0;
  --mball-brand-gradient-end: #12b8c8;
  --mball-legacy-dashboard-start: #171a2c;
  --mball-legacy-dashboard-middle: #29265a;
  --mball-legacy-dashboard-end: #314964;
  --mball-legacy-dashboard-eyebrow: #8ceaf0;
  --mball-legacy-status: #61e6b5;
  --mball-directory-start: #040703;
  --mball-directory-middle: #0b1908;
  --mball-directory-end: #0b382c;
  --mball-directory-count: #9cff2f;
  --mball-default-button-gradient-end: #7b74ff;
  --mball-brand-mark-ink: #8ddce2;
  --mball-brand-mark-bg: #07100b;
  --mball-brand-mark-border: #76cbd2;
  --mball-nav-icon-color: #aaa6ff;
  --mball-avatar-gradient-start: #a4ff38;
  --mball-avatar-gradient-end: #73dc00;
  --mball-hero-eyebrow: #72e3e6;
  --mball-hero-stat-status: #68e0b4;
  --mball-live-status-dot: #69e6b7;
  --mball-login-start: #030502;
  --mball-login-middle: #090e07;
  --mball-login-end: #071513;

  --mball-action-bg: #477f28;
  --mball-action-hover-bg: #3f7624;
  --mball-action-border: #5f963e;
  --mball-action-text: #ffffff;
  --mball-accent-text: #101907;
  --mball-neutral-action-bg: #565b70;
  --mball-neutral-action-hover-bg: #41465a;
  --mball-delete-action-bg: #b62945;
  --mball-delete-action-hover-bg: #97233b;
  --primary: var(--mball-violet);
  --secondary: var(--mball-shell);
  --accent: var(--mball-aqua);
  --primary-fg: var(--mball-action-text);
  --body-fg: var(--mball-ink);
  --body-bg: var(--mball-page);
  --body-quiet-color: var(--mball-ink-soft);
  --body-loud-color: var(--mball-ink);
  --header-color: var(--mball-action-text);
  --header-branding-color: var(--mball-action-text);
  --header-bg: color-mix(in srgb, var(--mball-shell) 96%, transparent);
  --header-link-color: var(--mball-action-text);
  --link-fg: var(--mball-violet-deep);
  --link-hover-color: var(--mball-violet-deep);
  --link-selected-fg: var(--mball-violet-deep);
  --breadcrumbs-fg: var(--mball-ink-faint);
  --breadcrumbs-link-fg: var(--mball-violet-deep);
  --breadcrumbs-bg: color-mix(in srgb, var(--mball-panel) 88%, transparent);
  --hairline-color: var(--mball-line);
  --border-color: var(--mball-line-strong);
  --error-fg: var(--mball-negative);
  --message-success-bg: var(--mball-positive-wash);
  --message-warning-bg: var(--mball-caution-wash);
  --message-error-bg: var(--mball-negative-wash);
  --darkened-bg: var(--mball-panel-muted);
  --selected-bg: var(--mball-violet-wash);
  --selected-row: var(--mball-panel-hover);
  --button-fg: var(--mball-action-text);
  --button-bg: var(--mball-action-bg);
  --button-hover-bg: var(--mball-action-hover-bg);
  --default-button-bg: var(--mball-action-bg);
  --default-button-hover-bg: var(--mball-action-hover-bg);
  --close-button-bg: var(--mball-neutral-action-bg);
  --close-button-hover-bg: var(--mball-neutral-action-hover-bg);
  --delete-button-bg: var(--mball-delete-action-bg);
  --delete-button-hover-bg: var(--mball-delete-action-hover-bg);
  --object-tools-fg: var(--mball-violet-deep);
  --object-tools-bg: var(--mball-violet-wash);
  --object-tools-hover-bg: var(--mball-violet);
  --mball-surface: var(--mball-panel);
  --mball-surface-raised: var(--mball-panel);
  --mball-surface-soft: var(--mball-panel-muted);
  --mball-surface-strong: var(--mball-shell);
  --mball-text: var(--mball-ink);
  --mball-muted: var(--mball-ink-faint);
  --mball-border: var(--mball-line);
  --mball-border-strong: var(--mball-line-strong);
  --mball-brand: var(--mball-violet);
  --mball-brand-strong: var(--mball-violet-deep);
  --mball-brand-soft: var(--mball-violet-wash);
  --mball-cyan: var(--mball-aqua);
  --mball-success: var(--mball-positive);
  --mball-warning: var(--mball-caution);
  --mball-danger: var(--mball-negative);
  --mball-shadow-sm: var(--mball-card-shadow);
  --mball-shadow-md: var(--mball-card-shadow-hover);
  --mball-shadow-focus: 0 0 0 4px color-mix(in srgb, var(--mball-violet) 18%, transparent);
  --mball-focus-ring: 0 0 0 3px color-mix(in srgb, var(--mball-aqua) 28%, transparent);
}