/* 
 * 2MARU - Luminous Light Theme (Light Mode)
 * Based on Material Design 3 Color System
 */

:root[data-theme="light"] {
  /* Surface Colors */
  --surface: #f9f9ff;
  --surface-dim: #d8d9e5;
  --surface-bright: #f9f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f1f3fe;
  --surface-container: #ecedf9;
  --surface-container-high: #e6e8f3;
  --surface-container-highest: #e0e2ed;
  --on-surface: #181c23;
  --on-surface-variant: #414755;
  --inverse-surface: #2d3039;
  --inverse-on-surface: #eef0fc;
  
  /* Outline Colors */
  --outline: #717786;
  --outline-variant: #c1c6d7;
  --surface-tint: #005bc1;
  
  /* Primary Colors */
  --primary: #0058bc;
  --on-primary: #ffffff;
  --primary-container: #0070eb;
  --on-primary-container: #fefcff;
  --inverse-primary: #adc6ff;
  
  /* Secondary Colors */
  --secondary: #405e96;
  --on-secondary: #ffffff;
  --secondary-container: #a1befd;
  --on-secondary-container: #2d4c83;
  
  /* Tertiary Colors */
  --tertiary: #9e3d00;
  --on-tertiary: #ffffff;
  --tertiary-container: #c64f00;
  --on-tertiary-container: #fffbff;
  
  /* Error Colors */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  
  /* Fixed Colors */
  --primary-fixed: #d8e2ff;
  --primary-fixed-dim: #adc6ff;
  --on-primary-fixed: #001a41;
  --on-primary-fixed-variant: #004493;
  
  --secondary-fixed: #d8e2ff;
  --secondary-fixed-dim: #adc6ff;
  --on-secondary-fixed: #001a41;
  --on-secondary-fixed-variant: #26467d;
  
  --tertiary-fixed: #ffdbcc;
  --tertiary-fixed-dim: #ffb595;
  --on-tertiary-fixed: #351000;
  --on-tertiary-fixed-variant: #7c2e00;
  
  --background: #f9f9ff;
  --on-background: #181c23;
  --surface-variant: #e0e2ed;
  
  /* Spacing */
  --unit: 4px;
  --gutter: 24px;
  --margin: 32px;
  --section-gap: 48px;
  --container-max: 1280px;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-default: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
}

/* Base Styles for Light Theme */
body[data-theme="light"] {
  background-color: var(--background);
  color: var(--on-surface);
  font-family: 'Inter', sans-serif;
}

/* Glass Card Effect */
body[data-theme="light"] .glass-card {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

/* Luminous Glow Effect */
body[data-theme="light"] .luminous-glow {
  box-shadow: 0 10px 30px rgba(0, 88, 188, 0.1);
}

/* Text Colors */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-tertiary { color: var(--tertiary); }
.text-on-surface { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }

/* Background Colors */
.bg-surface { background-color: var(--surface); }
.bg-surface-container { background-color: var(--surface-container); }
.bg-surface-container-low { background-color: var(--surface-container-low); }
.bg-surface-container-high { background-color: var(--surface-container-high); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-tertiary { background-color: var(--tertiary); }

/* Border Colors */
.border-outline { border-color: var(--outline); }
.border-outline-variant { border-color: var(--outline-variant); }
.border-primary { border-color: var(--primary); }

/* Light Mode Specific Overrides */
html.light body .bg-white,
html[data-theme="light"] body .bg-white,
body[data-theme="light"] .bg-white {
  background-color: #ffffff;
}

html.light .to-surface,
html[data-theme="light"] .to-surface,
body[data-theme="light"] .to-surface {
  --tw-gradient-to: #f9f9ff;
}

html.light .from-white\/20,
html[data-theme="light"] .from-white\/20,
body[data-theme="light"] .from-white\/20 {
  --tw-gradient-from: rgb(255 255 255 / 0.2);
  --tw-gradient-to: rgb(255 255 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html.light .via-white\/5,
html[data-theme="light"] .via-white\/5,
body[data-theme="light"] .via-white\/5 {
  --tw-gradient-to: rgb(255 255 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.05), var(--tw-gradient-to);
}

html.light .bg-surface-container,
html[data-theme="light"] .bg-surface-container,
body[data-theme="light"] .bg-surface-container {
  background-color: #ecedf9;
}

html.light .bg-surface-container-low,
html[data-theme="light"] .bg-surface-container-low,
body[data-theme="light"] .bg-surface-container-low {
  background-color: #f1f3fe;
}

html.light .bg-primary\/5,
html[data-theme="light"] .bg-primary\/5,
body[data-theme="light"] .bg-primary\/5 {
  background-color: rgb(0 88 188 / 0.05);
}

html.light .border-primary\/20,
html[data-theme="light"] .border-primary\/20,
body[data-theme="light"] .border-primary\/20 {
  border-color: rgb(0 88 188 / 0.2);
}

html.light .border-primary\/10,
html[data-theme="light"] .border-primary\/10,
body[data-theme="light"] .border-primary\/10 {
  border-color: rgb(0 88 188 / 0.1);
}

html.light .shadow-xl,
html[data-theme="light"] .shadow-xl,
body[data-theme="light"] .shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

html.light .shadow-2xl,
html[data-theme="light"] .shadow-2xl,
body[data-theme="light"] .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

html.light .bg-white\/90,
html[data-theme="light"] .bg-white\/90,
body[data-theme="light"] .bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

html.light .bg-white\/80,
html[data-theme="light"] .bg-white\/80,
body[data-theme="light"] .bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}

html.light .border-black\/5,
html[data-theme="light"] .border-black\/5,
body[data-theme="light"] .border-black\/5 {
  border-color: rgb(0 0 0 / 0.05);
}

/* Header and Footer specific styles for light mode */
html.light .header-bg,
html[data-theme="light"] .header-bg,
body[data-theme="light"] .header-bg {
  background-color: rgb(255 255 255 / 0.8);
}

html.light .header-border,
html[data-theme="light"] .header-border,
body[data-theme="light"] .header-border {
  border-color: rgb(0 0 0 / 0.05);
  border-bottom-width: 1px;
}

html.light .footer-bg,
html[data-theme="light"] .footer-bg,
body[data-theme="light"] .footer-bg {
  background-color: #f1f3fe;
}

html.light .footer-border,
html[data-theme="light"] .footer-border,
body[data-theme="light"] .footer-border {
  border-color: rgb(0 0 0 / 0.05);
  border-top-width: 1px;
}

html.light .cta-button,
html[data-theme="light"] .cta-button,
body[data-theme="light"] .cta-button {
  background-color: #0058bc;
  color: #ffffff;
}

html.light .cta-button:hover,
html[data-theme="light"] .cta-button:hover,
body[data-theme="light"] .cta-button:hover {
  background-color: rgb(0 88 188 / 0.9);
}

/* Logo visibility for light mode */
html.light .logo-light,
html[data-theme="light"] .logo-light,
body[data-theme="light"] .logo-light {
  display: block;
}

html.light .logo-dark,
html[data-theme="light"] .logo-dark,
body[data-theme="light"] .logo-dark {
  display: none;
}

/* Section backgrounds for light mode */
html.light .technical-section-bg,
html[data-theme="light"] .technical-section-bg,
body[data-theme="light"] .technical-section-bg {
  background-color: #ffffff;
}

html.light .cta-section-bg,
html[data-theme="light"] .cta-section-bg,
body[data-theme="light"] .cta-section-bg {
  background-color: #ffffff;
}

html.light .cta-card-bg,
html[data-theme="light"] .cta-card-bg,
body[data-theme="light"] .cta-card-bg {
  background-color: rgb(255 255 255 / 0.9);
}

html.light .core-status-bg,
html[data-theme="light"] .core-status-bg,
body[data-theme="light"] .core-status-bg {
  background-color: #ffffff;
}

/* Core Expertise card hover for light mode */
html.light .expertise-card-hover:hover,
html[data-theme="light"] .expertise-card-hover:hover,
body[data-theme="light"] .expertise-card-hover:hover {
  background-color: #ffffff;
}

/* Testimonials card background for light mode */
html.light .testimonial-card-bg,
html[data-theme="light"] .testimonial-card-bg,
body[data-theme="light"] .testimonial-card-bg {
  background-color: rgb(255 255 255 / 0.6);
}

/* Hero text box for light mode */
html.light .hero-text-box,
html[data-theme="light"] .hero-text-box,
body[data-theme="light"] .hero-text-box {
  background-color: rgb(255 255 255 / 0.4);
  border: 1px solid rgb(255 255 255 / 0.2);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

/* Hero gradient overlay for light mode */
html.light .hero-gradient-overlay,
html[data-theme="light"] .hero-gradient-overlay,
body[data-theme="light"] .hero-gradient-overlay {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05), #f9f9ff);
}

/* Hero CTA button for light mode */
html.light .hero-cta-button,
html[data-theme="light"] .hero-cta-button,
body[data-theme="light"] .hero-cta-button {
  background-color: #0058bc;
  color: #ffffff;
  box-shadow: 0 0 40px rgba(0, 88, 188, 0.3);
}

html.light .hero-cta-button:hover,
html[data-theme="light"] .hero-cta-button:hover,
body[data-theme="light"] .hero-cta-button:hover {
  background-color: #0070eb;
}