/* Innov8 design tokens and brand marks.
 *
 * The single source of truth for colour, type and the wordmark across every page
 * on innov8.net.au. Define here, use everywhere. A page that invents its own navy
 * is a page that will drift.
 *
 * The full multi-page build inherits this file. Add tokens here rather than in a
 * page, and if a page needs a one-off value, that is usually a sign the token set
 * is missing something.
 *
 * Recorded in docs/BRAND.md.
 */

:root {
  /* ---- Core palette ---------------------------------------------------- */
  --navy: #0b1a2b;        /* page ground */
  --navy-2: #0f2137;      /* raised surfaces: cards, tiles, chart panels */
  --navy-3: #132a44;      /* pressed and hover states on raised surfaces */
  --cyan: #3fbdf0;        /* the accent. The 8, links, the one thing the eye lands on */
  --blue: #1683c7;        /* deeper accent, for larger fills where cyan would shout */
  --mint: #2fe0bd;        /* primary action */
  --mint-ink: #05372e;    /* text on mint, the only dark-on-light pairing in the set */

  /* ---- Ink ------------------------------------------------------------- */
  --white: #fff;
  --dim: rgba(255, 255, 255, .74);   /* body copy on navy */
  --faint: rgba(255, 255, 255, .52); /* labels, captions, metadata */
  --line: rgba(255, 255, 255, .12);  /* hairlines and borders */

  /* ---- Type ------------------------------------------------------------ */
  --font-display: 'Sora', -apple-system, "Segoe UI", sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", sans-serif;

  /* ---- The page ground -------------------------------------------------
   * One gradient, sized from the top right, so every page shares the same
   * light source. Sized in px rather than percentages so a narrow phone and a
   * wide desktop get the same falloff rather than the same proportion.
   */
  --page-bg:
    radial-gradient(1100px 560px at 88% -8%, rgba(63, 189, 240, .12), transparent 60%),
    var(--navy);
}

/* ---- The wordmark -------------------------------------------------------
 *
 *   <span class="wordmark">innov</span>      ->  innov⁸
 *
 * Lowercase "innov" with the 8 set as a superscript, which is the signature:
 * raised, cyan, and drawn as a continuous figure-8 so it reads as an infinity
 * loop rather than as a numeral.
 *
 * The 8 is a masked pseudo-element rather than markup. That keeps the glyph in
 * one place instead of copied into every page as inline SVG, and because a mask
 * takes its colour from `background`, the mark can be recoloured with a token
 * instead of by editing a path fill.
 *
 * Sized in em throughout, so it scales with whatever font-size the wordmark is
 * given and never needs a per-page adjustment.
 */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark::after {
  content: "";
  display: inline-block;
  /* 0.332em is 0.52em scaled by the glyph's own 60:94 aspect ratio. Setting both
     dimensions keeps the stroke weight correct at every size. */
  width: .332em;
  height: .52em;
  margin-left: .06em;
  vertical-align: .6em;
  background: var(--cyan);
  -webkit-mask: var(--wordmark-8) no-repeat center / contain;
  mask: var(--wordmark-8) no-repeat center / contain;
}

:root {
  --wordmark-8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 94'%3E%3Cpath d='M30,47 C16,47 16,10 30,10 C44,10 44,47 30,47 C14,47 14,86 30,86 C46,86 46,47 30,47 Z' fill='none' stroke='%23fff' stroke-width='16' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* On a light ground the mark inverts: ink letters, the 8 stays cyan. */
.wordmark.on-light { color: var(--navy); }