/* Material Design 3 Theme */

:root {
  /* Light Theme Colors */
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #21005d;
  
  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #1d192b;
  
  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8e4;
  --md-sys-color-on-tertiary-container: #31111d;
  
  --md-sys-color-surface: #fffbfe;
  --md-sys-color-on-surface: #1c1b1f;
  --md-sys-color-surface-variant: #e7e0ec;
  --md-sys-color-on-surface-variant: #49454f;
  
  --md-sys-color-background: #fffbfe;
  --md-sys-color-on-background: #1c1b1f;
  
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  
  --md-sys-color-inverse-surface: #313033;
  --md-sys-color-inverse-on-surface: #f4eff4;
  --md-sys-color-inverse-primary: #d0bcff;
  
  /* Elevation Shadows */
  --md-sys-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
  
  /* Typography */
  --md-sys-typescale-display-large-font: 'Roboto';
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  
  --md-sys-typescale-headline-large-font: 'Roboto';
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  
  --md-sys-typescale-title-large-font: 'Roboto';
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  
  --md-sys-typescale-body-large-font: 'Roboto';
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  
  --md-sys-typescale-label-large-font: 'Roboto';
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  
  /* 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;
  
  /* Motion */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
}

/* Dark Theme */
[data-theme="dark"] {
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-on-primary-container: #eaddff;
  
  --md-sys-color-secondary: #ccc2dc;
  --md-sys-color-on-secondary: #332d41;
  --md-sys-color-secondary-container: #4a4458;
  --md-sys-color-on-secondary-container: #e8def8;
  
  --md-sys-color-tertiary: #efb8c8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633b48;
  --md-sys-color-on-tertiary-container: #ffd8e4;
  
  --md-sys-color-surface: #1c1b1f;
  --md-sys-color-on-surface: #e6e1e5;
  --md-sys-color-surface-variant: #49454f;
  --md-sys-color-on-surface-variant: #cac4d0;
  
  --md-sys-color-background: #1c1b1f;
  --md-sys-color-on-background: #e6e1e5;
  
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  
  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;
  
  --md-sys-color-inverse-surface: #e6e1e5;
  --md-sys-color-inverse-on-surface: #1c1b1f;
  --md-sys-color-inverse-primary: #6750a4;
}

/* Component Styles */

/* Cards */
.card {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-1);
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.card:hover {
  box-shadow: var(--md-sys-elevation-2);
}

/* Buttons */
.button-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.button-filled:hover {
  box-shadow: var(--md-sys-elevation-1);
}

.button-filled:disabled {
  background-color: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
  opacity: 0.38;
  cursor: not-allowed;
}

.button-outlined {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.button-outlined:hover {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.icon-button {
  background-color: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.icon-button:hover {
  background-color: var(--md-sys-color-on-surface);
  opacity: 0.08;
}

/* Input Fields */
input, textarea, select {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 12px;
  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);
  transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  width: 100%;
  box-sizing: border-box;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
}

input::placeholder, textarea::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.6;
}

/* Labels */
label {
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Icon styles in labels */
label i {
  width: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--md-sys-color-primary);
}

/* Brand-specific icon colors */
label i.fa-github {
  color: #181717;
}

[data-theme="dark"] label i.fa-github {
  color: #f0f6fc;
}

[data-theme="dark"] label i.fa-building {
  color: #9e9e9e;
}

[data-theme="dark"] label i.fa-briefcase {
  color: #a1887f;
}

[data-theme="dark"] label i.fa-align-left {
  color: #8d6e63;
}

label i.fa-linkedin {
  color: #0077b5;
}

label i.fa-orcid {
  color: #a6ce39;
}

label i.fa-envelope {
  color: #ea4335;
}

label i.fa-globe {
  color: #4285f4;
}

label i.fa-phone {
  color: #34a853;
}

label i.fa-map-marker-alt {
  color: #ea4335;
}

label i.fa-university {
  color: #1565c0;
}

label i.fa-graduation-cap {
  color: #6a1b9a;
}

label i.fa-calendar-alt,
label i.fa-calendar-check {
  color: #d32f2f;
}

label i.fa-star {
  color: #ff9800;
}

label i.fa-building {
  color: #424242;
}

label i.fa-briefcase {
  color: #795548;
}

label i.fa-project-diagram {
  color: #2e7d32;
}

label i.fa-user-tag {
  color: #8e24aa;
}

label i.fa-link {
  color: #1976d2;
}

label i.fa-align-left {
  color: #5d4037;
}

label i.fa-cogs {
  color: #ff5722;
}

/* Research/Publications icons */
label i.fa-atom {
  color: #9c27b0;
}

label i.fa-file-alt {
  color: #3f51b5;
}

label i.fa-book-open {
  color: #ff9800;
}

label i.fa-users {
  color: #607d8b;
}

label i.fa-external-link-alt {
  color: #1976d2;
}

/* Dialogs */
.dialog {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--md-sys-elevation-3);
}

/* Toast */
.toast {
  background-color: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small);
  box-shadow: var(--md-sys-elevation-3);
}