:root {
  /* Light Mode Palette */
  --bg-background: #f4f6f8;
  --text-on-surface: #111827;
  --text-on-surface-variant: #4b5563;
  --bg-surface: #ffffff;
  --bg-surface-container-lowest: #ffffff;
  --bg-surface-container-low: #f9fafb;
  --bg-surface-container: #f3f4f6;
  --bg-surface-container-high: #e5e7eb;
  --bg-surface-container-highest: #d1d5db;
  
  --color-pref-primary: #008a94;
  --text-on-primary: #ffffff;
  --bg-primary-fixed: #007a82;
  
  --border-outline: #9ca3af;
  --border-outline-variant: #d1d5db;
  --color-highlight: #090C9B;

  /* Custom Glow/Pulse overrides for light mode (subtle) */
  --shadow-cyan-glow: 0 0 10px rgba(0, 138, 148, 0.3);
  --shadow-cyan-pulse: 0 0 15px rgba(0, 138, 148, 0.15);
}

.dark {
  /* Dark Mode Palette (Original Synthetic Monolith) */
  --bg-background: #0e0e0e;
  --text-on-surface: #ffffff;
  --text-on-surface-variant: #adaaaa;
  --bg-surface: #0e0e0e;
  --bg-surface-container-lowest: #000000;
  --bg-surface-container-low: #131313;
  --bg-surface-container: #1a1919;
  --bg-surface-container-high: #201f1f;
  --bg-surface-container-highest: #262626;

  --color-pref-primary: #8ff5ff;
  --text-on-primary: #005d63;
  --bg-primary-fixed: #00eefc;

  --border-outline: #767575;
  --border-outline-variant: #484847;
  --color-highlight: #72b5ff; /* Lighter blue for dark mode visibility */

  /* Custom Glow/Pulse original */
  --shadow-cyan-glow: 0 0 15px rgba(143, 245, 255, 0.4);
  --shadow-cyan-pulse: 0 0 20px rgba(143, 245, 255, 0.2);
}

:root {
  --color-background: var(--bg-background);
  --color-on-surface: var(--text-on-surface);
  --color-on-surface-variant: var(--text-on-surface-variant);
  
  --color-surface: var(--bg-surface);
  --color-surface-container-lowest: var(--bg-surface-container-lowest);
  --color-surface-container-low: var(--bg-surface-container-low);
  --color-surface-container: var(--bg-surface-container);
  --color-surface-container-high: var(--bg-surface-container-high);
  --color-surface-container-highest: var(--bg-surface-container-highest);

  --color-primary: var(--color-pref-primary);
  --color-on-primary: var(--text-on-primary);
  --color-primary-fixed: var(--bg-primary-fixed);

  --color-outline: var(--border-outline);
  --color-outline-variant: var(--border-outline-variant);
  --color-highlight: var(--color-highlight);

  --font-headline: var(--font-manrope);
  --font-body: var(--font-manrope);
  --font-label: var(--font-manrope);

  --radius-DEFAULT: 0rem;
  --radius-lg: 0rem;
  --radius-xl: 0rem;
  --radius-full: 9999px;
}

@layer base {
  body {
    background-color: var(--bg-background);
    color: var(--text-on-surface);
    font-family: var(--font-body);
    transition: background-color 0.5s ease, color 0.5s ease;
  }

  ::selection {
    background-color: var(--color-pref-primary);
    color: var(--text-on-primary);
  }
}

/* Material Symbols configuration */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Custom Styles */
@layer utilities {
  .cyan-glow {
    text-shadow: var(--shadow-cyan-glow);
  }

  .cyan-pulse {
    box-shadow: var(--shadow-cyan-pulse);
  }

  .asymmetric-border {
    border-left: 2px solid var(--color-pref-primary);
  }
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--bg-background);
}

::-webkit-scrollbar-thumb {
  background: var(--color-pref-primary);
}