/* ==========================================================================
   Theme System — Light & Dark Mode Variables
   Defines theme-specific CSS custom properties under data-theme selectors.
   Consumed by components.css, layouts.css, and all view files.
   Relies on base tokens from design-tokens.css.

   Requirements: 10.1, 10.2, 10.4, 10.5
   ========================================================================== */

/* ------------------------------------------------------------------
   Light Theme (default)
   ------------------------------------------------------------------ */
[data-theme="light"] {
  /* Backgrounds */
  --color-bg: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-hover: #f1f5f9;

  /* Text */
  --color-text: #0f172a;
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;

  /* Borders */
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* Primary overrides for theme context */
  --color-primary-light: #eef2ff;
  --color-primary-surface: #f5f3ff;

  /* Status colors — light variants */
  --color-success-light: #ecfdf5;
  --color-success-border: #a7f3d0;
  --color-warning-light: #fffbeb;
  --color-warning-border: #fde68a;
  --color-danger-light: #fef2f2;
  --color-danger-border: #fecaca;
  --color-info: #3b82f6;
  --color-info-light: #eff6ff;
  --color-info-border: #bfdbfe;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* Component-specific */
  --topbar-bg: #ffffff;
  --topbar-border: #e2e8f0;
  --topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --megamenu-bg: #ffffff;
  --megamenu-border: #e2e8f0;
  --megamenu-item-hover: #f1f5f9;

  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  --table-header-bg: #f8fafc;
  --table-border: #e2e8f0;
  --table-row-hover: #f1f5f9;
  --table-stripe-bg: #f8fafc;

  --input-bg: #ffffff;
  --input-border: #e2e8f0;
  --input-focus-ring: rgba(79, 70, 229, 0.2);

  --modal-overlay: rgba(0, 0, 0, 0.4);
  --modal-bg: #ffffff;
  --modal-border: #e2e8f0;

  --toast-bg: #ffffff;
  --toast-border: #e2e8f0;
  --toast-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);

  --badge-bg: #f1f5f9;
  --badge-text: #475569;

  --breadcrumb-text: #64748b;
  --breadcrumb-active: #0f172a;
  --breadcrumb-separator: #cbd5e1;

  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;

  --skeleton-base: #e2e8f0;
  --skeleton-shine: #f1f5f9;

  --focus-ring: rgba(79, 70, 229, 0.4);

  /* Login brand gradient — derived from primary tokens (web-ui-modernization Req 1.3) */
  --login-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  --login-bg: var(--color-bg-alt);
}

/* ------------------------------------------------------------------
   Dark Theme
   Req 10.4: bg #0f172a–#1e293b, text #e2e8f0–#f8fafc
   Req 10.5: border and shadow values adjusted for dark mode
   ------------------------------------------------------------------ */
[data-theme="dark"] {
  /* Backgrounds */
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-surface: #1e293b;
  --color-surface-hover: #334155;

  /* Text */
  --color-text: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;

  /* Borders */
  --color-border: #334155;
  --color-border-strong: #475569;

  /* Primary overrides for theme context */
  --color-primary-light: #1e1b4b;
  --color-primary-surface: #1e1b4b;

  /* Status colors — dark variants */
  --color-success-light: #064e3b;
  --color-success-border: #065f46;
  --color-warning-light: #78350f;
  --color-warning-border: #92400e;
  --color-danger-light: #7f1d1d;
  --color-danger-border: #991b1b;
  --color-info: #60a5fa;
  --color-info-light: #1e3a5f;
  --color-info-border: #1e40af;

  /* Shadows — deeper for dark backgrounds */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.3);

  /* Component-specific */
  --topbar-bg: #1e293b;
  --topbar-border: #334155;
  --topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  --megamenu-bg: #1e293b;
  --megamenu-border: #334155;
  --megamenu-item-hover: #334155;

  --card-bg: #1e293b;
  --card-border: #334155;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);

  --table-header-bg: #1e293b;
  --table-border: #334155;
  --table-row-hover: #334155;
  --table-stripe-bg: #1a2332;

  --input-bg: #0f172a;
  --input-border: #334155;
  --input-focus-ring: rgba(99, 102, 241, 0.35);

  --modal-overlay: rgba(0, 0, 0, 0.6);
  --modal-bg: #1e293b;
  --modal-border: #334155;

  --toast-bg: #1e293b;
  --toast-border: #334155;
  --toast-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);

  --badge-bg: #334155;
  --badge-text: #cbd5e1;

  --breadcrumb-text: #94a3b8;
  --breadcrumb-active: #f8fafc;
  --breadcrumb-separator: #475569;

  --scrollbar-track: #1e293b;
  --scrollbar-thumb: #475569;
  --scrollbar-thumb-hover: #64748b;

  --skeleton-base: #334155;
  --skeleton-shine: #475569;

  --focus-ring: rgba(99, 102, 241, 0.5);

  /* Login brand gradient — dark variant (web-ui-modernization Req 1.3, 7.1) */
  --login-gradient: linear-gradient(135deg, var(--color-primary) 0%, #1e1b4b 100%);
  --login-bg: var(--color-bg);
}

/* ------------------------------------------------------------------
   Theme Transition Animation
   Req 10.2: 300ms transition for smooth theme switching
   Applied to all elements that use theme-dependent colors.
   ------------------------------------------------------------------ */
html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after {
  transition:
    background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
    color 300ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
    fill 300ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Opt out of theme transition for elements that define their own */
.no-theme-transition,
.no-theme-transition *,
.no-theme-transition *::before,
.no-theme-transition *::after {
  transition: none !important;
}

/* ------------------------------------------------------------------
   Base Element Theming
   ------------------------------------------------------------------ */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

a {
  color: var(--color-primary, #4f46e5);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover, #4338ca);
}

::selection {
  background-color: var(--color-primary-light);
  color: var(--color-text);
}

/* Scrollbar theming for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}