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

:root[data-theme="dark"] {
  /* Surface Colors */
  --surface: #131313;
  --surface-dim: #131313;
  --surface-bright: #393939;
  --surface-container-lowest: #0e0e0e;
  --surface-container-low: #1c1b1b;
  --surface-container: #201f1f;
  --surface-container-high: #2a2a2a;
  --surface-container-highest: #353534;
  --on-surface: #e5e2e1;
  --on-surface-variant: #c1c6d7;
  --inverse-surface: #e5e2e1;
  --inverse-on-surface: #313030;
  
  /* Outline Colors */
  --outline: #8b90a0;
  --outline-variant: #414755;
  --surface-tint: #adc6ff;
  
  /* Primary Colors */
  --primary: #adc6ff;
  --on-primary: #002e69;
  --primary-container: #4b8eff;
  --on-primary-container: #00285c;
  --inverse-primary: #005bc1;
  
  /* Secondary Colors */
  --secondary: #a2e7ff;
  --on-secondary: #003642;
  --secondary-container: #00d2fd;
  --on-secondary-container: #005669;
  
  /* Tertiary Colors */
  --tertiary: #c2c1ff;
  --on-tertiary: #1800a7;
  --tertiary-container: #8382ff;
  --on-tertiary-container: #140094;
  
  /* Error Colors */
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  
  /* Fixed Colors */
  --primary-fixed: #d8e2ff;
  --primary-fixed-dim: #adc6ff;
  --on-primary-fixed: #001a41;
  --on-primary-fixed-variant: #004493;
  
  --secondary-fixed: #b4ebff;
  --secondary-fixed-dim: #3cd7ff;
  --on-secondary-fixed: #001f27;
  --on-secondary-fixed-variant: #004e5f;
  
  --tertiary-fixed: #e2dfff;
  --tertiary-fixed-dim: #c2c1ff;
  --on-tertiary-fixed: #0c006b;
  --on-tertiary-fixed-variant: #332dbc;
  
  --background: #131313;
  --on-background: #e5e2e1;
  --surface-variant: #353534;
  
  /* Spacing */
  --unit: 4px;
  --gutter: 24px;
  --margin: 32px;
  --section-gap: 48px;
  --container-max: 1280px;
  
  /* Border Radius */
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
}

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

/* Glass Card Effect */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

/* Luminous Glow Effect */
.luminous-glow {
  box-shadow: 0 0 30px rgba(173, 198, 255, 0.3);
}

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

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

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

body[data-theme="dark"] .footer-border,
html.dark .footer-border,
html[data-theme="dark"] .footer-border {
  border-color: rgb(193 198 215 / 0.2);
  border-top-width: 1px;
}

body[data-theme="dark"] .cta-button,
html.dark .cta-button,
html[data-theme="dark"] .cta-button {
  background-color: #adc6ff;
  color: #00285c;
}

body[data-theme="dark"] .cta-button:hover,
html.dark .cta-button:hover,
html[data-theme="dark"] .cta-button:hover {
  background-color: #a1befd;
}

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

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

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

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

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

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

/* Core Expertise card hover for dark mode */
body[data-theme="dark"] .expertise-card-hover:hover,
html.dark .expertise-card-hover:hover,
html[data-theme="dark"] .expertise-card-hover:hover {
  background-color: rgb(255 255 255 / 0.05);
}

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

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

/* Hero gradient overlay for dark mode */
body[data-theme="dark"] .hero-gradient-overlay,
html.dark .hero-gradient-overlay,
html[data-theme="dark"] .hero-gradient-overlay {
  background: linear-gradient(to bottom, rgba(19, 19, 19, 0.6), rgba(19, 19, 19, 0.3), #131313);
}

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

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

/* 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); }