/* Entry stylesheet for every page. Layer order: later layers win. */
@layer reset, tokens, components, app;

@import url("tokens.css") layer(tokens);
@import url("components.css") layer(components);

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("/fonts/InterDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }
  [hidden] { display: none !important; }
}

@layer app {
  .eg-page-title {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
  }

  /* Images are blocks (see reset), so centre the sign-in logo by margin. */
  .eg-auth-logo { margin-inline: auto; }

  /* The brand link in the header is not styled as a text link. */
  .eg-app a.eg-header-brand {
    color: inherit;
    text-decoration: none;
  }

  /* Section links in the app header. */
  .eg-header-nav { display: flex; gap: var(--space-1); margin-right: auto; margin-left: var(--space-6); }
  .eg-app .eg-header-nav a {
    padding: 6px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
  }
  .eg-app .eg-header-nav a:hover { color: var(--ink); background: var(--surface-page); }
  .eg-app .eg-header-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-page); }
  @media (max-width: 720px) { .eg-header-nav { display: none; } }

  /* The design system's `.eg-app a` rule outranks button colours, so links
     styled as buttons get their colours back here. */
  .eg-app a.eg-btn { text-decoration: none; }
  .eg-app a.eg-btn--primary,
  .eg-app a.eg-btn--danger { color: var(--on-action); }
  .eg-app a.eg-btn--outline { color: var(--ink); }
  .eg-app a.eg-btn--ghost { color: var(--ink-muted); }
  .eg-app a.eg-btn--ghost:hover { color: var(--ink); }
  .eg-app a.eg-btn--danger-ghost { color: var(--danger); }
}