/* ──────────────────────────────────────────────────────────────────────────
   Lapuni brand layer for the Furo theme.
   Brand tokens are the golden standard from the Keycloak login theme /
   apps/web/src/styles.css. This file adds the gradient accents Furo's CSS
   variables alone can't express — and adapts them to light/dark.

   Furo switches themes three ways; we redefine our accent vars in all of them:
     - body                                        → light (default)
     - body[data-theme="dark"]                     → explicit dark toggle
     - @media (prefers-color-scheme: dark) +
       body:not([data-theme="light"])              → "auto" following the OS
   ────────────────────────────────────────────────────────────────────────── */
body {
  --lapuni-gradient: linear-gradient(
    135deg,
    #f96a81 0%,
    #af45d4 48%,
    #30ced7 100%
  );
  --lapuni-purple: #af45d4;
  --lapuni-coral: #f96a81;

  /* Light-mode accents: deep purple reads well on white. */
  --lapuni-code-fg: #8e3bb8;
  --lapuni-code-bg: rgba(175, 69, 212, 0.08);
  --lapuni-accent-soft: rgba(175, 69, 212, 0.12);
  --lapuni-admonition-border: #af45d4;
}

/* Dark accents: lighten foregrounds so they read on the dark background. */
body[data-theme="dark"] {
  --lapuni-code-fg: #e3b0f7;
  --lapuni-code-bg: rgba(200, 121, 230, 0.18);
  --lapuni-accent-soft: rgba(200, 121, 230, 0.2);
  --lapuni-admonition-border: #c879e6;
}
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --lapuni-code-fg: #e3b0f7;
    --lapuni-code-bg: rgba(200, 121, 230, 0.18);
    --lapuni-accent-soft: rgba(200, 121, 230, 0.2);
    --lapuni-admonition-border: #c879e6;
  }
}

/* Thin gradient ribbon pinned to the top of every page (theme-agnostic). */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--lapuni-gradient);
  z-index: 100;
}

/* Logo sizing in the sidebar (the asset is a tall portrait lockup). */
.sidebar-logo-container {
  margin: 1.4rem auto 0.6rem;
}
.sidebar-logo {
  max-height: 104px;
  width: auto;
}

.sidebar-search:focus {
  border-color: var(--lapuni-purple);
}

/* Gradient underline accent under page H1s. */
article h1 {
  padding-bottom: 0.3rem;
  border-bottom: 3px solid transparent;
  border-image: var(--lapuni-gradient) 1;
}

/* Inline code in the brand purple — foreground + tint adapt per theme. */
code.literal {
  color: var(--lapuni-code-fg);
  background: var(--lapuni-code-bg);
}

/* Note/tip admonition accents inherit the brand instead of Furo's blue. */
.admonition.note > .admonition-title,
.admonition.tip > .admonition-title,
.admonition.important > .admonition-title {
  background: var(--lapuni-accent-soft);
}
.admonition.note,
.admonition.tip,
.admonition.important {
  border-inline-start-color: var(--lapuni-admonition-border);
}

a.headerlink:hover {
  color: var(--lapuni-coral);
}

/* ──────────────────────────────────────────────────────────────────────────
   "One tool drives everything: nx" overview grid (developer-workflow page).
   A responsive card grid rendered from a raw-HTML block; colours reuse the
   brand trio and adapt to light/dark via the same three Furo switches above.
   ────────────────────────────────────────────────────────────────────────── */
body {
  --nx-a: #d94f68; /* coral, tuned for contrast on white */
  --nx-b: #8e3bb8; /* purple */
  --nx-c: #0f8b93; /* teal, darkened so it reads on white */
}
body[data-theme="dark"] {
  --nx-a: #ff8098;
  --nx-b: #d79af0;
  --nx-c: #4fd6de;
}
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --nx-a: #ff8098;
    --nx-b: #d79af0;
    --nx-c: #4fd6de;
  }
}

.nx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.nx-card {
  border: 1px solid var(--color-background-border);
  border-radius: 12px;
  padding: 1rem 1.15rem 1.2rem;
  background: var(--color-background-secondary);
}
.nx-card h3 {
  margin: 0 0 0.7rem;
  font-size: 0.98rem;
  font-weight: 700;
}
.nx-card h3 .nx-num {
  font-weight: 800;
  margin-inline-end: 0.4rem;
}
.nx-card h3 .nx-sub {
  font-weight: 400;
  color: var(--color-foreground-muted);
}
.nx-card[data-accent="a"] .nx-num {
  color: var(--nx-a);
}
.nx-card[data-accent="b"] .nx-num {
  color: var(--nx-b);
}
.nx-card[data-accent="c"] .nx-num {
  color: var(--nx-c);
}
.nx-line {
  font-family: var(--font-stack--monospace);
  font-size: 0.82rem;
  line-height: 1.95;
  overflow-x: auto;
  white-space: nowrap;
}
.nx-line code {
  color: var(--lapuni-code-fg);
  background: transparent;
  padding: 0;
}
.nx-line .nx-cmt {
  color: var(--color-foreground-muted);
}
.nx-note {
  color: var(--color-foreground-muted);
  font-size: 0.82rem;
  margin-top: 0.4rem;
}