/* Light Theme Styles for Drops Landing Page */

[data-theme="light"] {
  --color-background: #f8f9fb;
  --color-surface: #f8f9fb;
  --color-surface-low: #e1e2e4;
  --color-surface-high: #d1d2d4;
  --color-surface-highest: #c1c2c4;
  --color-surface-lowest: #ffffff;
  --color-on-surface: #09090b;
  --color-on-surface-variant: #3f3f46;
  --color-outline-variant: #a1a1aa;
  --color-tertiary: #27272a;
}

[data-theme="light"] .blueprint-bg {
  background-color: var(--color-background);
  background-image: 
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--color-primary) 8%, transparent) 0%,
      transparent 70%
    ),
    linear-gradient(
      color-mix(in srgb, var(--color-outline-variant) 3%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-outline-variant) 3%, transparent) 1px,
      transparent 1px
    );
}

[data-theme="light"] .site-header {
  background: color-mix(in srgb, var(--color-surface-lowest) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 10%, transparent);
}

[data-theme="light"] .hero__edge {
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--color-surface-low) 22%, transparent) 35%,
    var(--color-surface-low) 100%
  );
}

[data-theme="light"] .section--tonal {
  background: var(--color-surface-low);
}

[data-theme="light"] .section--diagonal {
  background: var(--color-surface-lowest);
}

[data-theme="light"] .section--tabs-wrap {
  background: var(--color-surface-low);
}

[data-theme="light"] .section--faq {
  background: var(--color-surface-low);
}

[data-theme="light"] .site-footer--mega {
  background: var(--color-surface-low);
  border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 10%, transparent);
}

[data-theme="light"] .feature-card {
  background: color-mix(in srgb, var(--color-surface-lowest) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}

[data-theme="light"] .feature-card--elevated {
  background: color-mix(in srgb, var(--color-surface-lowest) 95%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .dl-card {
  background: color-mix(in srgb, var(--color-surface-lowest) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}

[data-theme="light"] .stat-pill {
  background: color-mix(in srgb, var(--color-surface-lowest) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}

[data-theme="light"] .steps__item {
  background: var(--color-surface-low);
  border: 1px solid color-mix(in srgb, var(--color-outline-variant) 8%, transparent);
}

[data-theme="light"] .tab-panel {
  background: var(--color-surface-lowest);
  border: 1px solid color-mix(in srgb, var(--color-outline-variant) 8%, transparent);
}

[data-theme="light"] .faq__item {
  background: color-mix(in srgb, var(--color-surface-lowest) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}

[data-theme="light"] .cta-block__inner {
  background: var(--color-surface-low);
  border: 1px solid color-mix(in srgb, var(--color-outline-variant) 8%, transparent);
}

[data-theme="light"] .preview-shot__frame {
  border: 1px solid color-mix(in srgb, var(--color-outline-variant) 15%, transparent);
  box-shadow: 
    0 2px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 24px rgba(11, 11, 13, 0.08);
}

[data-theme="light"] .preview-shot__frame--phone {
  background: linear-gradient(168deg, #f0f0f0 0%, #e0e0e0 38%, #d0d0d0 100%);
  border: 1px solid color-mix(in srgb, #000 8%, #ffffff);
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.05) inset,
    0 2px 4px rgba(0, 0, 0, 0.1) inset,
    0 2px 4px rgba(11, 11, 13, 0.05),
    0 6px 14px rgba(11, 11, 13, 0.04);
}

[data-theme="light"] .nav__link {
  color: var(--color-on-surface-variant);
}

[data-theme="light"] .nav__link:hover {
  color: var(--color-primary);
}

[data-theme="light"] .lang-switch__btn {
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  color: var(--color-on-surface-variant);
}

[data-theme="light"] .theme-toggle {
  background: color-mix(in srgb, var(--color-surface-high) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
}

[data-theme="light"] .theme-toggle__icon {
  fill: var(--color-on-surface-variant);
}

[data-theme="light"] .theme-toggle:hover {
  background: var(--color-surface-highest);
  border-color: var(--color-primary);
}

[data-theme="light"] .theme-toggle:hover .theme-toggle__icon {
  fill: var(--color-primary);
}

[data-theme="light"] .scroll-indicator {
  border: 2px solid var(--color-primary);
}

[data-theme="light"] .scroll-indicator::before {
  background: var(--color-primary);
}

[data-theme="light"] .dl-card__icon {
  fill: var(--color-on-surface-variant);
}

[data-theme="light"] .dl-card:hover .dl-card__icon {
  fill: var(--color-primary);
}

[data-theme="light"] .dl-card__progress {
  background: var(--color-surface-high);
}

[data-theme="light"] .btn--secondary {
  background: var(--color-surface-high);
  color: var(--color-on-surface-variant);
}

[data-theme="light"] .btn--secondary:hover {
  background: var(--color-surface-highest);
  color: var(--color-primary);
}

[data-theme="light"] .btn--tertiary {
  color: var(--color-on-surface-variant);
}

[data-theme="light"] .btn--tertiary:hover {
  color: var(--color-primary);
}

[data-theme="light"] .footer-links a {
  color: var(--color-on-surface-variant);
}

[data-theme="light"] .footer-links a:hover {
  color: var(--color-primary);
}

[data-theme="light"] .footer-copy {
  color: var(--color-on-surface-variant);
}

/* Print styles for light theme */
@media print {
  [data-theme="light"] {
    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-on-surface: #000000;
  }
  
  [data-theme="light"] .blueprint-bg,
  [data-theme="light"] .geo-frame,
  [data-theme="light"] .theme-toggle,
  [data-theme="light"] .scroll-indicator {
    display: none;
  }
}

/* High contrast mode support for light theme */
@media (prefers-contrast: high) {
  [data-theme="light"] {
    --color-primary: #cc3300;
    --color-on-surface: #000000;
    --color-surface-lowest: #ffffff;
  }
  
  [data-theme="light"] .blueprint-bg {
    background-image: none;
    background-color: var(--color-surface-lowest);
  }
}