:root {
  --font-title: "Gopher", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@font-face {
  font-family: "Gopher";
  src: url("assets/Gopher/Gopher_regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gopher";
  src: url("assets/Gopher/Gopher_regular_italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Gopher";
  src: url("assets/Gopher/Gopher_Bold.otf") format("opentype");
  font-weight: 700 950;
  font-style: normal;
  font-display: swap;
}

:root {
  /*
   * Brand config.
   * To replace visual assets, keep the same filenames in /assets or edit these paths.
   */
  --asset-logo: url("assets/logo.png");
  --asset-login-background: url("assets/background.png");
  --asset-app-icon: url("assets/app-icon.png");

  /* Official project palette. Use these for future interface work. */
  --brand-cream: #ECEFD0;
  --brand-orange: #F2552C;
  --brand-teal: #174950;
  --brand-pink: #F9A9AC;
  --login-theme-background: #E37A58;

  /*
   * Semantic surface colors.
   * Change these if you want to reskin where colors appear without editing layout CSS.
   */
  --page-background: #ffffff;
  --surface-body: #ffffff;
  --surface-header: var(--brand-cream);
  --menu-header-background: var(--brand-pink);
  --modal-header-background: var(--brand-pink);
  --post-header-background: var(--surface-header);
  --topbar-background: var(--surface-header);

  --ink: var(--brand-teal);
  --muted: rgba(23, 73, 80, 0.68);
  --paper: var(--page-background);
  --panel: var(--surface-body);
  --line: rgba(23, 73, 80, 0.18);
  --shadow: 0 24px 70px rgba(23, 73, 80, 0.16);

  /* Backwards-compatible semantic aliases used by the current CSS. */
  --rose: var(--brand-orange);
  --rose-dark: #c23f20;
  --sage: var(--brand-teal);
  --gold: var(--brand-orange);
}