/* =====================================================================
   Resilience Academy — one brand for every screen
   The public website, the Admin / Staff panel and the Student (LMS) area
   all read their colours, fonts and logo treatment from here.
   Change a value in this file and the whole product follows.
   ===================================================================== */
:root {
  /* colour */
  --brand-blue: #0a4a8a;
  --brand-blue-2: #1565c0;
  --brand-navy: #0b1f4a;
  --brand-night: #06142f;
  --brand-orange: #f97316;
  --brand-orange-2: #fb923c;
  --brand-orange-deep: #ea6a0a;
  --brand-ink: #0f1a33;
  --brand-text: #475066;
  --brand-muted: #6b7691;
  --brand-bg: #f3f6fb;
  --brand-sky: #e8f1fb;
  --brand-line: #e3eaf4;
  --brand-green: #16a34a;
  --brand-red: #dc2626;

  /* type */
  --brand-font-head: "Poppins", "Inter", system-ui, sans-serif;
  --brand-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* shared gutter: the header, page content and footer all start and end on the same lines */
  --brand-content-max: 92.5rem;   /* 1480px at the normal root size, grows with the screen on large monitors */
  --brand-gutter: max(5vw, calc((100vw - var(--brand-content-max)) / 2));
}

/* The logo is dark artwork: on dark panels it always sits on a white plate. */
.brand-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55);
}
.brand-logo-plate img { display: block; height: 46px; width: auto; }
/* just the tree "R" from the logo, for collapsed sidebars and tiny spaces */
.brand-mark {
  display: inline-block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: #fff url("../logo.webp") -3px 52% / 116px auto no-repeat;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
}