/**
 * IFINSTA Dark Theme
 *
 * Complete override of all design tokens from variables.css.
 * Variables.css is the default (light) theme.
 *
 * Theme is controlled ONLY by an explicit [data-theme] attribute on the
 * root element (set by JS). Auto mode resolves that explicit attribute from
 * the live prefers-color-scheme query; CSS remains attribute-driven.
 *
 * Selectors used in this file:
 *   :root[data-theme="dark"]  — explicit dark, applied when JS sets the attribute
 *   :root[data-theme="light"] — explicit light, resets to variables.css defaults
 *   [data-theme="dark"] .component — per-component dark styling
 */

/* ==========================================================================
   EXPLICIT DARK: User has chosen dark theme
   ========================================================================== */
:root[data-theme="dark"] {
  /* Primary */
  --ifinsta-primary: #60A5FA;
  --ifinsta-primary-hover: #93C5FD;
  --ifinsta-primary-500: #3B82F6;
  --ifinsta-primary-600: #60A5FA;
  --ifinsta-primary-700: #93C5FD;
  --ifinsta-primary-800: #1e40af;
  --ifinsta-primary-900: #1e3a8a;

  /* Semantic */
  --ifinsta-success: #10B981;
  --ifinsta-success-500: #10B981;
  --ifinsta-success-600: #059669;
  --ifinsta-success-700: #047857;
  --ifinsta-danger: #EF4444;
  --ifinsta-danger-500: #EF4444;
  --ifinsta-danger-600: #DC2626;
  --ifinsta-danger-700: #b91c1c;
  --ifinsta-danger-800: #991b1b;
  --ifinsta-warning: #F59E0B;
  --ifinsta-warning-500: #F59E0B;
  --ifinsta-warning-600: #D97706;
  --ifinsta-warning-50: #451A03;
  --ifinsta-warning-100: #78350F;
  --ifinsta-warning-200: #92400E;
  --ifinsta-warning-300: #F59E0B;
  --ifinsta-warning-400: #FBBF24;
  --ifinsta-warning-700: #FCD34D;
  --ifinsta-warning-800: #FDE68A;

  /* Text */
  --ifinsta-text-primary: #F9FAFB;
  --ifinsta-text: #F9FAFB;
  --ifinsta-text-secondary: #D1D5DB;
  --ifinsta-text-muted: #9CA3AF;
  --ifinsta-text-inverse: #111827;
  --ifinsta-text-on-warning: #111827;

  /* Surface */
  --ifinsta-surface: #1F2937;
  --ifinsta-surface-1: #111827;
  --ifinsta-surface-2: #1F2937;
  --ifinsta-surface-card: #1F2937;
  --ifinsta-bg: #111827;
  --ifinsta-bg-elevated: #1F2937;
  --ifinsta-bg-secondary: #1F2937;
  --ifinsta-bg-tertiary: #374151;

  /* Border */
  --ifinsta-border: #444242e6;
  --ifinsta-border-light: #6B7280;
  --ifinsta-border-focus: #3B82F6;

  /* Sidebar */
  --ifinsta-sidebar-bg: #111827;
  --ifinsta-sidebar-text: #D1D5DB;
  --ifinsta-sidebar-hover: rgba(255, 255, 255, 0.05);
  --ifinsta-sidebar-active: rgba(59, 130, 246, 0.15);

  /* Topbar */
  --ifinsta-topbar-bg: rgba(17, 24, 39, 0.85);
  --ifinsta-topbar-border: rgba(255, 255, 255, 0.1);
  --ifinsta-topbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

  /* Dropdown */
  --ifinsta-dropdown-bg: rgba(31, 41, 55, 0.98);
  --ifinsta-dropdown-border: rgba(255, 255, 255, 0.1);
  --ifinsta-dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  --ifinsta-dropdown-item-hover: rgba(255, 255, 255, 0.05);
  --ifinsta-dropdown-item-active: rgba(59, 130, 246, 0.15);

  /* Form */
  --ifinsta-form-placeholder: #6B7280;

  /* Shadows */
  --ifinsta-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ifinsta-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --ifinsta-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --ifinsta-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --ifinsta-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);

  /* Glass */
  --ifinsta-glass-bg: rgba(31, 41, 55, 0.7);
  --ifinsta-glass-border: rgba(255, 255, 255, 0.1);
  --ifinsta-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

  /* Focus */
  --ifinsta-focus-ring: rgba(59, 130, 246, 0.5);

  /* Design tokens */
  --ifinsta-color-primary: #3B82F6;
  --ifinsta-color-primary-hover: #60A5FA;
  --ifinsta-color-primary-tint: #1E3A8A;
  --ifinsta-color-primary-subtle: #172554;
  --ifinsta-color-brand: #1E3A8A;
  --ifinsta-color-text-primary: #F9FAFB;
  --ifinsta-color-text-secondary: #D1D5DB;
  --ifinsta-color-text-muted: #9CA3AF;
  --ifinsta-color-surface-1: #111827;
  --ifinsta-color-surface-2: #1F2937;
  --ifinsta-color-border: #6B7280;
  --ifinsta-color-danger: #EF4444;
  --ifinsta-color-danger-tint: #7F1D1D;
  --ifinsta-color-warning: #F59E0B;
  --ifinsta-color-warning-tint: #78350F;
  --ifinsta-color-success: #10B981;
  --ifinsta-color-success-tint: #064E3B;

  /* Data-table */
  --ifinsta-dt-grid: #333;
  --ifinsta-dt-grid-strong: #444;
  --ifinsta-dt-row-alt: #1a1a1a;
  --ifinsta-dt-row-hover: #1e2a3a;
  --ifinsta-dt-header-bg: #2a2a2a;
  --ifinsta-dt-header-text: #cccccc;

  /* Messaging */
  --msg-bg-primary: #111b21;
  --msg-bg-secondary: #202c33;
  --msg-bg-tertiary: #2a3942;
  --msg-bg-chat: #0b141a;
  --msg-bg-hover: #202c33;
  --msg-bg-active: #0b4633;
  --msg-text-primary: #e9edef;
  --msg-text-secondary: #8696a0;
  --msg-text-muted: #667781;
  --msg-sent-bg: #005c4b;
  --msg-sent-text: #e9edef;
  --msg-received-bg: #202c33;
  --msg-received-text: #e9edef;
  --msg-border: #2a3942;
  --msg-border-light: #374248;

  /* Input & Scrollbar */
  --ifinsta-input-bg: var(--ifinsta-surface-2);
  --ifinsta-input-text: var(--ifinsta-text-primary);
  --ifinsta-input-border: var(--ifinsta-border);
  --ifinsta-input-placeholder: #6B7280;
  --ifinsta-scrollbar-track: transparent;
  --ifinsta-scrollbar-thumb: #4b5563;
  --ifinsta-scrollbar-thumb-hover: #6b7280;

  /* Cross-surface aliases. Component styles use these names for the same
     semantic roles; defining them here prevents their light defaults from
     leaking through after the root theme changes. */
  --ifinsta-bg-input: var(--ifinsta-input-bg);
  --ifinsta-bg-primary: var(--ifinsta-bg);
  --ifinsta-bg-surface: var(--ifinsta-surface);
  --ifinsta-bg-white: var(--ifinsta-surface);
  --ifinsta-surface-white: var(--ifinsta-surface);
  --ifinsta-surface-muted: var(--ifinsta-surface-2);
  --ifinsta-surface-secondary: var(--ifinsta-surface-2);
  --ifinsta-surface-subtle: var(--ifinsta-surface-1);
  --ifinsta-surface-container-lowest: var(--ifinsta-surface-1);
  --ifinsta-border-faint: rgba(255, 255, 255, 0.08);
  --ifinsta-border-subtle: rgba(255, 255, 255, 0.12);
  --ifinsta-border-hover: #4B5563;
  --ifinsta-border-strong: #6B7280;
  --ifinsta-ink: var(--ifinsta-text-primary);
  --ifinsta-muted: var(--ifinsta-text-muted);
  --ifinsta-line: var(--ifinsta-border);
  --ifinsta-text-light: var(--ifinsta-text-primary);
  --ifinsta-txt-primary: var(--ifinsta-text-primary);
  --ifinsta-txt-secondary: var(--ifinsta-text-secondary);

  /* Brand and interactive aliases */
  --ifinsta-brand: #60A5FA;
  --ifinsta-brand-050: #172554;
  --ifinsta-brand-50: #172554;
  --ifinsta-brand-100: #1E3A8A;
  --ifinsta-primary-dark: #93C5FD;
  --ifinsta-primary-light: #1E3A8A;
  --ifinsta-primary-subtle: #172554;
  --ifinsta-primary-alpha-00: rgba(59, 130, 246, 0);
  --ifinsta-primary-alpha-05: rgba(59, 130, 246, 0.05);
  --ifinsta-primary-alpha-06: rgba(59, 130, 246, 0.06);
  --ifinsta-secondary-alpha-10: rgba(209, 213, 219, 0.1);
  --ifinsta-color-primary-ghost: rgba(59, 130, 246, 0.12);
  --ifinsta-color-primary-muted: #93C5FD;
  --ifinsta-shell-hover-bg: rgba(255, 255, 255, 0.05);

  /* Semantic aliases and accessible tints */
  --ifinsta-danger-950: #1C0A0A;
  --ifinsta-danger-alpha-12: rgba(239, 68, 68, 0.12);
  --ifinsta-danger-alpha-40: rgba(239, 68, 68, 0.4);
  --ifinsta-danger-light: #450A0A;
  --ifinsta-danger-tint: #450A0A;
  --ifinsta-danger-text: #FCA5A5;
  --ifinsta-error: #F87171;
  --ifinsta-error-50: #450A0A;
  --ifinsta-error-300: #FCA5A5;
  --ifinsta-error-600: #F87171;
  --ifinsta-success-alpha-05: rgba(16, 185, 129, 0.05);
  --ifinsta-success-alpha-12: rgba(16, 185, 129, 0.12);
  --ifinsta-success-alpha-25: rgba(16, 185, 129, 0.25);
  --ifinsta-success-light: #052E16;
  --ifinsta-success-tint: #052E16;
  --ifinsta-success-text: #6EE7B7;
  --ifinsta-color-success-ghost: rgba(16, 185, 129, 0.12);
  --ifinsta-warning-900: #FCD34D;
  --ifinsta-warning-alpha-12: rgba(245, 158, 11, 0.12);
  --ifinsta-warning-light: #451A03;
  --ifinsta-warning-text: #FCD34D;
  --ifinsta-info-200: #1E3A8A;
  --ifinsta-info-300: #93C5FD;
  --ifinsta-info-border: #2563EB;
  --ifinsta-info-light: #172554;
  --ifinsta-info-text: #93C5FD;

  /* Supporting palettes */
  --ifinsta-indigo-200: #A5B4FC;
  --ifinsta-indigo-300: #A5B4FC;
  --ifinsta-indigo-700: #C7D2FE;
  --ifinsta-indigo-900: #312E81;
  --ifinsta-purple-50: #2E1065;
  --ifinsta-purple-500: #A855F7;
  --ifinsta-purple-600: #C084FC;
  --ifinsta-purple-700: #D8B4FE;
  --ifinsta-violet-50: #2E1065;
  --ifinsta-violet-100: #3B0764;
  --ifinsta-violet-700: #C4B5FD;
  --ifinsta-violet-800: #A78BFA;
  --ifinsta-violet-alpha-05: rgba(139, 92, 246, 0.05);
  --ifinsta-violet-alpha-08: rgba(139, 92, 246, 0.08);
  --ifinsta-violet-alpha-10: rgba(139, 92, 246, 0.1);
  --ifinsta-violet-alpha-12: rgba(139, 92, 246, 0.12);
  --ifinsta-violet-alpha-25: rgba(139, 92, 246, 0.25);

  /* Communications */
  --ifinsta-avatar-gradient-primary: linear-gradient(135deg, #3B82F6, #1D4ED8);
  --ifinsta-avatar-gradient-group: linear-gradient(135deg, #818CF8, #7C3AED);
  --ifinsta-avatar-gradient-archived: linear-gradient(135deg, #6B7280, #374151);
  --ifinsta-chat-item-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --ifinsta-chat-item-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.45);
  --ifinsta-check-read: #60A5FA;
  --ifinsta-check-sent: #9CA3AF;
  --ifinsta-message-received: #202C33;
  --ifinsta-message-sent: #005C4B;
  --ifinsta-message-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  --ifinsta-messaging-bg: #0B141A;
  --ifinsta-messaging-bg-pattern: none;

  /* Guest surfaces */
  --ifinsta-guest-surface: var(--ifinsta-surface);
  --ifinsta-guest-surface-alt: var(--ifinsta-surface-1);
  --ifinsta-pattern-cool: none;

  /* Data table aliases */
  --ifinsta-dt-divider: #374151;
  --ifinsta-dt-divider-strong: #9CA3AF;
  --ifinsta-dt-muted: #9CA3AF;
  --ifinsta-dt-text: #F9FAFB;

  /* Property workspace */
  --ifinsta-prop-primary: #60A5FA;
  --ifinsta-prop-primary-hover: #93C5FD;
  --ifinsta-prop-primary-light: #172554;
  --ifinsta-prop-surface: var(--ifinsta-surface);
  --ifinsta-prop-surface-container: var(--ifinsta-surface-2);
  --ifinsta-prop-border: var(--ifinsta-border);
  --ifinsta-prop-occupied: #6EE7B7;
  --ifinsta-prop-occupied-bg: rgba(16, 185, 129, 0.15);
  --ifinsta-prop-vacant: #FCD34D;
  --ifinsta-prop-vacant-bg: rgba(245, 158, 11, 0.15);
  --ifinsta-prop-maintenance: #FDA4AF;
  --ifinsta-prop-maintenance-bg: rgba(244, 63, 94, 0.15);
  --ifinsta-prop-overdue: #FCA5A5;
  --ifinsta-prop-overdue-bg: rgba(239, 68, 68, 0.15);

  /* Wallet workspace */
  --ifinsta-wallet-primary: #60A5FA;
  --ifinsta-wallet-primary-light: #172554;
  --ifinsta-wallet-surface: var(--ifinsta-surface);
  --ifinsta-wallet-surface-container: var(--ifinsta-surface-2);
  --ifinsta-wallet-border: var(--ifinsta-border);
  --ifinsta-wallet-credit: #6EE7B7;
  --ifinsta-wallet-credit-bg: rgba(16, 185, 129, 0.15);
  --ifinsta-wallet-debit: #FCA5A5;
  --ifinsta-wallet-debit-bg: rgba(239, 68, 68, 0.15);
  --ifinsta-wallet-pending: #FCD34D;
  --ifinsta-wallet-pending-bg: rgba(245, 158, 11, 0.15);
  --ifinsta-wallet-completed: #6EE7B7;
  --ifinsta-wallet-completed-bg: rgba(16, 185, 129, 0.15);
  --ifinsta-wallet-failed: #FCA5A5;
  --ifinsta-wallet-failed-bg: rgba(239, 68, 68, 0.15);
  --ifinsta-wallet-held: #93C5FD;
  --ifinsta-wallet-held-bg: rgba(59, 130, 246, 0.15);

  /* Legacy visual aliases still consumed by first-party surfaces. These map
     old palette names onto the same dark semantic contract. */
  --ifinsta-accent: #60A5FA;
  --ifinsta-accent-light: #172554;
  --ifinsta-bg-aurora-1: rgba(37, 99, 235, 0.12);
  --ifinsta-bg-aurora-2: rgba(124, 58, 237, 0.1);
  --ifinsta-bg-grid-color: rgba(255, 255, 255, 0.06);
  --ifinsta-bg-hover: #374151;
  --ifinsta-bg-main: #111827;
  --ifinsta-bg-main-pattern: none;
  --ifinsta-bg-subtle: #1F2937;
  --ifinsta-blue-500: #60A5FA;
  --ifinsta-blue-500-rgb: 96, 165, 250;
  --ifinsta-border-color: #6B7280;
  --ifinsta-card-bg: #1F2937;
  --ifinsta-card-bg-active-gmail: #1E3A8A;
  --ifinsta-card-bg-gmail: #1F2937;
  --ifinsta-card-bg-hover-gmail: #374151;
  --ifinsta-card-border-active-gmail: #60A5FA;
  --ifinsta-card-border-gmail: #374151;
  --ifinsta-card-border-hover-gmail: #4B5563;
  --ifinsta-card-icon-bg-danger-gmail: #450A0A;
  --ifinsta-card-icon-bg-neutral-gmail: #374151;
  --ifinsta-card-icon-bg-primary-gmail: #172554;
  --ifinsta-card-icon-bg-success-gmail: #052E16;
  --ifinsta-card-icon-bg-warning-gmail: #451A03;
  --ifinsta-card-label-color-gmail: #D1D5DB;
  --ifinsta-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ifinsta-card-value-color-gmail: #F9FAFB;
  --ifinsta-danger-50: #450A0A;
  --ifinsta-danger-100: #7F1D1D;
  --ifinsta-danger-200: #991B1B;
  --ifinsta-danger-300: #FCA5A5;
  --ifinsta-danger-400: #F87171;
  --ifinsta-danger-alpha-08: rgba(239, 68, 68, 0.08);
  --ifinsta-danger-alpha-10: rgba(239, 68, 68, 0.1);
  --ifinsta-danger-alpha-15: rgba(239, 68, 68, 0.15);
  --ifinsta-danger-alpha-20: rgba(239, 68, 68, 0.2);
  --ifinsta-danger-alpha-30: rgba(239, 68, 68, 0.3);
  --ifinsta-danger-rgb: 239, 68, 68;
  --ifinsta-focus-outline: 2px solid #60A5FA;
  --ifinsta-glass-rgb: 31, 41, 55;
  --ifinsta-gmail-amber: #FBBF24;
  --ifinsta-gmail-amber-rgb: 251, 191, 36;
  --ifinsta-gmail-blue: #60A5FA;
  --ifinsta-gmail-blue-rgb: 96, 165, 250;
  --ifinsta-gmail-green: #34D399;
  --ifinsta-gmail-green-rgb: 52, 211, 153;
  --ifinsta-gmail-grey: #9CA3AF;
  --ifinsta-gmail-grey-rgb: 156, 163, 175;
  --ifinsta-gmail-red: #F87171;
  --ifinsta-gmail-red-rgb: 248, 113, 113;
  --ifinsta-gray-50: #111827;
  --ifinsta-gray-100: #1F2937;
  --ifinsta-gray-200: #374151;
  --ifinsta-gray-300: #4B5563;
  --ifinsta-gray-400: #9CA3AF;
  --ifinsta-gray-500: #D1D5DB;
  --ifinsta-gray-600: #D1D5DB;
  --ifinsta-gray-700: #E5E7EB;
  --ifinsta-gray-800: #F3F4F6;
  --ifinsta-gray-900: #F9FAFB;
  --ifinsta-gray-900-rgb: 249, 250, 251;
  --ifinsta-guest-accent: #60A5FA;
  --ifinsta-guest-accent-hover: #93C5FD;
  --ifinsta-guest-accent-rgb: 96, 165, 250;
  --ifinsta-guest-bg: #111827;
  --ifinsta-guest-cosmos-bg: #0B1020;
  --ifinsta-guest-bg-muted: #1F2937;
  --ifinsta-guest-bg-subtle: #1F2937;
  --ifinsta-guest-border: #6B7280;
  --ifinsta-guest-border-strong: #9CA3AF;
  --ifinsta-guest-gradient-soft: linear-gradient(180deg, #111827, #1F2937);
  --ifinsta-guest-primary: #60A5FA;
  --ifinsta-guest-primary-hover: #93C5FD;
  --ifinsta-guest-text: #F9FAFB;
  --ifinsta-guest-text-muted: #9CA3AF;
  --ifinsta-guest-text-secondary: #D1D5DB;
  --ifinsta-indigo: #A5B4FC;
  --ifinsta-indigo-400: #A5B4FC;
  --ifinsta-indigo-500: #818CF8;
  --ifinsta-indigo-500-rgb: 129, 140, 248;
  --ifinsta-indigo-600: #A5B4FC;
  --ifinsta-info: #60A5FA;
  --ifinsta-info-50: #172554;
  --ifinsta-info-100: #1E3A8A;
  --ifinsta-info-500: #60A5FA;
  --ifinsta-info-600: #93C5FD;
  --ifinsta-info-700: #BFDBFE;
  --ifinsta-info-800: #DBEAFE;
  --ifinsta-info-alpha-10: rgba(96, 165, 250, 0.1);
  --ifinsta-info-alpha-05: rgba(96, 165, 250, 0.05);
  --ifinsta-info-alpha-15: rgba(96, 165, 250, 0.15);
  --ifinsta-info-alpha-20: rgba(96, 165, 250, 0.2);
  --ifinsta-info-rgb: 96, 165, 250;
  --ifinsta-neutral-50: #111827;
  --ifinsta-neutral-100: #1F2937;
  --ifinsta-neutral-200: #374151;
  --ifinsta-neutral-300: #4B5563;
  --ifinsta-neutral-400: #9CA3AF;
  --ifinsta-neutral-500: #D1D5DB;
  --ifinsta-neutral-600: #D1D5DB;
  --ifinsta-neutral-700: #E5E7EB;
  --ifinsta-neutral-800: #F3F4F6;
  --ifinsta-neutral-900: #F9FAFB;
  --ifinsta-overlay-kbd: rgba(0, 0, 0, 0.78);
  --ifinsta-overlay-light: rgba(0, 0, 0, 0.45);
  --ifinsta-photo-studio-badge-rgb: 96, 165, 250;
  --ifinsta-pink-500: #F472B6;
  --ifinsta-pos-surface: #1F2937;
  --ifinsta-pos-surface-hover: #374151;
  --ifinsta-pos-surface-subtle: #111827;
  --ifinsta-primary-50: #172554;
  --ifinsta-primary-100: #1E3A8A;
  --ifinsta-primary-200: #1E40AF;
  --ifinsta-primary-300: #93C5FD;
  --ifinsta-primary-400: #60A5FA;
  --ifinsta-primary-alpha-04: rgba(59, 130, 246, 0.04);
  --ifinsta-primary-alpha-08: rgba(59, 130, 246, 0.08);
  --ifinsta-primary-alpha-10: rgba(59, 130, 246, 0.1);
  --ifinsta-primary-alpha-12: rgba(59, 130, 246, 0.12);
  --ifinsta-primary-alpha-15: rgba(59, 130, 246, 0.15);
  --ifinsta-primary-alpha-20: rgba(59, 130, 246, 0.2);
  --ifinsta-primary-alpha-25: rgba(59, 130, 246, 0.25);
  --ifinsta-primary-alpha-30: rgba(59, 130, 246, 0.3);
  --ifinsta-primary-alpha-40: rgba(59, 130, 246, 0.4);
  --ifinsta-primary-alpha-50: rgba(59, 130, 246, 0.5);
  --ifinsta-primary-rgb: 59, 130, 246;
  --ifinsta-rank-bronze-start: #B45309;
  --ifinsta-rank-gold-start: #F59E0B;
  --ifinsta-rank-silver-start: #9CA3AF;
  --ifinsta-s0-bg: #111827;
  --ifinsta-s0-pattern: none;
  --ifinsta-s1-bg: #1F2937;
  --ifinsta-s1-border: #374151;
  --ifinsta-s1-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  --ifinsta-s2-bg: #374151;
  --ifinsta-s2-border: #4B5563;
  --ifinsta-secondary-50: #111827;
  --ifinsta-secondary-50-rgb: 17, 24, 39;
  --ifinsta-secondary-100: #1F2937;
  --ifinsta-secondary-200: #374151;
  --ifinsta-secondary-300: #4B5563;
  --ifinsta-secondary-400: #9CA3AF;
  --ifinsta-secondary-500: #D1D5DB;
  --ifinsta-secondary-600: #D1D5DB;
  --ifinsta-secondary-700: #E5E7EB;
  --ifinsta-secondary-800: #F3F4F6;
  --ifinsta-secondary-900: #F9FAFB;
  --ifinsta-secondary-900-rgb: 249, 250, 251;
  --ifinsta-selector-hover: #374151;
  --ifinsta-shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.55);
  --ifinsta-shadow-complex-lg: 0 16px 32px rgba(0, 0, 0, 0.5);
  --ifinsta-shadow-complex-md: 0 8px 20px rgba(0, 0, 0, 0.45);
  --ifinsta-shadow-complex-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --ifinsta-shadow-primary: 0 8px 20px rgba(37, 99, 235, 0.3);
  --ifinsta-shadow-success: 0 8px 20px rgba(16, 185, 129, 0.25);
  --ifinsta-store-hero-bg: #172554;
  --ifinsta-store-link-bg: #1E3A8A;
  --ifinsta-store-link-danger-bg: #450A0A;
  --ifinsta-store-shell-bg: #111827;
  --ifinsta-story-ring-gradient: linear-gradient(45deg, var(--ifinsta-warning-500), var(--ifinsta-danger-500), var(--ifinsta-pink-500), var(--ifinsta-violet-500), var(--ifinsta-primary-600));
  --ifinsta-story-seen-ring: var(--ifinsta-secondary-400);
  --ifinsta-story-progress-bg: var(--ifinsta-white-alpha-30);
  --ifinsta-story-progress-fill: var(--ifinsta-white);
  --ifinsta-story-reader-bg: #0f172a;
  --ifinsta-success-50: #052E16;
  --ifinsta-success-100: #064E3B;
  --ifinsta-success-200: #065F46;
  --ifinsta-success-300: #6EE7B7;
  --ifinsta-success-400: #34D399;
  --ifinsta-success-800: #A7F3D0;
  --ifinsta-success-alpha-06: rgba(16, 185, 129, 0.06);
  --ifinsta-success-alpha-08: rgba(16, 185, 129, 0.08);
  --ifinsta-success-alpha-10: rgba(16, 185, 129, 0.1);
  --ifinsta-success-alpha-15: rgba(16, 185, 129, 0.15);
  --ifinsta-success-alpha-20: rgba(16, 185, 129, 0.2);
  --ifinsta-success-alpha-30: rgba(16, 185, 129, 0.3);
  --ifinsta-success-alpha-40: rgba(16, 185, 129, 0.4);
  --ifinsta-success-rgb: 16, 185, 129;
  --ifinsta-surface-hover: #374151;
  --ifinsta-surface-overlay: #1F2937;
  --ifinsta-tooltip-bg: #F9FAFB;
  --ifinsta-tooltip-text: #111827;
  --ifinsta-validation-error: #F87171;
  --ifinsta-validation-success: #34D399;
  --ifinsta-violet-500: #A78BFA;
  --ifinsta-violet-500-rgb: 167, 139, 250;
  --ifinsta-violet-600: #C4B5FD;
  --ifinsta-warning-alpha-08: rgba(245, 158, 11, 0.08);
  --ifinsta-warning-alpha-10: rgba(245, 158, 11, 0.1);
  --ifinsta-warning-alpha-15: rgba(245, 158, 11, 0.15);
  --ifinsta-warning-alpha-20: rgba(245, 158, 11, 0.2);
  --ifinsta-warning-alpha-30: rgba(245, 158, 11, 0.3);
  --ifinsta-warning-rgb: 245, 158, 11;
  --ifinsta-white-rgb: 255, 255, 255;
  --ifinsta-win11-accent: #60A5FA;
  --ifinsta-win11-border: #4B5563;

  /* POS and analytical cards */
  --ifinsta-pos-success: #10B981;
  --ifinsta-pos-success-dark: #047857;
  --ifinsta-pos-success-light: #052E16;
  --ifinsta-stat-badge-bg: rgba(59, 130, 246, 0.15);
  --ifinsta-stat-badge-color: #93C5FD;
  --ifinsta-stat-bar-bg: #374151;
  --ifinsta-stat-bar-fill: #60A5FA;
  --ifinsta-stat-glass-bg: rgba(31, 41, 55, 0.78);
  --ifinsta-stat-glass-border: rgba(255, 255, 255, 0.12);
  --ifinsta-stat-gradient-danger: linear-gradient(135deg, #7F1D1D, #450A0A);
  --ifinsta-stat-gradient-info: linear-gradient(135deg, #1E3A8A, #172554);
  --ifinsta-stat-gradient-primary: linear-gradient(135deg, #1E40AF, #172554);
  --ifinsta-stat-gradient-success: linear-gradient(135deg, #065F46, #052E16);
  --ifinsta-stat-gradient-warning: linear-gradient(135deg, #78350F, #451A03);
  --ifinsta-stat-progress-bg: #374151;
  --ifinsta-stat-progress-fill-danger: #F87171;
  --ifinsta-stat-progress-fill-primary: #60A5FA;
  --ifinsta-stat-progress-fill-success: #34D399;
  --ifinsta-stat-progress-fill-warning: #FBBF24;
  --ifinsta-stat-sparkline-color: #60A5FA;
  --ifinsta-stat-sparkline-color-down: #F87171;
  --ifinsta-stat-sparkline-color-up: #34D399;
  --ifinsta-raised: var(--ifinsta-surface-2);
  --ifinsta-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  --ifinsta-shadow-premium: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   EXPLICIT LIGHT: User chose light — reset to variables.css defaults
   This block re-asserts light tokens in case any prior dark override
   could otherwise leak through (defensive; same values as :root in
   variables.css).
   ========================================================================== */
:root[data-theme="light"] {
  --ifinsta-primary: #1A56DB;
  --ifinsta-primary-hover: #3B6FE8;
  --ifinsta-primary-500: #3b82f6;
  --ifinsta-primary-600: #2563eb;
  --ifinsta-primary-700: #1d4ed8;
  --ifinsta-primary-800: #1e40af;
  --ifinsta-primary-900: #1e3a8a;

  --ifinsta-success: #059669;
  --ifinsta-success-500: #10b981;
  --ifinsta-success-600: #059669;
  --ifinsta-success-700: #047857;
  --ifinsta-danger: #DC2626;
  --ifinsta-danger-500: #f43f5e;
  --ifinsta-danger-600: #e11d48;
  --ifinsta-danger-700: #be123c;
  --ifinsta-danger-800: #991B1B;
  --ifinsta-warning: #D97706;
  --ifinsta-warning-500: #f59e0b;
  --ifinsta-warning-600: #d97706;

  --ifinsta-text-primary: #111827;
  --ifinsta-text-secondary: #374151;
  --ifinsta-text-muted: #6B7280;
  --ifinsta-text-inverse: #ffffff;

  --ifinsta-surface-1: #F9FAFB;
  --ifinsta-surface-2: #F3F4F6;
  --ifinsta-surface-card: #ffffff;
  --ifinsta-bg: #ffffff;
  --ifinsta-bg-elevated: #ffffff;
  --ifinsta-bg-secondary: #f8fafc;
  --ifinsta-bg-tertiary: #f1f5f9;

  --ifinsta-border: #D1D5DB;
  --ifinsta-border-light: #f1f5f9;
  --ifinsta-border-focus: var(--ifinsta-primary-400);

  --ifinsta-sidebar-bg: #ffffff;
  --ifinsta-sidebar-text: #334155;
  --ifinsta-sidebar-hover: var(--ifinsta-black-alpha-04);
  --ifinsta-sidebar-active: var(--ifinsta-primary-alpha-10);

  --ifinsta-topbar-bg: rgba(255, 255, 255, 0.85);
  --ifinsta-topbar-border: var(--ifinsta-black-alpha-05);
  --ifinsta-topbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

  --ifinsta-dropdown-bg: rgba(255, 255, 255, 0.98);
  --ifinsta-dropdown-border: var(--ifinsta-black-alpha-06);
  --ifinsta-dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --ifinsta-dropdown-item-hover: var(--ifinsta-black-alpha-04);
  --ifinsta-dropdown-item-active: var(--ifinsta-primary-alpha-08);

  --ifinsta-form-placeholder: #4B5563;

  --ifinsta-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ifinsta-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --ifinsta-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
  --ifinsta-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08);
  --ifinsta-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.1);

  --ifinsta-glass-bg: rgba(255, 255, 255, 0.7);
  --ifinsta-glass-border: rgba(255, 255, 255, 0.5);
  --ifinsta-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

  --ifinsta-focus-ring: rgba(59, 130, 246, 0.5);

  --ifinsta-color-primary: #1A56DB;
  --ifinsta-color-primary-hover: #3B6FE8;
  --ifinsta-color-primary-tint: #E8F0FE;
  --ifinsta-color-primary-subtle: #F0F4FF;
  --ifinsta-color-brand: #0F2B5B;
  --ifinsta-color-text-primary: #111827;
  --ifinsta-color-text-secondary: #374151;
  --ifinsta-color-text-muted: #6B7280;
  --ifinsta-color-surface-1: #F9FAFB;
  --ifinsta-color-surface-2: #F3F4F6;
  --ifinsta-color-border: #D1D5DB;
  --ifinsta-color-danger: #DC2626;
  --ifinsta-color-danger-tint: #FEE2E2;
  --ifinsta-color-warning: #D97706;
  --ifinsta-color-warning-tint: #FEF3C7;
  --ifinsta-color-success: #059669;
  --ifinsta-color-success-tint: #D1FAE5;

  --ifinsta-dt-grid: #e0e0e0;
  --ifinsta-dt-grid-strong: #d0d0d0;
  --ifinsta-dt-row-alt: #fafafa;
  --ifinsta-dt-row-hover: #f0f4ff;
  --ifinsta-dt-header-bg: #edf0f5;
  --ifinsta-dt-header-text: #2c3e50;

  /* P2-14: Light-mode --msg-* re-declarations removed (formerly lines 255-269).
     These duplicated communications/tokens.css defaults and were unnecessarily
     re-declared outside the [data-theme="dark"] block. */

  /* Input & Scrollbar (light defaults) */
  --ifinsta-input-bg: var(--ifinsta-surface);
  --ifinsta-input-text: var(--ifinsta-text-primary);
  --ifinsta-input-border: var(--ifinsta-border);
  --ifinsta-input-placeholder: var(--ifinsta-form-placeholder);
  --ifinsta-scrollbar-track: transparent;
  --ifinsta-scrollbar-thumb: #d1d5db;
  --ifinsta-scrollbar-thumb-hover: #9ca3af;
}

/* ==========================================================================
   COMPONENT-LEVEL DARK SELECTORS
   These apply styles to specific component classes in dark mode.
   All theme styling is driven by [data-theme]. Auto mode is resolved by JS.
   ========================================================================== */

/* Stat Cards */
[data-theme="dark"] .ifinsta-stat-card {
 border: 1px solid var(--ifinsta-border)
}
[data-theme="dark"] .ifinsta-stat-card:hover {
  border-color: var(--ifinsta-primary-alpha-30);
}
[data-theme="dark"] .ifinsta-stat-card__value {
  color: var(--ifinsta-text-primary);
}
[data-theme="dark"] .ifinsta-summary-grid__item {
  background: linear-gradient(145deg, var(--ifinsta-secondary-800) 0%, var(--ifinsta-secondary-900) 100%);
}

/* Subscriptions */
[data-theme="dark"] .ifinsta-usage-metric {
  background: var(--ifinsta-secondary-800);
}
[data-theme="dark"] .ifinsta-usage-metric:hover {
  background: var(--ifinsta-secondary-700);
}
[data-theme="dark"] .ifinsta-usage-metric__bar {
  background: var(--ifinsta-secondary-700);
}
[data-theme="dark"] .ifinsta-usage-metric__icon {
  background: var(--ifinsta-secondary-700);
}

/* Assistant */
[data-theme="dark"] .ifinsta-assistant {
  --ast-panel-bg: #171e2e;
  --ast-panel-border: #263045;
  --ast-chat-bg: #111827;
  --ast-toolbar-bg: #171e2e;
  --ast-composer-bg: #171e2e;
  --ast-composer-inner-bg: #111827;
  --ast-composer-border: #263045;
  --ast-toolbar-border: #263045;
  --ast-text: #e2e8f0;
  --ast-text-dark: #f1f5f9;
  --ast-text-secondary: #94a3b8;
  --ast-text-muted: #4b5563;
  --ast-border: #263045;
  --ast-msg-user-bg: var(--ifinsta-primary, #2563eb);
  --ast-msg-user-text: #ffffff;
  --ast-msg-assistant-bg: #1e2640;
  --ast-msg-assistant-border: #263045;
  --ast-msg-assistant-text: #e2e8f0;
  --ast-skeleton-from: #1e2640;
  --ast-skeleton-to: #263050;
  --ast-chip-bg: #1a2540;
  --ast-chip-border: rgba(37, 99, 235, 0.5);
  --ast-chip-text: #60a5fa;
  --ast-chip-hover-bg: var(--ifinsta-primary, #2563eb);
  --ast-chip-hover-text: #ffffff;
  --ast-code-bg: #0d1117;
  --ast-code-border: #263045;
  --ast-code-text: #c9d1d9;
  --ast-inline-code-bg: #1e2640;
  --ast-inline-code-text: #f97583;
  --ast-dialog-bg: #1e2640;
  --ast-dialog-border: #263045;
  --ast-dialog-overlay: rgba(0, 0, 0, 0.65);
  --ast-toast-bg: #e2e8f0;
  --ast-toast-text: #111827;
}

[data-theme="dark"] .ifinsta-assistant__list-item--active {
  background: rgba(var(--ifinsta-primary-rgb), 0.15) !important;
  border-color: rgba(var(--ifinsta-primary-rgb), 0.35) !important;
}
[data-theme="dark"] .ifinsta-assistant__list-item:hover {
  background: var(--ifinsta-surface-2);
}
[data-theme="dark"] .ifinsta-assistant__list-delete:hover {
  color: var(--ifinsta-danger-400, #f87171);
  border-color: var(--ifinsta-danger-800, #7f1d1d);
  background: var(--ifinsta-danger-950, #1c0a0a);
}
[data-theme="dark"] .ifinsta-assistant__progress-bar {
  background: #1e3a6e;
}
[data-theme="dark"] .ifinsta-assistant--busy .ifinsta-assistant__composer-inner {
  background: #1c1600;
}
[data-theme="dark"] .ifinsta-assistant__messages::-webkit-scrollbar-thumb,
[data-theme="dark"] .ifinsta-assistant__list::-webkit-scrollbar-thumb {
  background: #263045;
}
[data-theme="dark"] .ifinsta-assistant__messages::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .ifinsta-assistant__list::-webkit-scrollbar-thumb:hover {
  background: #374151;
}

/* Shared controls whose foreground and filled background require different
   brand ramps cannot be expressed by one token substitution alone. */
:root[data-theme="dark"] .ifinsta-btn--primary,
:root[data-theme="dark"] .ifinsta-btn--primary:hover,
:root[data-theme="dark"] .ifinsta-btn--primary:active {
  background: #60A5FA;
  border-color: #60A5FA;
  color: #111827;
}

:root[data-theme="dark"] .welcome-btn--primary,
:root[data-theme="dark"] .welcome-btn--dark,
:root[data-theme="dark"] .welcome-btn--primary:hover,
:root[data-theme="dark"] .welcome-btn--dark:hover,
:root[data-theme="dark"] .contact-btn--primary,
:root[data-theme="dark"] .dfilter__chip--active {
  background: #60A5FA;
  border-color: #60A5FA;
  color: #111827;
}

:root[data-theme="dark"] .ifinsta-guest-header__cta,
:root[data-theme="dark"] .ifinsta-guest-btn--primary,
:root[data-theme="dark"] .ifinsta-guest-support-pill__segment[aria-expanded="true"],
:root[data-theme="dark"] .ifinsta-guest-chat__send,
:root[data-theme="dark"] .features-cta__btn,
:root[data-theme="dark"] .pricing-billing-toggle__btn.is-active,
:root[data-theme="dark"] .pricing-plan-card__badge,
:root[data-theme="dark"] .pricing-plan-card__cta--primary,
:root[data-theme="dark"] .pricing-waitlist__button,
:root[data-theme="dark"] .error-btn--primary,
:root[data-theme="dark"] .error-page__nav-cta {
  background: #60A5FA;
  border-color: #60A5FA;
  color: #111827;
}

:root[data-theme="dark"] .pricing-billing-toggle__savings {
  background: #047857;
  color: #FFFFFF;
}

:root[data-theme="dark"] .pricing-plan-card__discount-badge {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.3);
  color: #FCA5A5;
}

:root[data-theme="dark"] .pricing-plan-card__countdown {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #FCD34D;
}

:root[data-theme="dark"] .pricing-plan-card__whatsapp-highlight {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #6EE7B7;
}

:root[data-theme="dark"] .error-btn--secondary {
  background: var(--ifinsta-surface-2);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] img[src*="ifinsta-text.svg"] {
  filter: grayscale(1) brightness(0) invert(1);
}

/* Receipt/document workspaces keep only the explicitly annotated paper canvas
   white. Rails, toolbars, docks, inspectors, and share controls are app chrome. */
:root[data-theme="dark"] body.receipt-print--preview,
:root[data-theme="dark"] .ifinsta-receipt-editor,
:root[data-theme="dark"] .ifinsta-receipt-editor__canvas,
:root[data-theme="dark"] .ifinsta-pos__share-workspace,
:root[data-theme="dark"] .ifinsta-pos__share-workspace-preview {
  background: var(--ifinsta-bg);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .ifinsta-receipt-editor__rail,
:root[data-theme="dark"] .ifinsta-receipt-editor__inspector,
:root[data-theme="dark"] .ifinsta-receipt-editor__panel,
:root[data-theme="dark"] .ifinsta-pos__share-workspace-rail,
:root[data-theme="dark"] .ifinsta-pos__share-workspace-panel,
:root[data-theme="dark"] .ifinsta-pos__share-workspace-controls,
:root[data-theme="dark"] .receipt-print--preview .stamp-toolbar,
:root[data-theme="dark"] .ifinsta-receipt-editor__dock {
  background: var(--ifinsta-bg-elevated);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] :is(
  .ifinsta-receipt-editor__nav-item,
  .ifinsta-receipt-editor__settings,
  .ifinsta-receipt-editor__inspector-close,
  .ifinsta-receipt-editor__dock button,
  .ifinsta-receipt-editor__dock a,
  .ifinsta-pos__share-workspace-nav button,
  .ifinsta-pos__share-workspace-command-grid button
) {
  color: var(--ifinsta-text-secondary);
  border-color: var(--ifinsta-border);
}

:root[data-theme="dark"] :is(
  .ifinsta-receipt-editor__nav-item,
  .ifinsta-receipt-editor__settings,
  .ifinsta-receipt-editor__dock button,
  .ifinsta-receipt-editor__dock a,
  .receipt-print--preview .stamp-toolbar__group
):hover {
  background: var(--ifinsta-surface-2);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .receipt-print--preview .stamp-toolbar :is(select, input[type="color"], .tb-btn),
:root[data-theme="dark"] .ifinsta-pos__share-workspace :is(input, select, textarea) {
  background: var(--ifinsta-input-bg);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-input-text);
}

:root[data-theme="dark"] :is(
  .ifinsta-receipt-editor__nav-item.is-active,
  .ifinsta-receipt-editor__dock button.is-primary,
  .ifinsta-pos__share-workspace-nav .is-active,
  .ifinsta-pos__share-workspace-finalize
) {
  background: var(--ifinsta-primary-500);
  border-color: var(--ifinsta-primary-500);
  color: var(--ifinsta-text-inverse);
}

/* Discover/storefront legacy layouts contain translucent light cards that
   cannot be expressed through their older local variables. Keep media
   overlays untouched, but normalize every application/content surface. */
:root[data-theme="dark"] :is(
  .discover-card,
  .discover-main-panel,
  .discover-actions-bar,
  .discover-card--store,
  .discover-card--product.discover-card--grid,
  .discover-checkout-panel,
  .discover-checkout-state,
  .discover-brand-context__surface,
  .discover-product-thumbnail,
  .discover-product-info,
  .discover-contact-card,
  .discover-contact-method,
  .discover-market-header,
  .discover-market-hero__search-block,
  .discover-market-hero__signal,
  .discover-quick-link,
  .discover-market-stat,
  .discover-market-spotlight__featured,
  .discover-market-brief__row,
  .discover-rail-btn,
  .discover-copilot__suggestion,
  .discover-copilot-advisor__signal,
  .discover-copilot__tray,
  .discover-browse-topbar,
  .discover-sidebar-panel,
  .discover-pdp-ctas,
  .discover-pdp-cta-btn--secondary,
  .discover-pdp-variant-swatch,
  .discover-hero-search__wrapper,
  .discover-hero__category-chip,
  .discover-hero__stats-card,
  .discover-browse-categories__chip,
  .discover-feature-tile,
  .discover-market-showcase,
  .discover-store-overview__panel,
  .discover-store-overview__button--ghost,
  .discover-checkout-hero,
  .discover-checkout-recommendations,
  .discover-section,
  .discover-pdp-bargain,
  .discover-checkout-assurance__card,
  .discover-card__image-wrap,
  .discover-store-header,
  .discover-store-profile__main,
  .discover-store-logo,
  .discover-tabs--storefront,
  .discover-pdp-related,
  .discover-story-chip,
  .discover-story-card,
  .discover-story-viewer-list__item
),
:root[data-theme="dark"] :is(
  .storefront-sidebar__card,
  .discover-pdp-gallery,
  .discover-pdp-info,
  .discover-pdp-shipping__box,
  .discover-pdp-supplier-card,
  .discover-pdp-details-section
) {
  background: var(--ifinsta-surface-card);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] :is(
  .discover-store-masthead__tab--active,
  .discover-link-all,
  .discover-pdp-panel__action,
  .discover-pdp-shipping__change,
  .discover-pdp-supplier-browse,
  .discover-pdp-tab--active
) {
  color: var(--ifinsta-primary-hover);
}

:root[data-theme="dark"] :is(
  .discover-section-count,
  .sf-cat-lane__count,
  .discover-pdp-shipping__disclaimer,
  .discover-pdp-trust-item
) {
  color: var(--ifinsta-text-secondary);
}

:root[data-theme="dark"] :is(.follow-btn, .discover-pdp-cta-btn--primary) {
  background: var(--ifinsta-primary-hover);
  border-color: var(--ifinsta-primary-hover);
  color: var(--ifinsta-text-inverse);
}

:root[data-theme="dark"] :is(
  .discover-tab,
  .discover-browse-section-label,
  .discover-results-count,
  .discover-sort-select-wrap__label
) {
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-mobile-filter-btn {
  background: var(--ifinsta-surface-2);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-cart-fab__count {
  color: var(--ifinsta-text-inverse);
}

:root[data-theme="dark"] .discover-card__cta-btn--overlay {
  background: color-mix(in srgb, var(--ifinsta-bg-elevated) 94%, transparent);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-card__cta-btn--overlay:hover {
  background: var(--ifinsta-bg-elevated);
  border-color: var(--ifinsta-primary-hover);
  color: var(--ifinsta-primary-hover);
}

:root[data-theme="dark"] .discover-pdp-media-action {
  background: color-mix(in srgb, var(--ifinsta-bg-elevated) 94%, transparent);
  border: 1px solid var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] :is(
  .discover-form-control,
  .discover-copilot__input,
  .discover-manage-field__control,
  .discover-manage-color-control,
  .discover-pdp-ship-to__input
) {
  background: var(--ifinsta-input-bg);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-input-text);
}

:root[data-theme="dark"] :is(
  .discover-manage-upload,
  .discover-manage-choice,
  .discover-manage-theme,
  .discover-manage-summary__row,
  .discover-manage-preview__chips span
) {
  background: var(--ifinsta-surface-2);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-secondary);
}

/* ==========================================================================
   GLOBAL NESTED SCROLLBARS — Dark
   The global * rule in main.css delegates to --ifinsta-scrollbar-* tokens
   (set under :root[data-theme="dark"] above). These selectors extend that
   coverage to deeply-nested contexts that might bypass the global rule.
   ========================================================================== */
[data-theme="dark"] .modal,
[data-theme="dark"] iframe body,
[data-theme="dark"] .receipt-html-preview,
[data-theme="dark"] .ifinsta-receipt-viewport {
  scrollbar-color: var(--ifinsta-scrollbar-thumb) var(--ifinsta-scrollbar-track);
}

/* Ensure scrollbar tokens are applied inside all discover surfaces */
[data-theme="dark"] .discover-container,
[data-theme="dark"] .discover-page-stack,
[data-theme="dark"] .discover-checkout-shell,
[data-theme="dark"] .discover-checkout-layout {
  scrollbar-color: var(--ifinsta-scrollbar-thumb) var(--ifinsta-scrollbar-track);
}

/* ── Receipt paper exception: only the paper canvas stays white. ── */
[data-theme="dark"] .a4-page,
[data-theme="dark"] .receipt-paper,
[data-theme="dark"] .thermal-paper {
  background: #ffffff !important;
  color: #111827 !important;
}

[data-theme="dark"] .a4-page .doc-label,
[data-theme="dark"] .receipt-paper .doc-label,
[data-theme="dark"] .thermal-paper .doc-label {
  color: #6b7280 !important;
}

/* Receipt viewport scrollbar — dark while paper stays white */
[data-theme="dark"] .receipt-print--preview {
  scrollbar-color: var(--ifinsta-scrollbar-thumb) var(--ifinsta-scrollbar-track);
}

[data-theme="dark"] .receipt-print--preview::-webkit-scrollbar {
  width: 8px;
}

[data-theme="dark"] .receipt-print--preview::-webkit-scrollbar-track {
  background: var(--ifinsta-scrollbar-track);
}

[data-theme="dark"] .receipt-print--preview::-webkit-scrollbar-thumb {
  background: var(--ifinsta-scrollbar-thumb);
  border-radius: 4px;
}

[data-theme="dark"] .receipt-print--preview::-webkit-scrollbar-thumb:hover {
  background: var(--ifinsta-scrollbar-thumb-hover);
}

/* ==========================================================================
   DISCOVER — Dark hover contrast for product cards, carousels, and overlays
   ========================================================================== */

/* Product card hover */
:root[data-theme="dark"] .discover-card--product:hover {
  border-color: var(--ifinsta-border-hover);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .discover-card--product:hover .discover-card__title,
:root[data-theme="dark"] .discover-card--product:hover .discover-card__name {
  color: var(--ifinsta-primary-hover);
}

/* Carousel controls and dots */
:root[data-theme="dark"] .discover-carousel__control {
  background: var(--ifinsta-surface-2);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-carousel__control:hover {
  background: var(--ifinsta-surface-hover);
  border-color: var(--ifinsta-primary-hover);
  color: var(--ifinsta-primary-hover);
}

:root[data-theme="dark"] .discover-carousel__dot {
  background: var(--ifinsta-secondary-400);
}

:root[data-theme="dark"] .discover-carousel__dot--active {
  background: var(--ifinsta-primary-hover);
}

/* Cart action buttons on cards */
:root[data-theme="dark"] .discover-card__action {
  background: var(--ifinsta-surface-2);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-card__action:hover {
  background: var(--ifinsta-primary-500);
  border-color: var(--ifinsta-primary-500);
  color: var(--ifinsta-text-inverse);
}

/* Card overlay (e.g. quick-add) */
:root[data-theme="dark"] .discover-card__overlay {
  background: rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   DISCOVER — Cart page dark remediation
   ========================================================================== */

:root[data-theme="dark"] .discover-checkout-item {
  background: var(--ifinsta-surface-card);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-checkout-item__media {
  background: var(--ifinsta-surface-2);
  border-color: var(--ifinsta-border);
}

:root[data-theme="dark"] .discover-checkout-item__name {
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-checkout-item__price {
  color: var(--ifinsta-text-secondary);
}

:root[data-theme="dark"] .discover-checkout-qty {
  background: var(--ifinsta-surface-2);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-checkout-qty__btn {
  background: var(--ifinsta-surface-hover);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-checkout-qty__btn:hover {
  background: var(--ifinsta-primary-500);
  color: var(--ifinsta-text-inverse);
}

:root[data-theme="dark"] .discover-checkout-qty__value {
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-checkout-summary {
  background: var(--ifinsta-surface-card);
  border-color: var(--ifinsta-border);
}

:root[data-theme="dark"] .discover-checkout-summary__row {
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-secondary);
}

:root[data-theme="dark"] .discover-checkout-summary__row--total {
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-checkout-state {
  background: var(--ifinsta-surface-card);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-checkout-state__icon {
  color: var(--ifinsta-text-muted);
}

:root[data-theme="dark"] .discover-checkout-state__title {
  color: var(--ifinsta-text-primary);
}

:root[data-theme="dark"] .discover-checkout-state__text {
  color: var(--ifinsta-text-secondary);
}

:root[data-theme="dark"] .discover-checkout-error {
  background: var(--ifinsta-danger-light);
  border-color: var(--ifinsta-danger-alpha-30);
  color: var(--ifinsta-danger-text);
}

:root[data-theme="dark"] .discover-checkout-loading {
  color: var(--ifinsta-text-muted);
}

/* Disabled state */
:root[data-theme="dark"] .discover-btn--primary:disabled {
  background: var(--ifinsta-secondary-400);
  border-color: var(--ifinsta-secondary-400);
  color: var(--ifinsta-text-muted);
  opacity: 0.6;
}

/* Focus states for cart */
:root[data-theme="dark"] .discover-checkout-item:focus-within,
:root[data-theme="dark"] .discover-checkout-qty:focus-within {
  outline: 2px solid var(--ifinsta-focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   MERCHANT — Payment settings cards dark remediation
   ========================================================================== */

[data-theme="dark"] .ifinsta-payment-method-card {
  background: var(--ifinsta-surface-card);
  border-color: var(--ifinsta-border);
  color: var(--ifinsta-text-primary);
}

[data-theme="dark"] .ifinsta-payment-method-card__header {
  border-bottom-color: var(--ifinsta-border);
}

[data-theme="dark"] .ifinsta-payment-method-card__name {
  color: var(--ifinsta-text-primary);
}

[data-theme="dark"] .ifinsta-payment-method-card__description {
  color: var(--ifinsta-text-muted);
}

[data-theme="dark"] .ifinsta-payment-method-card__body {
  background: var(--ifinsta-surface-2);
}

[data-theme="dark"] .ifinsta-payment-method-card__integration {
  border-top-color: var(--ifinsta-border);
}

[data-theme="dark"] .ifinsta-payment-method-card__integration-text {
  color: var(--ifinsta-text-muted);
}

/* Icon backgrounds — use dark-mode tints instead of light ones */
[data-theme="dark"] .ifinsta-payment-method-card__icon--cash {
  background: var(--ifinsta-success-light);
  color: var(--ifinsta-success-text);
}

[data-theme="dark"] .ifinsta-payment-method-card__icon--mpesa,
[data-theme="dark"] .ifinsta-payment-method-card__icon--mobile_money {
  background: var(--ifinsta-success-600);
  color: white;
}

[data-theme="dark"] .ifinsta-payment-method-card__icon--card {
  background: var(--ifinsta-primary-light);
  color: var(--ifinsta-primary-hover);
}

[data-theme="dark"] .ifinsta-payment-method-card__icon--bank {
  background: var(--ifinsta-surface-2);
  color: var(--ifinsta-text-secondary);
}

/* Toggle hover in cards */
[data-theme="dark"] .ifinsta-payment-method-card:hover {
  border-color: var(--ifinsta-border-hover);
}

/* Settings group headings and inputs inside payment cards */
[data-theme="dark"] .ifinsta-payment-method-card .ifinsta-settings-input__label {
  color: var(--ifinsta-text-secondary);
}

[data-theme="dark"] .ifinsta-payment-method-card .ifinsta-input {
  background: var(--ifinsta-input-bg);
  border-color: var(--ifinsta-input-border);
  color: var(--ifinsta-input-text);
}

[data-theme="dark"] .ifinsta-payment-method-card .ifinsta-form-select {
  background: var(--ifinsta-input-bg);
  border-color: var(--ifinsta-input-border);
  color: var(--ifinsta-input-text);
}

/* ==========================================================================
   SEGMENTED SUPPORT PILL — Dark
   ========================================================================== */

[data-theme="dark"] .ifinsta-guest-support-pill {
  background: var(--ifinsta-surface-card);
  border-color: var(--ifinsta-border);
  box-shadow: var(--ifinsta-shadow-lg);
}

[data-theme="dark"] .ifinsta-guest-support-pill__segment {
  color: var(--ifinsta-text-secondary);
}

[data-theme="dark"] .ifinsta-guest-support-pill__segment:hover {
  background: var(--ifinsta-surface-hover);
  color: var(--ifinsta-text-primary);
}

[data-theme="dark"] .ifinsta-guest-support-pill__segment[aria-expanded="true"] {
  background: var(--ifinsta-primary-alpha-15);
  color: var(--ifinsta-primary-hover);
}

[data-theme="dark"] .ifinsta-guest-support-pill__divider {
  background: var(--ifinsta-border);
}

[data-theme="dark"] .ifinsta-guest-support-pill__menu {
  background: var(--ifinsta-surface-card);
  border-color: var(--ifinsta-border);
  box-shadow: var(--ifinsta-shadow-xl);
}

[data-theme="dark"] .ifinsta-guest-support-pill__action:hover {
  border-color: var(--ifinsta-primary-hover);
}

[data-theme="dark"] .ifinsta-guest-support-pill__action-body strong {
  color: var(--ifinsta-text-primary);
}

[data-theme="dark"] .ifinsta-guest-support-pill__action-body span {
  color: var(--ifinsta-text-muted);
}

/* ==========================================================================
   APP SUPPORT PILL — Dark mode overrides
   ========================================================================== */

[data-theme="dark"] .ifinsta-app-support-pill {
  background: var(--ifinsta-surface-card);
  border-color: var(--ifinsta-border);
  box-shadow: var(--ifinsta-shadow-lg);
}

[data-theme="dark"] .ifinsta-app-support-pill__segment {
  color: var(--ifinsta-text-secondary);
}

[data-theme="dark"] .ifinsta-app-support-pill__segment:hover {
  background: var(--ifinsta-surface-hover);
  color: var(--ifinsta-text-primary);
}

[data-theme="dark"] .ifinsta-app-support-pill__divider {
  background: var(--ifinsta-border);
}

[data-theme="dark"] .ifinsta-app-support-pill .ifinsta-notification-fab__popover {
  background-color: var(--ifinsta-bg);
  border-color: var(--ifinsta-border);
}

/* ==========================================================================
   RECEIPT PREVIEW — Dark viewport with white paper canvas
   The receipt_print.html component defines its own --receipt-* token
   system in an inline <style>. These overrides darken the viewport,
   toolbar, and shell while preserving the paper surface as white.
   ========================================================================== */

:root[data-theme="dark"] {
  /* Viewport and chrome (must be dark) */
  --receipt-bg: #1a1d23;
  --receipt-toolbar-bg: rgba(30, 34, 41, 0.97);
  --receipt-toolbar-text: #e2e8f0;
  --receipt-toolbar-lbl: #94a3b8;
  /* Paper surface (stays white) */
  --receipt-paper: #ffffff;
  --receipt-soft: #e2e8f0;
  --receipt-ink: #101828;
  --receipt-muted: #667085;
  --receipt-line: #d0d5dd;
  --receipt-accent: #1a3a6b;
  --receipt-alert: #b93815;
  --receipt-accent-blue: #0078d4;
  --receipt-watermark: rgba(16, 24, 40, 0.06);
  --receipt-footer-muted: #98a2b3;
  --receipt-bill-label: #344054;
  --receipt-bill-body: #4b5565;
  /* A4-specific tokens */
  --receipt-a4-accent: #344054;
  --receipt-a4-muted: #667085;
  --receipt-a4-text: #101828;
  --receipt-a4-surface: #f2f4f7;
  --receipt-a4-label: #344054;
  --receipt-a4-line: #d0d5dd;
}

/* Dark scrollbar for the receipt preview shell */
[data-theme="dark"] .paper-preview-shell {
  scrollbar-color: var(--ifinsta-scrollbar-thumb) var(--ifinsta-scrollbar-track);
}

[data-theme="dark"] .paper-preview-shell::-webkit-scrollbar {
  width: 8px;
}

[data-theme="dark"] .paper-preview-shell::-webkit-scrollbar-track {
  background: var(--ifinsta-scrollbar-track);
}

[data-theme="dark"] .paper-preview-shell::-webkit-scrollbar-thumb {
  background: var(--ifinsta-scrollbar-thumb);
  border-radius: 4px;
}

[data-theme="dark"] .paper-preview-shell::-webkit-scrollbar-thumb:hover {
  background: var(--ifinsta-scrollbar-thumb-hover);
}

/* Dark theme for the POS receipt editor workspace (already tokenized in dark.css
   via .ifinsta-receipt-editor and .ifinsta-receipt-editor__* selectors added above) */

/* Thermal paper preview maintains white for the receipt itself */
[data-theme="dark"] .receipt-print--thermal .receipt-page {
  background: #ffffff;
}

/* Embedded receipt preview viewport */
[data-theme="dark"] .ifinsta-receipt-embedded {
  scrollbar-color: var(--ifinsta-scrollbar-thumb) var(--ifinsta-scrollbar-track);
}