/* Font Definitions */
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins.ttf");
}

@font-face {
  font-family: "Hack";
  src: url("fonts/Hack-Regular.ttf");
}

:root {
  /* Color Palette */
  --color-primary: #a74500;
  --color-primary-light: color-mix(in srgb, var(--color-primary), #ffffff 20%);
  --color-primary-dark: #7d3400;
  --color-secondary: #cc8300;
  --color-secondary-light: color-mix(
    in srgb,
    var(--color-secondary),
    #ffffff 20%
  );
  --color-tertiary: #0d3a87;
  --color-tertiary-light: color-mix(
    in srgb,
    var(--color-tertiary),
    #ffffff 20%
  );
  --color-quaternary: #00806e;
  --color-quaternary-light: color-mix(
    in srgb,
    var(--color-quaternary),
    #ffffff 20%
  );

  /* Text Colors */
  --text-primary: var(--color-primary);
  --text-primary-light: #ccc;
  --text-secondary: var(--color-secondary);
  --text-tertiary: var(--color-tertiary);
  --text-quaternary: var(--color-quaternary);

  /* Link Colors */
  --link-primary: color-mix(in srgb, var(--text-primary), #0000ff 50%);
  --link-primary-hover: color-mix(in srgb, var(--text-primary), #0000ff 60%);
  --link-secondary: color-mix(in srgb, var(--color-secondary), #0000ff 80%);
  --link-secondary-hover: color-mix(
    in srgb,
    var(--color-secondary),
    #ffffff 60%
  );
  --link-tertiary: #0c2c1f;
  --link-tertiary-hover: #e0ffec;

  /* Background Colors */
  --bg-primary: rgba(48, 161, 145, 0.1);
  --bg-secondary: rgba(62, 102, 170, 0.1);
  --bg-tertiary: rgba(255, 191, 77, 0.1);
  --bg-quaternary: rgba(255, 151, 77, 0.1);

  /* Background Transparencies */
  --bg-trans-primary: rgba(52, 17, 69, 0.1);
  --bg-trans-secondary: rgba(84, 35, 90, 0.1);
  --bg-trans-tertiary: rgba(20, 86, 55, 0.1);
  --bg-trans-quaternary: rgba(61, 26, 102, 0.1);

  /* Status Colors */
  --color-error: #b71c1c;
  --color-warning: #ff6f00;
  --color-success: #2e7d32;
  --color-info: #0288d1;

  /* Layout */
  --border-color: var(--color-primary);
  --border-radius: 5px;
  --spacing-base: 1rem;
  --spacing-small: calc(var(--spacing-base) * 0.5);
  --spacing-large: calc(var(--spacing-base) * 1.5);
  --nav-width: 7%;
  --profile-width: 14%;

  /* Typography */
  --font-size-base: 16px;
  --font-size-small: calc(var(--font-size-base) * 0.875);
  --font-size-large: calc(var(--font-size-base) * 1.125);
  --font-size-h1: calc(var(--font-size-base) * 2);
  --font-size-h2: calc(var(--font-size-base) * 1.75);
  --font-size-h3: calc(var(--font-size-base) * 1.5);
  --font-size-h4: calc(var(--font-size-base) * 1.25);
  --font-size-h5: calc(var(--font-size-base) * 1.125);
  --font-size-h6: var(--font-size-base);

  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-family-base: "Hack", Arial, sans-serif;
  --font-family-heading: "Hack", Arial, sans-serif;

  /* Shadows */
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 3px 6px rgba(0, 0, 0, 0.25);
  --shadow-heavy: 0 10px 20px rgba(0, 0, 0, 0.3);
  --shadow-content: 0 0 10px rgba(0, 0, 0, 0.15);
  --shadow-table: 0 0 10px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-duration: 0.3s;
  --transition-timing: ease-in-out;
  --transition-base: all var(--transition-duration) var(--transition-timing);

  /* Background Images */
  --bg-image: url("");
  --bg-image-camp: url("");
  --bg-image-club: url("");
  --bg-image-workshop: url("");
}

/* -------------------------------
   Heading Group Styling
--------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  margin: 0 0 1em;
  font-weight: var(--font-weight-bold);
  color: var(--primary-text-color);
  /* A subtle text-shadow to enhance readability over backgrounds */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Explicitly set font sizes for each heading from the styleguide */
h1 {
  font-size: var(--font-size-h1);
}
h2 {
  font-size: var(--font-size-h2);
}
h3 {
  font-size: var(--font-size-h3);
}
h4 {
  font-size: var(--font-size-h4);
}
h5 {
  font-size: var(--font-size-h5);
}
h6 {
  font-size: var(--font-size-h6);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--primary-link-color);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: var(--primary-link-hover);
  text-decoration: underline;
}

a[target="_blank"]::after {
  content: " \2197";
  font-size: 0.8em;
  margin-left: 0.25rem;
  color: inherit;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
}

/* Shared styles for modals */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background-color: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-heavy);
  padding: var(--spacing-base);
  max-width: 90%;
  text-align: center;
}

/* Shared styles for buttons */
.button {
  padding: var(--spacing-small) var(--spacing-base);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-base);
  transition: var(--transition-base);
}

.button:hover {
  background-color: var(--color-primary-light);
}