/* Allonia — brand layer over the Pertimm design system (base.css).
   Same canvas, type, components and motion as pertimm.com; only the light changes:
   the Allonia ring (a dark disc and its sky-blue arc) replaces the hexagonal prism,
   and the spectrum runs aqua -> iris -> sky instead of orchid -> iris -> glacier.
   Load order: base.css, then this file, then page stylesheets. */

/* 1. Tokens ----------------------------------------------------------------- */
:root {
  --aqua: #a6f4ea;
  --sky: #adcbf0;
  --plum: #271b36;                  /* the original Allonia wordmark ink */
  --spectrum: linear-gradient(100deg, var(--aqua) 0%, var(--iris) 48%, var(--sky) 100%);
  --spectrum-soft: linear-gradient(100deg, rgb(166 244 234 / .5), rgb(166 140 255 / .5) 48%, rgb(173 203 240 / .5));
  --spectrum-deep: linear-gradient(100deg, #0b7a6f 0%, #5b3fd6 50%, #1f5fb2 100%);
}

/* 2. Brand marks ------------------------------------------------------------ */
.brand__logo { height: 21px; }
.brand--footer .brand__logo { height: 30px; }
@media (max-width: 1079px) { .brand__logo { height: 19px; } }

/* Language switch: same pill vocabulary as the motion toggle */
.lang-switch {
  flex: none; display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .7rem;
  border-radius: var(--radius-pill); border: 1px solid rgb(240 237 247 / .2); background: rgb(5 6 11 / .55);
  color: #f0edf7; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-decoration: none;
  transition: border-color var(--dur-1), background-color var(--dur-1);
}
.lang-switch:hover { border-color: rgb(240 237 247 / .45); background: rgb(240 237 247 / .06); }
.lang-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (min-width: 1080px) { .lang-switch { height: 2.5rem; min-width: 2.5rem; } }
@media (max-width: 420px) { .site-header__actions .lang-switch { display: none; } }
.lang-switch--menu { display: inline; min-width: 0; height: auto; padding: 0; border: 0; background: none; font-size: inherit; font-weight: inherit; letter-spacing: 0; color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* 3. Ring light (lite): bloom + corona + faint Airy rings + the ring mark ------ */
.prism-lite::before {
  background:
    radial-gradient(closest-side, rgb(240 237 247 / .14), transparent 18%),
    conic-gradient(from 200deg, rgb(173 203 240 / 0), rgb(173 203 240 / .28), rgb(166 140 255 / .3), rgb(166 244 234 / .24), rgb(166 244 234 / 0) 45%, rgb(173 203 240 / 0) 70%, rgb(173 203 240 / .16) 88%, rgb(173 203 240 / 0)),
    radial-gradient(closest-side, rgb(12 24 64 / .9), transparent 90%);
}
.prism-lite::after {         /* a circular aperture diffracts into rings, not spikes */
  background:
    radial-gradient(closest-side, transparent 23%, rgb(214 230 250 / .34) 23.6%, transparent 24.4%),
    radial-gradient(closest-side, transparent 33%, rgb(166 140 255 / .22) 33.5%, transparent 34.3%),
    radial-gradient(closest-side, transparent 47%, rgb(166 244 234 / .16) 47.4%, transparent 48.2%);
  -webkit-mask-image: radial-gradient(closest-side, transparent 12%, #000 20%, rgb(0 0 0 / .5) 60%, transparent 96%);
  mask-image: radial-gradient(closest-side, transparent 12%, #000 20%, rgb(0 0 0 / .5) 60%, transparent 96%);
}
.cta-band .prism-lite::after {
  -webkit-mask-image: radial-gradient(closest-side, transparent 12%, #000 20%, rgb(0 0 0 / .5) 60%, transparent 96%);
  mask-image: radial-gradient(closest-side, transparent 12%, #000 20%, rgb(0 0 0 / .5) 60%, transparent 96%);
}
.prism-lite__mark {
  filter: drop-shadow(0 0 1px rgb(214 230 250 / .7)) drop-shadow(0 0 18px rgb(173 203 240 / .42)) drop-shadow(0 0 60px rgb(166 140 255 / .2));
}

/* Home WebGL fallback in the same tone */
.prism-fallback {
  background:
    radial-gradient(22vmax 20vmax at var(--prism-x, 70%) var(--prism-y, 42%), rgb(173 203 240 / .22), transparent 70%),
    radial-gradient(13vmax 13vmax at calc(var(--prism-x, 70%) - 5%) calc(var(--prism-y, 42%) + 7%), rgb(166 244 234 / .14), transparent 70%),
    radial-gradient(15vmax 13vmax at calc(var(--prism-x, 70%) + 6%) calc(var(--prism-y, 42%) + 4%), rgb(166 140 255 / .16), transparent 70%),
    radial-gradient(90% 70% at var(--prism-x, 70%) var(--prism-y, 42%), rgb(10 20 51 / .85), transparent 80%);
}
.prism-fallback::after {
  width: 90vmax;
  background:
    radial-gradient(closest-side, transparent 15%, rgb(214 230 250 / .2) 15.4%, transparent 16%),
    radial-gradient(closest-side, transparent 24%, rgb(166 140 255 / .14) 24.3%, transparent 24.9%);
}

/* 4. Bookend: the giant Allonia wordmark, lit like the ring ------------------- */
.bookend__light {
  aspect-ratio: 1268 / 198;
  -webkit-mask: url("../img/brand/allonia-wordmark.svg") center top / 100% auto no-repeat;
  mask: url("../img/brand/allonia-wordmark.svg") center top / 100% auto no-repeat;
}
.bookend__light::before {
  background: linear-gradient(100deg, transparent 36%, rgb(166 244 234 / .34) 43%, rgb(255 255 255 / .62) 48%, rgb(166 140 255 / .46) 52%, rgb(173 203 240 / .36) 56%, transparent 63%);
}
.bookend__rim { background: radial-gradient(50% 60% at 50% 100%, rgb(173 203 240 / .16), rgb(166 244 234 / .05) 55%, transparent); }

/* 5. Footer: the group card in the slot Pertimm uses for its newsletter ------- */
.group-card {
  display: grid; gap: .85rem; justify-items: start; padding: var(--space-l);
  clip-path: var(--bevel); background: var(--navy-panel); border: 1px solid var(--line);
}
.group-card__logo img { height: 26px; width: auto; opacity: .92; }
.group-card__title { font-size: var(--step-1); line-height: 1.25; font-weight: 560; letter-spacing: -.01em; color: var(--fg); }
.group-card__text { color: var(--fg-2); max-width: 46ch; }

/* 6. Shared Allonia pieces ---------------------------------------------------- */
.product-tag {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .65rem;
  font-size: var(--step--2); font-weight: 560; letter-spacing: .02em; color: var(--fg-2);
  border: 1px solid var(--line-2); border-radius: var(--radius-pill);
}
.product-tag::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid var(--sky); }
.product-tag--neo::before { border-color: var(--iris); }
.product-tag--nexus::before { border-color: var(--aqua); }
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Code sample (models API) */
.code-card { clip-path: var(--bevel); background: #070a14; border: 1px solid var(--line-2); overflow: hidden; }
.code-card__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: var(--step--2); color: var(--fg-3); }
.code-card__dots { display: flex; gap: .35rem; }
.code-card__dots span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--line-3); }
.code-card pre { margin: 0; padding: 1.1rem 1.2rem 1.3rem; overflow-x: auto; font: 500 .8125rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #c9cde0; tab-size: 2; }
.code-card .c-k { color: var(--accent-text); }
.code-card .c-s { color: var(--aqua); }
.code-card .c-m { color: var(--fg-3); }

/* Quote-free reference row: who, what, which product */
.ref-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.ref-list__item { display: grid; gap: .35rem 2rem; padding-block: 1.15rem; border-bottom: 1px solid var(--line); }
.ref-list__who { font-weight: 560; color: var(--fg); }
.ref-list__what { color: var(--fg-2); }
@media (min-width: 900px) { .ref-list__item { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: baseline; } }

/* Visually quiet "on paper" logo swap */
.theme-paper .brand__logo, .theme-paper .group-card__logo img { filter: none; }