/* =========================================
   MiniTiendAI — Dark Mode Token Overrides
   Loaded after tokens.css and themes.css.
   Component-specific dark mode rules remain
   in their page CSS files.
   ========================================= */

[data-theme="dark"] {
  color-scheme: dark;

  /* ── Text ── */
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-tertiary: #7e8fa1;
  --text-color: #e2e8f0;
  --text-light: #94a3b8;
  --text-muted: #8d9eb4;

  /* ── Backgrounds ── */
  --bg-body: #0b1120;
  --bg-surface: #1e293b;
  --bg-muted: #162032;
  --bg-glass: rgba(15, 23, 42, 0.75);
  --bg-glass-strong: rgba(15, 23, 42, 0.92);
  --light-gray: #1e293b;
  /* Semantic aliases (prefer these over legacy names) */
  --bg-elevated: #0f172a;
  --white: var(--bg-elevated);
  --background-color: var(--bg-elevated);
  --background-white: var(--bg-surface);

  /* ── Borders ── */
  --border-color: #334155;
  --border-light: #1e293b;
  --border-hover: rgba(71, 85, 105, 0.8);
  --glass-border: 1px solid rgba(51, 65, 85, 0.4);

  /* ── Glass ── */
  --glass-bg: rgba(30, 41, 59, 0.85);
  --glass-bg-dark: rgba(15, 23, 42, 0.92);

  /* ── Brand ── */
  --primary-glow: rgba(255, 49, 49, 0.25);
  --primary-color-light: rgba(255, 49, 49, 0.15);
  accent-color: var(--primary-color);

  /* ── Semantic Dark Surfaces (use instead of repurposing text/border tokens) ── */
  --bg-dark-surface: #1e293b;
  --bg-dark-elevated: #334155;
  --text-dark-heading: #f1f5f9;
  --text-dark-body: #e2e8f0;

  /* ── Status Colors (dark variants) ── */
  --status-pending-bg: #431407;
  --status-pending-text: #fb923c;
  --status-pending-border: #7c2d12;
  --status-processing-bg: #172554;
  --status-processing-text: #60a5fa;
  --status-processing-border: #1e3a5f;
  --status-completed-bg: #052e16;
  --status-completed-text: #4ade80;
  --status-completed-border: #14532d;
  --status-cancelled-bg: #450a0a;
  --status-cancelled-text: #f87171;
  --status-cancelled-border: #7f1d1d;
  --status-info-bg: #172554;
  --status-info-text: #60a5fa;
  --status-warning-bg: #422006;
  --status-warning-text: #fbbf24;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.25);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.3), 0 20px 50px rgba(0, 0, 0, 0.45);
  --shadow-2xl: 0 12px 24px rgba(0, 0, 0, 0.3), 0 36px 72px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 4px 12px rgba(255, 49, 49, 0.3), 0 10px 40px -10px rgba(255, 49, 49, 0.5);
  --shadow-glow: 0 4px 12px rgba(255, 49, 49, 0.25), 0 8px 30px rgba(255, 49, 49, 0.15);
  --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.3), 0 24px 56px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] {
  scrollbar-color: var(--border-color) var(--bg-body);
}

/* System dark mode preference fallback (prevents flash of light content) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-tertiary: #7e8fa1;
    --text-color: #e2e8f0;
    --text-light: #94a3b8;
    --text-muted: #8d9eb4;

    --bg-body: #0b1120;
    --bg-surface: #1e293b;
    --bg-muted: #162032;
    --bg-glass: rgba(15, 23, 42, 0.75);
    --bg-glass-strong: rgba(15, 23, 42, 0.92);
    --light-gray: #1e293b;
    --bg-elevated: #0f172a;
    --white: var(--bg-elevated);
    --background-color: var(--bg-elevated);
    --background-white: var(--bg-surface);

    --border-color: #334155;
    --border-light: #1e293b;
    --border-hover: rgba(71, 85, 105, 0.8);
    --glass-border: 1px solid rgba(51, 65, 85, 0.4);

    --glass-bg: rgba(30, 41, 59, 0.85);
    --glass-bg-dark: rgba(15, 23, 42, 0.92);

    --primary-glow: rgba(255, 49, 49, 0.25);
    --primary-color-light: rgba(255, 49, 49, 0.15);

    --bg-dark-surface: #1e293b;
    --bg-dark-elevated: #334155;
    --text-dark-heading: #f1f5f9;
    --text-dark-body: #e2e8f0;

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.25);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.3), 0 20px 50px rgba(0, 0, 0, 0.45);
    --shadow-2xl: 0 12px 24px rgba(0, 0, 0, 0.3), 0 36px 72px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 4px 12px rgba(255, 49, 49, 0.3), 0 10px 40px -10px rgba(255, 49, 49, 0.5);
    --shadow-glow: 0 4px 12px rgba(255, 49, 49, 0.25), 0 8px 30px rgba(255, 49, 49, 0.15);
    --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.3), 0 24px 56px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);

    --status-pending-bg: #431407;
    --status-pending-text: #fb923c;
    --status-pending-border: #7c2d12;
    --status-processing-bg: #172554;
    --status-processing-text: #60a5fa;
    --status-processing-border: #1e3a5f;
    --status-completed-bg: #052e16;
    --status-completed-text: #4ade80;
    --status-completed-border: #14532d;
    --status-cancelled-bg: #450a0a;
    --status-cancelled-text: #f87171;
    --status-cancelled-border: #7f1d1d;
    --status-info-bg: #172554;
    --status-info-text: #60a5fa;
    --status-warning-bg: #422006;
    --status-warning-text: #fbbf24;

    accent-color: var(--primary-color);
    scrollbar-color: var(--border-color) var(--bg-body);
  }
}