/* Material 3 Design System CSS */
/* Based on Material Design 3 specifications */
/* With Space Grotesk font and theme toggle support */

:root {
  /* Font Family */
  --md-sys-font-family: 'Space Grotesk', sans-serif;
  --md-sys-font-family-mono: 'JetBrains Mono', monospace;

  /* Red accent */
  --md-sys-color-primary: #B4232D;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FCE8E8;
  --md-sys-color-on-primary-container: #791820;
  
  /* Neutral supporting colors */
  --md-sys-color-secondary: #303030;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #EDEDED;
  --md-sys-color-on-secondary-container: #1A1A1A;
  
  /* Tertiary */
  --md-sys-color-tertiary: #404040;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #E5E5E5;
  --md-sys-color-on-tertiary-container: #1A1A1A;
  
  /* Error */
  --md-sys-color-error: #B4232D;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FCE8E8;
  --md-sys-color-on-error-container: #791820;
  
  /* Surface */
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-on-surface: #181818;
  --md-sys-color-surface-variant: #F0F0F0;
  --md-sys-color-on-surface-variant: #484848;
  
  /* Surface Containers */
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #FAFAFA;
  --md-sys-color-surface-container: #F5F5F5;
  --md-sys-color-surface-container-high: #EDEDED;
  --md-sys-color-surface-container-highest: #E5E5E5;
  
  /* Outline */
  --md-sys-color-outline: #666666;
  --md-sys-color-outline-variant: #D6D6D6;
  
  /* Background */
  --md-sys-color-background: #FFFFFF;
  --md-sys-color-on-background: #181818;
  
  /* Inverse */
  --md-sys-color-inverse-surface: #181818;
  --md-sys-color-inverse-on-surface: #F5F5F5;
  --md-sys-color-inverse-primary: #FF7A7A;

  /* Hover layers follow the active light/dark surface */
  --md-sys-color-hover-rgb: 0, 0, 0;
  
  /* Typography Scale */
  --md-sys-typescale-display-large-font: var(--md-sys-font-family);
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-weight: 400;
  
  --md-sys-typescale-display-medium-font: var(--md-sys-font-family);
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-weight: 400;
  
  --md-sys-typescale-display-small-font: var(--md-sys-font-family);
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-weight: 400;
  
  --md-sys-typescale-headline-large-font: var(--md-sys-font-family);
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-weight: 400;
  
  --md-sys-typescale-headline-medium-font: var(--md-sys-font-family);
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-weight: 400;
  
  --md-sys-typescale-headline-small-font: var(--md-sys-font-family);
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-weight: 400;
  
  --md-sys-typescale-title-large-font: var(--md-sys-font-family);
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-weight: 400;
  
  --md-sys-typescale-title-medium-font: var(--md-sys-font-family);
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-weight: 500;
  
  --md-sys-typescale-title-small-font: var(--md-sys-font-family);
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-weight: 500;
  
  --md-sys-typescale-body-large-font: var(--md-sys-font-family);
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-weight: 400;
  
  --md-sys-typescale-body-medium-font: var(--md-sys-font-family);
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-weight: 400;
  
  --md-sys-typescale-body-small-font: var(--md-sys-font-family);
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-weight: 400;
  
  --md-sys-typescale-label-large-font: var(--md-sys-font-family);
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-weight: 500;
  
  --md-sys-typescale-label-medium-font: var(--md-sys-font-family);
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-weight: 500;
  
  --md-sys-typescale-label-small-font: var(--md-sys-font-family);
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-weight: 500;
  
  /* Elevation */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
  
  /* Shape */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  
  /* State layers */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;
}

/* Dark theme - manually applied via class */
.dark-theme,
:root.dark-theme {
  --md-sys-color-primary: #FF7A7A;
  --md-sys-color-on-primary: #291010;
  --md-sys-color-primary-container: #511B20;
  --md-sys-color-on-primary-container: #FFDADA;
  
  --md-sys-color-secondary: #E5E5E5;
  --md-sys-color-on-secondary: #171717;
  --md-sys-color-secondary-container: #303030;
  --md-sys-color-on-secondary-container: #F5F5F5;
  
  --md-sys-color-tertiary: #D6D6D6;
  --md-sys-color-on-tertiary: #171717;
  --md-sys-color-tertiary-container: #383838;
  --md-sys-color-on-tertiary-container: #F5F5F5;
  
  --md-sys-color-error: #FF7A7A;
  --md-sys-color-on-error: #291010;
  --md-sys-color-error-container: #511B20;
  --md-sys-color-on-error-container: #FFDADA;
  
  --md-sys-color-surface: #111111;
  --md-sys-color-on-surface: #F5F5F5;
  --md-sys-color-surface-variant: #292929;
  --md-sys-color-on-surface-variant: #BDBDBD;
  
  --md-sys-color-surface-container-lowest: #0B0B0B;
  --md-sys-color-surface-container-low: #181818;
  --md-sys-color-surface-container: #202020;
  --md-sys-color-surface-container-high: #292929;
  --md-sys-color-surface-container-highest: #333333;
  
  --md-sys-color-outline: #A6A6A6;
  --md-sys-color-outline-variant: #444444;
  
  --md-sys-color-background: #111111;
  --md-sys-color-on-background: #F5F5F5;
  
  --md-sys-color-inverse-surface: #F5F5F5;
  --md-sys-color-inverse-on-surface: #181818;
  --md-sys-color-inverse-primary: #B4232D;

  --md-sys-color-hover-rgb: 255, 255, 255;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base styles */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--md-sys-font-family);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
}

/* Typography classes */
.m3-display-large {
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-weight);
}

.m3-display-medium {
  font-family: var(--md-sys-typescale-display-medium-font);
  font-size: var(--md-sys-typescale-display-medium-size);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  font-weight: var(--md-sys-typescale-display-medium-weight);
}

.m3-display-small {
  font-family: var(--md-sys-typescale-display-small-font);
  font-size: var(--md-sys-typescale-display-small-size);
  line-height: var(--md-sys-typescale-display-small-line-height);
  font-weight: var(--md-sys-typescale-display-small-weight);
}

.m3-headline-large {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-weight);
}

.m3-headline-medium {
  font-family: var(--md-sys-typescale-headline-medium-font);
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
}

.m3-headline-small {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: var(--md-sys-typescale-headline-small-weight);
}

.m3-title-large {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
}

.m3-title-medium {
  font-family: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-weight);
}

.m3-title-small {
  font-family: var(--md-sys-typescale-title-small-font);
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: var(--md-sys-typescale-title-small-weight);
}

.m3-body-large {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
}

.m3-body-medium {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  font-weight: var(--md-sys-typescale-body-medium-weight);
}

.m3-body-small {
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-weight: var(--md-sys-typescale-body-small-weight);
}

.m3-label-large {
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
}

.m3-label-medium {
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-weight);
}

.m3-label-small {
  font-family: var(--md-sys-typescale-label-small-font);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-weight: var(--md-sys-typescale-label-small-weight);
}

/* Surface classes */
.m3-surface {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.m3-surface-container-lowest {
  background-color: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
}

.m3-surface-container-low {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}

.m3-surface-container {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

.m3-surface-container-high {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}

.m3-surface-container-highest {
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}

/* Links */
a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--md-sys-color-outline);
}

/* Theme Toggle Button */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: var(--md-sys-shape-corner-full);
  border: none;
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--md-sys-elevation-level2);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.theme-toggle:hover {
  background-color: var(--md-sys-color-surface-container-highest);
  box-shadow: var(--md-sys-elevation-level3);
}

.theme-toggle .light-icon {
  display: none;
}

.theme-toggle .dark-icon {
  display: block;
}

.dark-theme .theme-toggle .light-icon {
  display: block;
}

.dark-theme .theme-toggle .dark-icon {
  display: none;
}