/**
 * Light Mode Color Optimization
 *
 * Optimizes colors for bright screens with better contrast and readability.
 * Ensures all text meets WCAG AA contrast standards (4.5:1 for normal text).
 *
 * IMPORTANT: This file must load AFTER all other stylesheets to override them.
 */

/* Force browser to recognize this file - add a unique marker */
html.light {
  /* Light mode optimization active */
}

/* ===== Light Mode Color Tokens ===== */
:root {
  /* Light mode text colors - optimized for bright screens */
  --light-text-primary: #0f172a;
  /* Slate 900 - High contrast for main text */
  --light-text-secondary: #334155;
  /* Slate 700 - Good contrast for secondary text */
  --light-text-tertiary: #475569;
  /* Slate 600 - Adequate contrast for labels */
  --light-text-muted: #64748b;
  /* Slate 500 - Minimum contrast for muted text */

  /* Light mode backgrounds */
  --light-bg-primary: #ffffff;
  /* Pure white for main backgrounds */
  --light-bg-secondary: #f8fafc;
  /* Slate 50 - Subtle background variation */
  --light-bg-tertiary: #f1f5f9;
  /* Slate 100 - Card backgrounds */
  --light-bg-hover: #e2e8f0;
  /* Slate 200 - Hover states */

  /* Light mode borders */
  --light-border-subtle: rgba(0, 0, 0, 0.08);
  /* Subtle borders */
  --light-border-default: rgba(0, 0, 0, 0.12);
  /* Default borders */
  --light-border-strong: rgba(0, 0, 0, 0.16);
  /* Strong borders */

  /* Light mode shadows */
  --light-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --light-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --light-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}

/* Override CSS variables in light mode for better contrast */
html.light {
  --color-text: #0f172a !important;
  --color-text-secondary: #334155 !important;
  /* Slate 700 - Better contrast */
  --color-text-tertiary: #475569 !important;
  --text: #0f172a !important;
  --text-secondary: #334155 !important;
  --text-dim: #475569 !important;
  --text-tertiary: #475569 !important;

  /* Ensure logo is visible in light mode */
  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --color-surface-elevated: #f1f5f9;
}

/* Preserve images, icons, and other non-text elements in light mode */
html.light img,
html.light picture,
html.light svg,
html.light .brand-logo,
html.light .icon,
html.light [class*="logo"],
html.light [class*="icon"] {
  opacity: 1 !important;
  display: block !important;
  /* Don't apply text colors to images */
}

/* Global text color override for light mode - catch all gray text */
html.light body,
html.light .dashboard-main,
html.light .dashboard-content {
  color: #0f172a !important;
}

/* ===== Wallet Modal - Light Mode Optimization ===== */
/* High specificity to override existing styles */
html.light .wallet-modal-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px) !important;
}

html.light .wallet-modal-content {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.light .wallet-modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

html.light .wallet-modal-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html.light .wallet-modal-close {
  color: #475569 !important;
  background: transparent !important;
}

html.light .wallet-modal-close:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light .wallet-modal-body {
  background: #ffffff !important;
}

html.light .wallet-option {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease !important;
}

html.light .wallet-option:hover {
  background: #e2e8f0 !important;
  border-color: var(--dx-emerald) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
  transform: translateY(-1px) !important;
}

html.light .wallet-option-name {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.light .wallet-option-desc {
  color: #334155 !important;
  /* Improved from rgba(0, 0, 0, .65) to better contrast - Slate 700 for better visibility */
}

/* Override the existing stream-navigation.css styles more aggressively */
html.light .wallet-option-desc,
html.light .wallet-modal-footer,
html.light .wallet-option-desc * {
  color: #334155 !important;
  opacity: 1 !important;
}

html.light .wallet-option-logo {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light .wallet-modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #f8fafc !important;
  color: #334155 !important;
}

html.light .wallet-modal-footer:hover {
  color: #0f172a !important;
  background: #e2e8f0 !important;
}

/* ===== Dashboard Text - Light Mode Optimization ===== */

/* Primary text - ensure high contrast */
/* Don't use wildcard - it breaks images! */
html.light .dashboard-card,
html.light .stat-card,
html.light .card-body,
html.light .card-body p,
html.light .card-body span {
  color: #0f172a !important;
}

/* Explicitly preserve images and icons */
html.light .dashboard-card img,
html.light .stat-card img,
html.light .brand-logo,
html.light picture,
html.light picture img,
html.light picture source,
html.light svg,
html.light .card-body img {
  /* Don't apply text color to images - they should render normally */
  opacity: 1 !important;
  display: block !important;
  color: transparent !important;
  /* Images don't use color */
  background: transparent !important;
}

/* Override any gray text colors */
html.light * {
  /* Reset any low-contrast grays */
}

html.light .dashboard-card,
html.light .stat-card {
  color: #0f172a !important;
}

/* Secondary text - improved contrast */
html.light .stat-label,
html.light .stat-label-compact,
html.light .info-label,
html.light .staking-stat-label,
html.light .card-description,
html.light .text-secondary,
html.light .text-muted,
html.light .card-body .text-secondary,
html.light .card-body .text-muted,
html.light p.text-secondary,
html.light span.text-secondary,
html.light div.text-secondary {
  color: #334155 !important;
  opacity: 1 !important;
}

/* Tertiary text - labels and metadata */
html.light .stat-title,
html.light .stat-title-compact,
html.light .card-title,
html.light .info-label,
html.light .empty-state p,
html.light .reward-period-label,
html.light .stake-tier-label,
html.light .val-price-label,
html.light .reward-period-label {
  color: #0f172a !important;
}

/* Values and numbers - high contrast */
html.light .stat-value,
html.light .stat-value-compact,
html.light .info-value,
html.light .staking-stat-value {
  color: var(--light-text-primary) !important;
  font-weight: 600;
}

/* Muted text - minimum contrast but readable */
html.light .empty-state p,
html.light .text-muted,
html.light .card-description,
html.light p,
html.light span,
html.light div {
  /* Only apply if not already set by more specific rules */
}

html.light .empty-state p,
html.light .card-description {
  color: #475569 !important;
}

/* ===== Specific Component Fixes ===== */

/* Rewards and staking labels */
html.light .reward-period-label,
html.light .stake-tier-label,
html.light .val-price-label,
html.light .rewards-earned-title {
  color: var(--light-text-secondary) !important;
}

/* Table headers */
html.light .positions-table thead th,
html.light table thead th {
  background: linear-gradient(135deg, rgba(31, 221, 254, 0.08), rgba(31, 221, 254, 0.04)) !important;
  color: var(--light-text-primary) !important;
  border-bottom: 2px solid var(--light-border-default);
}

/* Table body text */
html.light .positions-table tbody td,
html.light table tbody td {
  color: var(--light-text-primary);
  border-bottom: 1px solid var(--light-border-subtle);
}

/* Preserve green/red PnL colors in light mode */
html.light .positions-table .position-pnl.positive,
html.light .position-pnl.positive,
html.light table .position-pnl.positive {
  color: #10b981 !important;
  /* Green for positive PnL */
  font-weight: 600 !important;
}

html.light .positions-table .position-pnl.negative,
html.light .position-pnl.negative,
html.light table .position-pnl.negative {
  color: #ef4444 !important;
  /* Red for negative PnL */
  font-weight: 600 !important;
}

/* Also preserve PnL percentage colors */
html.light .positions-table td.position-pnl.positive,
html.light .positions-table td.position-pnl.negative {
  /* Colors already set above, just ensure they're not overridden */
}

/* Input placeholders */
html.light input::placeholder,
html.light textarea::placeholder {
  color: var(--light-text-muted);
  opacity: 0.8;
}

/* Links in light mode */
html.light a {
  color: var(--dx-emerald);
}

html.light a:hover {
  color: #059669;
  /* Darker emerald for hover */
}

/* Buttons - ensure text is readable */
html.light .btn-primary,
html.light .btn-secondary {
  color: var(--light-text-primary);
}

html.light .btn-primary:hover,
html.light .btn-secondary:hover {
  color: var(--light-text-primary);
}

/* Swap form text */
html.light .swap-amount-container,
html.light .swap-balance,
html.light .swap-label {
  color: var(--light-text-primary);
}

html.light .swap-balance {
  color: var(--light-text-secondary);
}

/* Navigation items */
html.light .nav-item,
html.light .nav-item-label {
  color: var(--light-text-secondary);
}

html.light .nav-item.active,
html.light .nav-item.active .nav-item-label {
  color: var(--light-text-primary);
  font-weight: 600;
}

/* Token balance pill */
html.light .token-balance-pill {
  background: var(--light-bg-secondary);
  border: 1px solid var(--light-border-subtle);
  color: var(--light-text-primary);
}

/* Status badges */
html.light .badge,
html.light .status-badge {
  color: var(--light-text-primary);
  background: var(--light-bg-tertiary);
  border: 1px solid var(--light-border-subtle);
}

/* Tooltips - removed duplicate styling, using existing tooltip system */

/* ===== Card Enhancements for Light Mode ===== */
html.light .dashboard-card,
html.light .stat-card {
  background: #ffffff;
  border: 1px solid var(--light-border-subtle);
  box-shadow: var(--light-shadow-sm);
}

html.light .dashboard-card:hover,
html.light .stat-card:hover {
  border-color: var(--light-border-default);
  box-shadow: var(--light-shadow-md);
}

/* ===== Improved Contrast for Gray Text ===== */

/* Replace all low-contrast grays with optimized colors */
/* Target common gray text patterns */
html.light [style*="color: rgba(0, 0, 0, 0.5)"],
html.light [style*="color: rgba(0, 0, 0, 0.6)"],
html.light [style*="color: rgba(0, 0, 0, 0.65)"] {
  color: #334155 !important;
}

html.light [style*="color: rgba(0, 0, 0, 0.7)"],
html.light [style*="color: rgba(0, 0, 0, 0.8)"] {
  color: #0f172a !important;
}

html.light .text-gray-400,
html.light .text-gray-500 {
  color: #475569 !important;
}

html.light .text-gray-600,
html.light .text-gray-700 {
  color: #334155 !important;
}

/* ===== Accessibility Improvements ===== */

/* Ensure focus states are visible in light mode */
html.light *:focus-visible {
  outline: 2px solid var(--dx-emerald);
  outline-offset: 2px;
}

/* Improve button contrast */
html.light button:not(.btn-primary):not(.btn-secondary) {
  color: var(--light-text-primary);
  border-color: var(--light-border-default);
}

html.light button:not(.btn-primary):not(.btn-secondary):hover {
  background: var(--light-bg-hover);
  color: var(--light-text-primary);
}

/* Swap icon button - override general button rules to match dark theme */
html.light .swap-icon-btn {
  color: rgba(0, 0, 0, 0.7) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

html.light .swap-icon-btn svg {
  stroke: rgba(0, 0, 0, 0.7) !important;
  fill: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html.light .swap-icon-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(31, 221, 254, 0.4) !important;
  color: rgba(31, 221, 254, 1) !important;
}

html.light .swap-icon-btn:hover svg {
  stroke: rgba(31, 221, 254, 1) !important;
}

/* ===== Mobile Logo Fix for Light Mode ===== */
@media (max-width: 768px) {

  html.light .top-header .brand,
  html.light .top-header .brand-logo,
  html.light .top-header .brand picture,
  html.light .top-header .brand img {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html.light .top-header .brand-logo {
    filter: none !important;
  }
}

/* ===== Print Styles for Light Mode ===== */
@media print {
  html.light * {
    color: #000000 !important;
    background: #ffffff !important;
  }
}