@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNova-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNova-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/ProximaNova-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --forest-950: #16281C;
  --forest-700: #1F6B45;
  --paper: #FBFAF5;
  --surface: #ffffff;
  --honey: #F5C518;
  --ink-muted: #6E7A6C;
  --line: #EDEBE0;
  --focus: #126CB8;
  --page-width: 1080px;
  --genbee-canvas: #FBFAF5;
  --genbee-canvas-mist: #FBFAF5;
  --genbee-canvas-glow: transparent;
  --genbee-edge: #EDEBE0;
  --genbee-edge-width: 1px;
}

body,
button,
input,
select,
textarea {
  font-family: "Proxima Nova", ui-sans-serif, system-ui, sans-serif;
}

h1,
h2,
h3,
h4 {
  font-family: "Proxima Nova", ui-sans-serif, system-ui, sans-serif;
}

genbee-breadcrumbs {
  flex: none;
}

body > header {
  background: #ffffff;
  border-bottom-color: var(--genbee-edge);
  backdrop-filter: none;
}

.brand img[src="/genbee-logo.svg"] {
  width: auto;
  height: 40px;
}

/* Compact brand mentions use the full lowercase wordmark. The image carries
   the accessible name, while surrounding words keep their normal text flow
   in headings, actions, and footers. */
.genbee-inline-logo {
  display: inline-block;
  width: auto;
  height: 1.05em;
  max-width: none;
  flex: none;
  vertical-align: -0.18em;
}

.genbee-logo-label {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
}

html {
  background-color: var(--genbee-canvas);
}

body {
  background-color: var(--genbee-canvas);
  background-image: none;
}

.auth-gate {
  background-color: var(--genbee-canvas);
  background-image: none;
}

/* The canonical mark is a friendly bee on a transparent canvas — no corner
   softening needed, only consistent sizing wherever the mark appears. */
.auth-mark {
  clip-path: none;
  background: transparent;
}

.auth-mark img[src="/genbee-mark.svg"] {
  width: auto;
  height: 96px;
}

/* One quiet sage edge for every substantial surface. State, focus, and
   commerce accents keep their stronger colors in the page-level styles. */
.connection-card,
.surface-card,
.journey-rail,
.account-identity,
.plan-card,
.pack-card,
.purchase-details,
.learner-row,
.subscription-row,
.learner-create,
.summary-stat,
.path-card,
.inspector,
.lesson,
.vocabulary-ledger,
.activity-board,
#activitypicker,
#creditpurchase,
#lessoncomplete {
  border-color: var(--genbee-edge);
}

.card,
.tile,
.stick,
.cold,
.drow,
.imgbox,
.act-column,
.consent-control,
.learner-invite,
.banner,
dialog {
  border: var(--genbee-edge-width) solid var(--genbee-edge);
}

.flag {
  border: var(--genbee-edge-width) solid var(--genbee-edge);
  border-left: 3px solid var(--critical, #d92d20);
}

.flag.note {
  border-left-color: var(--amber-ink, #b8860b);
}

.drow.mc {
  border-left: 3px solid #e05252;
}

@media print {
  html,
  body,
  .auth-gate {
    background: #fff;
  }
}

@media (forced-colors: active) {
  :root {
    --genbee-edge: CanvasText;
  }

  html,
  body,
  .auth-gate {
    background: Canvas;
  }
}