@import url("https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700,800,900&display=swap");

:root {
  /* Brand */
  --color-teal: #57a8a6;
  --color-olive: #a6a857;
  --color-plum: #a758a3;
  --color-soft-black: #29272b;
  --color-white: #fff;
  --color-ink: var(--color-soft-black);
  --color-paper: var(--color-white);
  --color-section: var(--color-teal);
  --color-muted: color-mix(in srgb, var(--color-soft-black) 68%, var(--color-white));
  --color-line: color-mix(in srgb, var(--color-soft-black) 18%, transparent);
  --color-accent: var(--color-plum);
  --color-accent-dark: var(--color-plum);
  --color-panel: var(--color-soft-black);
  --color-field: var(--color-white);
  --color-card: color-mix(in srgb, var(--color-teal) 12%, var(--color-white));
  --color-overlay: var(--color-plum);
  --color-deep: var(--color-soft-black);
  --color-electric: var(--color-olive);
  --color-discord: var(--color-plum);
  --color-discord-hover: var(--color-olive);
  --color-email: var(--color-plum);
  --color-email-hover: var(--color-olive);

  /* Replace these values with url("../assets/file-name.jpg") when visuals are ready. */
  --hero-image: url("../assets/hero/MEG-TIW1.jpg");
  --tile-1-image: url("../assets/logos/MEG-DIV-LOGO.jpg");
  --tile-2-image: url("../assets/logos/MEG-GST-LOGO.jpg");
  --tile-3-image: url("../assets/logos/MEG-MMA-LOGO.jpg");
  --tile-4-image: url("../assets/logos/MEG-MIS-LOGO.jpg");
  --tile-5-image: url("../assets/logos/MEG-OCT-LOGO.jpg");
  --tile-6-image: url("../assets/logos/MEG-RSH-LOGO.jpg");

  /* Typography */
  --font-display: "Switzer", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Switzer", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --page-gutter: clamp(20px, 5vw, 72px);
  --max-width: 1180px;
  --header-height: 76px;
  --radius-small: 8px;
  --radius-round: 999px;
}