/* Font system and color system switch independently, each via its own
   data attribute on <html>, so any font pairing can be combined with
   any accent color. --t-* are extra tokens for the handful of spots
   that were hardcoded (header hover swatch, CTA hover, corner marks).
   Shared by every "-v2" page — keep this file, poz-header-adaptive.css
   and poz-theme-switcher.js in sync with index2.html if you change the
   design system. */

/* Color swatch dots in the Settings panel: name shows only on hover, as a
   small tooltip, instead of a permanent text label next to each dot. */
.poz-color-dot { position: relative; }
.poz-color-dot::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 1;
}
.poz-color-dot:hover::after { opacity: 1; }

/* Floating trigger: no background chrome — the PNG floats directly on the
   page. It has a dark-background and a light-background variant (swapped
   in poz-theme-switcher.js based on which page section currently sits
   behind it, same idea as the header logo swap in poz-header-adaptive.css)
   so it stays visible over both. Two animations run at once, composited
   via the individual translate/rotate properties (not the transform
   shorthand) so they don't fight over the same property: a continuous
   float bobbing ±10% of the icon's size, and a quick attention shake that
   fires every few seconds on top of it. Plus the short bounce played once
   when the user scrolls past the attention threshold. */
#poz-theme-toggle { position: relative; }
#poz-theme-toggle img {
  position: absolute;
  inset: 0;
  margin: auto;
  display: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.10)) drop-shadow(0 8px 18px rgba(0,0,0,0.16));
  animation: poz-toggle-float 3s ease-in-out infinite, poz-toggle-shake 4.2s ease-in-out infinite;
  transform-origin: 50% 65%;
  /* own compositor layer: the drop-shadow is rasterized once and the
     never-ending float/shake runs on the compositor, not as a repaint
     every frame */
  will-change: translate, rotate;
}
#poz-theme-toggle img.is-active { display: block; }
@keyframes poz-toggle-float {
  0%, 100% { translate: 0 -10%; }
  50% { translate: 0 10%; }
}
@keyframes poz-toggle-shake {
  0%, 78%, 100% { rotate: 0deg; }
  81% { rotate: -9deg; }
  84% { rotate: 9deg; }
  87% { rotate: -7deg; }
  90% { rotate: 7deg; }
  93% { rotate: -4deg; }
  96% { rotate: 4deg; }
}
@keyframes poz-toggle-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-10px) scale(1.08); }
  55% { transform: translateY(0) scale(0.97); }
  75% { transform: translateY(-4px) scale(1.03); }
}
#poz-theme-toggle.poz-attn { animation: poz-toggle-bounce 0.7s ease; }

/* Rotating glow ring around the toggle's circular edge — the same masked
   conic-gradient technique as the "One AI Coworker" badge glow on the ROAR
   coworker page (.glow-anim/.glow-inner in style.css, @keyframes
   lqd-outline-glow-2), reused here at the toggle's 56px circular size.
   Purely additive: it sits alongside the existing icon swap, float/shake/
   bounce animations and drop-shadow, none of which it replaces. */
#poz-theme-toggle .poz-toggle-glow {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 50%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
#poz-theme-toggle .poz-toggle-glow-inner {
  background: conic-gradient(from 290deg at 50%, transparent 0%, var(--primary-color1, #1290be) 14%, transparent 14%);
  animation: lqd-outline-glow-2 6s linear infinite;
  will-change: transform; /* composited rotation, no per-frame repaint */
  border-radius: 50%;
  aspect-ratio: 1/1;
  inset-inline-start: 50%;
  top: 50%;
  position: absolute;
  min-width: 100%;
  min-height: 100%;
}

/* Same technique again, on the Quick Tour/chat panel that opens when the
   toggle is clicked. The mask's padding controls the glow's thickness —
   kept slim (1.5px) so it reads as a fine glowing line traveling through
   the glassmorphism rim, not a thick border. Sits behind the opaque white
   cardInner (appended first in the JS), so the header, messages, input
   and pill row are all unaffected. */
#poz-tour-overlay .poz-tour-glow {
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
#poz-tour-overlay .poz-tour-glow-inner {
  background: conic-gradient(from 290deg at 50%, transparent 0%, #ffffff 14%, transparent 14%);
  animation: lqd-outline-glow-2 6s linear infinite;
  border-radius: inherit;
  aspect-ratio: 1/1;
  inset-inline-start: 50%;
  top: 50%;
  position: absolute;
  min-width: 100%;
  min-height: 100%;
}

/* Woggle's "typing…" indicator (three dots) shown briefly before each bot
   reply types itself out — see typeIntoElement() in poz-theme-switcher.js. */
.poz-chat-dots { display: inline-flex; align-items: center; gap: 3px; padding: 2px 0; }
.poz-chat-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  animation: poz-chat-dot-bounce 1.1s ease-in-out infinite;
}
.poz-chat-dots span:nth-child(2) { animation-delay: .15s; }
.poz-chat-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes poz-chat-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Woggle's own inputs (the top search field and the in-conversation reply
   box) sit on light frosted glass — a slightly muted placeholder instead
   of the browser's default. */
.poz-glass-input::placeholder { color: rgba(0,0,0,0.42); }
.poz-glass-input::-webkit-input-placeholder { color: rgba(0,0,0,0.42); }
.poz-glass-input::-moz-placeholder { color: rgba(0,0,0,0.42); opacity: 1; }

/* The Woggle results/transcript list scrolls inside the glass card — a
   slim, semi-transparent scrollbar instead of the OS default so it doesn't
   look like a plain textarea. */
/* contain: scrolling the transcript to its end mustn't chain into the page
   behind the overlay (which is frozen while it's open). */
#poz-tour-list, #poz-theme-panel { overscroll-behavior: contain; }
#poz-tour-list { scrollbar-width: thin; }
#poz-tour-list::-webkit-scrollbar { width: 5px; }
#poz-tour-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 999px; }

/* The spark icon inside the Woggle "Ask us anything" bar — a slow,
   continuous breathing pulse so the bar reads as an AI agent waiting to be
   asked something, not a static search field. */
.poz-ask-icon { animation: poz-ask-pulse 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes poz-ask-pulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.18); opacity: 1; }
}

/* Armin Grotesk (W Type Foundry) is a paid commercial typeface — no font
   files are bundled. Drop licensed .woff2 files into
   assets/fonts/armin-grotesk/ (see the README there for exact filenames)
   and this activates automatically; until then the @font-face below just
   fails to load and the stack quietly falls through to the local
   'arminGrotesk Fallback' alias, then sans-serif. */
@font-face {
  font-family: 'arminGrotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'arminGrotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'arminGrotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'arminGrotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'arminGrotesk Fallback';
  src: local('Arial');
  font-weight: 400 700;
}

/* ---------- Font systems ---------- */
:root {
  --font-archivo: 'Archivo', sans-serif;
  --font-kanit: 'Plus Jakarta Sans', sans-serif;
  --font-spaceGrotesk: 'Plus Jakarta Sans', sans-serif;
  --font-felidae: 'Archivo', sans-serif;
  --font-tartuffo-Trial: 'Archivo', sans-serif;
  --t-body-font: 'Plus Jakarta Sans', Inter, sans-serif;
}
[data-font="grotesk"] {
  --font-archivo: 'Archivo', sans-serif;
  --font-kanit: 'Plus Jakarta Sans', sans-serif;
  --font-spaceGrotesk: 'Plus Jakarta Sans', sans-serif;
  --font-felidae: 'Archivo', sans-serif;
  --font-tartuffo-Trial: 'Archivo', sans-serif;
  --t-body-font: 'Plus Jakarta Sans', Inter, sans-serif;
}
[data-font="serif"] {
  --font-archivo: 'Fraunces', serif;
  --font-kanit: 'Inter', sans-serif;
  --font-spaceGrotesk: 'Inter', sans-serif;
  --font-felidae: 'Fraunces', serif;
  --font-tartuffo-Trial: 'Fraunces', serif;
  --t-body-font: 'Inter', sans-serif;
}
[data-font="technical"] {
  --font-archivo: 'Space Grotesk', sans-serif;
  --font-kanit: 'Work Sans', sans-serif;
  --font-spaceGrotesk: 'Space Grotesk', sans-serif;
  --font-felidae: 'Space Grotesk', sans-serif;
  --font-tartuffo-Trial: 'Space Grotesk', sans-serif;
  --t-body-font: 'Work Sans', sans-serif;
}
[data-font="corporate"] {
  --font-archivo: 'IBM Plex Sans', sans-serif;
  --font-kanit: 'Inter', sans-serif;
  --font-spaceGrotesk: 'Inter', sans-serif;
  --font-felidae: 'IBM Plex Sans', sans-serif;
  --font-tartuffo-Trial: 'IBM Plex Sans', sans-serif;
  --t-body-font: 'Inter', sans-serif;
}
[data-font="bold"] {
  --font-archivo: 'Unbounded', sans-serif;
  --font-kanit: 'Manrope', sans-serif;
  --font-spaceGrotesk: 'Manrope', sans-serif;
  --font-felidae: 'Unbounded', sans-serif;
  --font-tartuffo-Trial: 'Unbounded', sans-serif;
  --t-body-font: 'Manrope', sans-serif;
}
[data-font="saas"] {
  --font-archivo: 'Sora', sans-serif;
  --font-kanit: 'Manrope', sans-serif;
  --font-spaceGrotesk: 'Sora', sans-serif;
  --font-felidae: 'Sora', sans-serif;
  --font-tartuffo-Trial: 'Sora', sans-serif;
  --t-body-font: 'Manrope', sans-serif;
}
[data-font="original"] {
  --font-archivo: 'Inter Variable', Inter, sans-serif;
  --font-kanit: 'Inter Variable', Inter, sans-serif;
  --font-spaceGrotesk: 'Inter Variable', Inter, sans-serif;
  --font-felidae: 'Inter Variable', Inter, sans-serif;
  --font-tartuffo-Trial: 'Inter Variable', Inter, sans-serif;
  --t-body-font: 'Inter Variable', Inter, sans-serif;
}
[data-font="armin"] {
  --font-archivo: 'arminGrotesk', 'arminGrotesk Fallback', sans-serif;
  --font-kanit: 'Inter', sans-serif;
  --font-spaceGrotesk: 'Inter', sans-serif;
  --font-felidae: 'arminGrotesk', 'arminGrotesk Fallback', sans-serif;
  --font-tartuffo-Trial: 'arminGrotesk', 'arminGrotesk Fallback', sans-serif;
  --t-body-font: 'Inter', sans-serif;
}

/* ---------- Color systems ----------
   :root is a standalone fallback (kept separate from any [data-color=...]
   rule on purpose — combining it with one, e.g. ":root, [data-color=X]",
   made that color win every time because :root always matches regardless
   of which data-color is actually set, and the combined rule's source
   position could out-cascade the real selection). Every page always
   carries an explicit data-color attribute, so in practice only the
   matching rule below applies. */
:root {
  --primary-color1: #1290be;
  --primary-color1-opc: 18, 144, 190;
  --t-header-hover-bg: var(--primary-color1);
  --t-header-hover-icon: #ffffff;
  --t-cta-hover: var(--primary-color1);
  --t-corner-mark: var(--primary-color1);
}
[data-color="cyan"] {
  --primary-color1: #1290be;
  --primary-color1-opc: 18, 144, 190;
  --t-header-hover-bg: var(--primary-color1);
  --t-header-hover-icon: #ffffff;
  --t-cta-hover: var(--primary-color1);
  --t-corner-mark: var(--primary-color1);
}
[data-color="steel"] {
  --primary-color1: #3A7CA5;
  --primary-color1-opc: 58, 124, 165;
  --t-header-hover-bg: var(--primary-color1);
  --t-header-hover-icon: #ffffff;
  --t-cta-hover: var(--primary-color1);
  --t-corner-mark: var(--primary-color1);
}
[data-color="teal"] {
  --primary-color1: #12AFBD;
  --primary-color1-opc: 18, 175, 189;
  --t-header-hover-bg: var(--primary-color1);
  --t-header-hover-icon: #ffffff;
  --t-cta-hover: var(--primary-color1);
  --t-corner-mark: var(--primary-color1);
}
[data-color="indigo"] {
  --primary-color1: #6C4DFB;
  --primary-color1-opc: 108, 77, 251;
  --t-header-hover-bg: var(--primary-color1);
  --t-header-hover-icon: #ffffff;
  --t-cta-hover: var(--primary-color1);
  --t-corner-mark: var(--primary-color1);
}
[data-color="emerald"] {
  --primary-color1: #157A54;
  --primary-color1-opc: 21, 122, 84;
  --t-header-hover-bg: var(--primary-color1);
  --t-header-hover-icon: #ffffff;
  --t-cta-hover: var(--primary-color1);
  --t-corner-mark: var(--primary-color1);
}
[data-color="terracotta"] {
  --primary-color1: #C1502E;
  --primary-color1-opc: 193, 80, 46;
  --t-header-hover-bg: var(--primary-color1);
  --t-header-hover-icon: #ffffff;
  --t-cta-hover: var(--primary-color1);
  --t-corner-mark: var(--primary-color1);
}
[data-color="sapphire"] {
  --primary-color1: #1E5FCC;
  --primary-color1-opc: 30, 95, 204;
  --t-header-hover-bg: var(--primary-color1);
  --t-header-hover-icon: #ffffff;
  --t-cta-hover: var(--primary-color1);
  --t-corner-mark: var(--primary-color1);
}
[data-color="amber"] {
  --primary-color1: #C88A1E;
  --primary-color1-opc: 200, 138, 30;
  --t-header-hover-bg: var(--primary-color1);
  --t-header-hover-icon: #111111;
  --t-cta-hover: var(--primary-color1);
  --t-corner-mark: var(--primary-color1);
}
[data-color="original"] {
  --primary-color1: #282828;
  --primary-color1-opc: 58, 124, 165;
  --t-header-hover-bg: #C2EE10;
  --t-header-hover-icon: #020202;
  --t-cta-hover: #6b21f4;
  --t-corner-mark: #6b21f4;
}

/* Two spots the toggle can't reach with the vars above because the stock
   template hardcoded them per page (hero/process body font, CTA hover,
   process-item corner marks). Pages that have this markup benefit for
   free; pages that don't simply never match these selectors. */
body { font-family: var(--t-body-font, var(--font-kanit)); }
.cta:hover { color: var(--t-cta-hover, var(--primary-color1)) !important; }
.process-item::after {
  border-top-color: var(--t-corner-mark, var(--primary-color1)) !important;
  border-right-color: var(--t-corner-mark, var(--primary-color1)) !important;
}

/* ---------- Heading capitalization ---------- */
[data-heading-case="upper"] h1,
[data-heading-case="upper"] h2,
[data-heading-case="upper"] h3,
[data-heading-case="upper"] h4,
[data-heading-case="upper"] h5,
[data-heading-case="upper"] h6 {
  text-transform: uppercase;
}
[data-heading-case="normal"] h1,
[data-heading-case="normal"] h2,
[data-heading-case="normal"] h3,
[data-heading-case="normal"] h4,
[data-heading-case="normal"] h5,
[data-heading-case="normal"] h6 {
  text-transform: none;
}

/* ---------- Paragraph text size ----------
   Only affects the base body size and plain <p> tags — many components in
   this template hardcode their own paragraph font-size with a more
   specific class (e.g. .process-left p), which intentionally takes
   priority so responsive/clamp() sizing in hero sections isn't clobbered. */
[data-text-size="sm"] body { font-size: 15px; }
[data-text-size="md"] body { font-size: 18px; }
[data-text-size="lg"] body { font-size: 21px; }
[data-text-size="sm"] p { font-size: 15px; }
[data-text-size="md"] p { font-size: 18px; }
[data-text-size="lg"] p { font-size: 21px; }