/*
 * Kwalee BI — Theme tokens (Light / Dark)
 *
 * Semantic colour aliases resolved against the brand palette in base.css.
 * Components reference these aliases exclusively — never raw palette values.
 * Toggled at runtime via `data-theme` attribute on #shell\:root.
 */

/* ------------------------------------------------------------------ */
/* Dark theme (default)                                               */
/* ------------------------------------------------------------------ */
:root,
[data-theme="dark"] {
  --nav-height: 56px;

  --bg-primary: #0a0a0a;
  --bg-navbar: #050505;
  --bg-secondary: #171717;
  --bg-surface: #262626;
  --bg-elevated: #303030;
  --bg-hover: #404040;

  --text-primary: #fafafa;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;

  --border-color: #404040;
  --border-subtle: #2a2a2a;

  --accent: #facc15;
  --accent-hover: #fde047;
  --accent-muted: rgba(250, 204, 21, 0.15);
  --accent-text: #171717;
  --accent-primary: #facc15;
  --accent-primary-alpha: rgba(250, 204, 21, 0.15);
  --color-primary: #facc15;
  --color-primary-hover: #ca8a04;
  --color-primary-dark: #eab308;
  --color-primary-hover-dark: #ca8a04;

  /* WCAG AA non-text colours (≥ 3:1 on dark backgrounds) */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* WCAG AA accessible text colours (≥ 4.5:1 on dark backgrounds) */
  --color-success-text: #4ade80;
  --color-warning-text: #fbbf24;
  --color-error-text: #f87171;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  --overlay-bg: rgba(0, 0, 0, 0.5);
  --scrollbar-thumb: #404040;
  --scrollbar-track: transparent;

  /* Status backgrounds / borders (dark theme) */
  --color-error-bg: rgba(239, 68, 68, 0.12);
  --color-error-border: rgba(239, 68, 68, 0.25);
  --color-success-bg: rgba(34, 197, 94, 0.12);
  --color-success-border: rgba(34, 197, 94, 0.25);
  --color-warning-bg: rgba(234, 179, 8, 0.12);
  --color-warning-border: rgba(234, 179, 8, 0.25);

  /* Accent transparent alpha series (dark: rgba(250, 204, 21, N)) */
  --accent-alpha-06: rgba(250, 204, 21, 0.06);
  --accent-alpha-08: rgba(250, 204, 21, 0.08);
  --accent-alpha-25: rgba(250, 204, 21, 0.25);
  --accent-alpha-30: rgba(250, 204, 21, 0.30);
  --accent-alpha-40: rgba(250, 204, 21, 0.40);
  --accent-alpha-45: rgba(250, 204, 21, 0.45);
  --accent-alpha-60: rgba(250, 204, 21, 0.60);
  --accent-alpha-70: rgba(250, 204, 21, 0.70);

  /* Status border variants */
  --color-error-border-md: rgba(239, 68, 68, 0.3);
  --color-error-border-lg: rgba(239, 68, 68, 0.4);
  --color-error-border-xl: rgba(239, 68, 68, 0.5);
  --color-success-border-md: rgba(34, 197, 94, 0.3);

  /* Field type indicator colours (dark theme) */
  --color-field-dimension: #60a5fa;
  --color-field-metric: #34d399;

  /* Indigo/violet role accent (dark) */
  --color-indigo: #a5b4fc;
  --color-indigo-bg: rgba(99, 102, 241, 0.12);
  --color-indigo-border: rgba(99, 102, 241, 0.25);

  /* Link colour (dark) */
  --color-link: #60a5fa;

  /* Neutral overlays (theme-independent) */
  --overlay-dark-06: rgba(0, 0, 0, 0.06);
  --overlay-dark-10: rgba(0, 0, 0, 0.10);
  --overlay-dark-12: rgba(0, 0, 0, 0.12);
  --overlay-dark-15: rgba(0, 0, 0, 0.15);
  --overlay-dark-18: rgba(0, 0, 0, 0.18);
  --overlay-light-15: rgba(255, 255, 255, 0.15);
  --overlay-light-98: rgba(255, 255, 255, 0.98);

  /* Pure white — for text on coloured/inverted backgrounds */
  --color-white: #ffffff;

  /* Google sign-in button (Google-specified brand colours — must not change with theme) */
  --login-google-btn-bg: #ffffff;
  --login-google-btn-bg-hover: #f8faff;
  --login-google-btn-bg-active: #edf0f5;
  --login-google-btn-text: #1f1f1f;
  --login-google-btn-border: #dadce0;

  /* Skeleton loading animation background (dark theme) */
  --color-skeleton-bg: var(--color-neutral-700);
  --color-skeleton-bg-strong: var(--color-neutral-600);
}

/* ------------------------------------------------------------------ */
/* Light theme                                                        */
/* ------------------------------------------------------------------ */
html[data-theme="light"],
[data-theme="light"] {
  --bg-primary: #f8f7f5;
  --bg-navbar: #e8e6e2;
  --bg-secondary: #f2f1ef;
  --bg-surface: #eeede9;
  --bg-elevated: #ffffff;
  --bg-hover: #e4e2df;

  --text-primary: #171717;
  --text-secondary: #525252;
  --text-muted: #737373;

  --border-color: #e5e5e5;
  --border-subtle: #f0f0f0;

  --accent: #eab308;
  --accent-hover: #facc15;
  --accent-muted: rgba(234, 179, 8, 0.12);
  --accent-text: #171717;
  --accent-primary: #eab308;
  --accent-primary-alpha: rgba(234, 179, 8, 0.12);
  --color-primary: #eab308;
  --color-primary-hover: #a16207;
  --color-primary-dark: #facc15;
  --color-primary-hover-dark: #eab308;

  /* WCAG AA accessible text colours (≥ 4.5:1 on light backgrounds) */
  --color-success-text: #15803d;
  --color-warning-text: #b45309;
  --color-error-text: #b91c1c;

  /* WCAG AA non-text colours (≥ 3:1 on light backgrounds, Story 7.3) */
  --color-success: #16a34a;
  --color-warning: #b45309;
  --color-error: #dc2626;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  --overlay-bg: rgba(0, 0, 0, 0.25);
  --scrollbar-thumb: #d4d4d4;
  --scrollbar-track: transparent;

  /* Status backgrounds / borders (light theme) */
  --color-error-bg: rgba(239, 68, 68, 0.08);
  --color-error-border: rgba(239, 68, 68, 0.2);
  --color-success-bg: rgba(34, 197, 94, 0.08);
  --color-success-border: rgba(34, 197, 94, 0.2);
  --color-warning-bg: rgba(234, 179, 8, 0.08);
  --color-warning-border: rgba(234, 179, 8, 0.2);

  /* Accent transparent alpha series (light: rgba(234, 179, 8, N)) */
  --accent-alpha-06: rgba(234, 179, 8, 0.06);
  --accent-alpha-08: rgba(234, 179, 8, 0.08);
  --accent-alpha-25: rgba(234, 179, 8, 0.25);
  --accent-alpha-30: rgba(234, 179, 8, 0.30);
  --accent-alpha-40: rgba(234, 179, 8, 0.40);
  --accent-alpha-45: rgba(234, 179, 8, 0.45);
  --accent-alpha-60: rgba(234, 179, 8, 0.60);
  --accent-alpha-70: rgba(234, 179, 8, 0.70);

  /* Status border variants (light theme error = dc2626, success = 16a34a) */
  --color-error-border-md: rgba(220, 38, 38, 0.3);
  --color-error-border-lg: rgba(220, 38, 38, 0.4);
  --color-error-border-xl: rgba(220, 38, 38, 0.5);
  --color-success-border-md: rgba(22, 163, 74, 0.3);

  /* Field type indicator colours (light theme) */
  --color-field-dimension: #3b82f6;
  --color-field-metric: #10b981;

  /* Indigo/violet role accent (light) */
  --color-indigo: #6366f1;
  --color-indigo-bg: rgba(99, 102, 241, 0.08);
  --color-indigo-border: rgba(99, 102, 241, 0.2);

  /* Link colour (light) */
  --color-link: #1d4ed8;

  /* Warning active text (darker amber for light theme active states) */
  --color-warning-active-text: #92400e;

  /* Neutral overlays (same values as dark — light theme overrides only where needed) */
  --overlay-dark-06: rgba(0, 0, 0, 0.06);
  --overlay-dark-10: rgba(0, 0, 0, 0.10);
  --overlay-dark-12: rgba(0, 0, 0, 0.12);
  --overlay-dark-15: rgba(0, 0, 0, 0.15);
  --overlay-dark-18: rgba(0, 0, 0, 0.18);
  --overlay-light-15: rgba(255, 255, 255, 0.15);
  --overlay-light-98: rgba(255, 255, 255, 0.98);

  /* Skeleton loading animation background (light theme) */
  --color-skeleton-bg: var(--color-neutral-200);
  --color-skeleton-bg-strong: var(--color-neutral-300);
}

/* ------------------------------------------------------------------ */
/* Smooth transitions between themes                                  */
/* ------------------------------------------------------------------ */
body,
.shell-navbar,
.shell-sub-tabs,
.shell-user-dropdown,
.shell-mobile-menu-content {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* ------------------------------------------------------------------ */
/* Custom scrollbars (Webkit + Firefox)                               */
/* ------------------------------------------------------------------ */

/* ── Webkit (Chrome, Safari, Edge) ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color, #404040);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #737373);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── Firefox ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color, #404040) transparent;
}