/* NX Technologies brand (NX Brand Guideline 2023): the one place the portal's colours, typefaces and characters are
   defined. Everything consumes it: the portal (templates/base.html, before portal.css), the manual's widgets
   (apps/documentation/views.py adds it to each one) and the NX Assistant chat (mapped below).
   Electric Lime is an accent, never text or thin lines on light surfaces. */

/* ---------- Typefaces (OFL, self-hosted) ---------- */
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Variable.2783ca70286c.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Variable.b2a117800834.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Italic-Variable.fa7233636f9d.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --nx-lime: #D6FB0F;      /* Electric Lime */
  --nx-green: #083232;     /* Elegant Green */
  --nx-green-rgb: 8, 50, 50;  /* for rgba() shadows and overlays */
  --nx-green-80: #586F6F;
  --nx-green-50: #889898;
  --nx-green-30: #B7C1C1;
  --nx-green-10: #E7EAEB;
  --nx-white: #FFFFFF;
  --nx-signal: #FF5B22;    /* secondary colour: small error markers only */
  --nx-font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nx-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Names the documents server's widgets read (getComputedStyle); same values. */
  --nx-accent-orange: var(--nx-signal);
  --nx-font-headline: var(--nx-font-display);
}

/* ---------- NX Assistant chat ----------
   <nx-support-chat> is served by the assistant with its own copy of the tokens inside its shadow root. Custom
   properties set on the element from the page win over its :host defaults and inherit into it, so the chat
   takes its colours and typefaces from here. */
nx-support-chat {
  --role-text-primary: var(--nx-green);
  --role-text-secondary: var(--nx-green-80);
  --role-text-muted: var(--nx-green-50);
  --role-text-onaccent: var(--nx-green);
  --role-text-ondark: var(--nx-white);
  --role-bg-page: var(--nx-white);
  --role-bg-subtle: var(--nx-green-10);
  --role-bg-inverse: var(--nx-green);
  --role-border-subtle: var(--nx-green-30);
  --role-border-strong: var(--nx-green-50);
  --role-emphasis: var(--nx-lime);
  --role-link: var(--nx-green);
  --type-font-display: var(--nx-font-display);
  --type-font-body: var(--nx-font-body);
}

/* ---------- Watt, the NX Assistant's character (templates/partials/watt.html) ----------
   "Mirada" in the icon proposal: Elegant Green ball, Electric Lime gaze. The bolt's two strokes, cut down, are the eyes:
   each blinks by shrinking along its own slant to nothing and back, ends kept horizontal: skewX = atan((1 - scale) * 332 / 462). */
.watt-ball { fill: var(--nx-green); }
.watt-bolt { fill: var(--nx-lime); }
.watt-eye { transform-box: fill-box; transform-origin: center; animation: watt-blink 5s linear infinite; }
@keyframes watt-blink {
  0%, 90%, 100% { transform: scaleY(1) skewX(0deg); }
  92%, 96% { transform: scaleY(.5) skewX(19.77deg); }
  94% { transform: scaleY(.001) skewX(35.68deg); }
}
@media (prefers-reduced-motion: reduce) { .watt-eye { animation: none; } }