@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=Space+Grotesk:wght@600;700&family=Literata:opsz,wght@7..72,400..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root {
  /* LIGHT THEME COLORS */
  --color-surface-container: #f0ece4;
  --color-on-error-container: #690005;
  --color-on-background: #2e3230;
  --color-surface: #faf6f0;
  --color-primary-container: #78a886;
  --color-surface-container-lowest: #ffffff;
  --color-secondary: #6b6358;
  --color-on-primary: #ffffff;
  --color-tertiary-fixed-dim: #dcc48e;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad8;
  --color-surface-dim: #dbd7cf;
  --color-on-tertiary-fixed: #221a05;
  --color-on-tertiary-container: #554020;
  --color-on-primary-fixed-variant: #2a6038;
  --color-on-secondary-fixed-variant: #4a4538;
  --color-surface-tint: #4a7c59;
  --color-primary-fixed: #c8e8d0;
  --color-surface-container-low: #f5f1ea;
  --color-background: #faf6f0;
  --color-tertiary: #705c30;
  --color-surface-container-highest: #e4e0d8;
  --color-primary: #4a7c59;
  --color-secondary-fixed-dim: #d4ccbf;
  --color-inverse-surface: #2e3230;
  --color-surface-bright: #faf6f0;
  --color-inverse-primary: #8ecf9e;
  --color-on-surface: #2e3230;
  --color-surface-variant: #e4e0d8;
  --color-tertiary-fixed: #f8e0a8;
  --color-secondary-container: #f0e8db;
  --color-on-surface-variant: #4a4e4a;
  --color-secondary-fixed: #f0e8db;
  --color-outline: #74796e;
  --color-on-tertiary-fixed-variant: #554020;
  --color-on-secondary-container: #5e5548;
  --color-on-secondary-fixed: #1e1a13;
  --color-inverse-on-surface: #f5f0e8;
  --color-on-primary-fixed: #002110;
  --color-error: #b83230;
  --color-on-tertiary: #ffffff;
  --color-primary-fixed-dim: #8ecf9e;
  --color-surface-container-high: #eae6de;
  --color-tertiary-container: #c4a66a;
  --color-outline-variant: #c4c8bc;
  --color-on-secondary: #ffffff;
  --color-on-primary-container: #d8f0de;

  /* LIGHT THEME FONTS */
  --font-headline: 'Literata', serif;
  --font-body: 'Nunito Sans', sans-serif;
  --font-label: 'Nunito Sans', sans-serif;
  
  --radius-btn: 0.5rem;
  --pulse-color: rgba(74, 124, 89, 0.7); /* Primary light color */
  --pulse-color-transparent: rgba(74, 124, 89, 0);
}

html.dark {
  /* DARK THEME COLORS */
  --color-surface-container: #1e2020;
  --color-on-error-container: #ffdad6;
  --color-on-background: #e2e2e2;
  --color-surface: #121414;
  --color-primary-container: #0d0d0d;
  --color-surface-container-lowest: #0c0f0f;
  --color-secondary: #ffb59a;
  --color-on-primary: #313030;
  --color-tertiary-fixed-dim: #c7c6c6;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-surface-dim: #121414;
  --color-on-tertiary-fixed: #1a1c1c;
  --color-on-tertiary-container: #7a7b7b;
  --color-on-primary-fixed-variant: #474646;
  --color-on-secondary-fixed-variant: #802a00;
  --color-surface-tint: #c9c6c5;
  --color-primary-fixed: #e5e2e1;
  --color-surface-container-low: #1a1c1c;
  --color-background: #121414;
  --color-tertiary: #c7c6c6;
  --color-surface-container-highest: #333535;
  --color-primary: #c9c6c5;
  --color-secondary-fixed-dim: #ffb59a;
  --color-inverse-surface: #e2e2e2;
  --color-surface-bright: #38393a;
  --color-inverse-primary: #5f5e5e;
  --color-on-surface: #e2e2e2;
  --color-surface-variant: #333535;
  --color-tertiary-fixed: #e3e2e2;
  --color-secondary-container: #f95e14;
  --color-on-surface-variant: #c4c7c7;
  --color-secondary-fixed: #ffdbcf;
  --color-outline: #8e9192;
  --color-on-tertiary-fixed-variant: #464747;
  --color-on-secondary-container: #4f1700;
  --color-on-secondary-fixed: #380d00;
  --color-inverse-on-surface: #2f3131;
  --color-on-primary-fixed: #1c1b1b;
  --color-error: #ffb4ab;
  --color-on-tertiary: #2f3131;
  --color-primary-fixed-dim: #c9c6c5;
  --color-surface-container-high: #282a2b;
  --color-tertiary-container: #0c0d0d;
  --color-outline-variant: #444748;
  --color-on-secondary: #5b1b00;
  --color-on-primary-container: #7c7a7a;

  /* DARK THEME FONTS */
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-label: 'Space Grotesk', sans-serif;
  
  --radius-btn: 0.25rem;
  --pulse-color: rgba(249, 94, 20, 0.7); /* Secondary dark color */
  --pulse-color-transparent: rgba(249, 94, 20, 0);
}

body {
  font-family: var(--font-body);
}

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

.animate-fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.pulse-shadow {
  box-shadow: 0 0 0 0 rgba(249, 94, 20, 0.7);
  animation: pulse 2s infinite;
}

html:not(.dark) .pulse-shadow {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    animation: pulse-light 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 94, 20, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(249, 94, 20, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 94, 20, 0); }
}

@keyframes pulse-light {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.pulse-theme {
  animation: pulse-theme-anim 2s infinite;
}

@keyframes pulse-theme-anim {
  0% { transform: scale(1); box-shadow: 0 0 0 0 var(--pulse-color); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 15px var(--pulse-color-transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 var(--pulse-color-transparent); }
}