/* Appily Eightyone — VERSO STUDIO tokens
   Cyanotype atelier: cool stone canvas, deep ink, cyanotype blue, acid flare.
   Deliberately not dark-glass dock, not sage spine, not teal mega-menu. */
:root {
  --vx-canvas: #D9E2EA;
  --vx-paper: #F8F7F4;
  --vx-ink: #101820;
  --vx-mute: #2f3d48; /* WCAG-friendly secondary text on paper/canvas */
  --vx-line: rgba(16, 24, 32, 0.14);
  --vx-cyan: #0E6B8A;
  --vx-cyan-deep: #0A4F68;
  --vx-flare: #D6F23A;
  --vx-flare-ink: #1A2208;
  --vx-mist: rgba(14, 107, 138, 0.12);
  --vx-shadow: 0 22px 50px rgba(16, 24, 32, 0.12);
  --vx-radius: 1.1rem;
  --vx-radius-sm: 0.65rem;
  --vx-font-display: "Anybody", "Segoe UI", sans-serif;
  --vx-font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --vx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vx-max: 1180px;
  --vx-dial: 4.75rem;
  --vx-edge: 1.25rem;

  /* Site-wide nav baseline — Beacon Island + Orbital dock */
  --vx-nav-radius: 1.85rem;
  --vx-nav-radius-sm: 0.95rem;
  --vx-nav-glass: rgba(248, 247, 244, 0.9);
  --vx-nav-glass-border: rgba(16, 24, 32, 0.16);
  --vx-nav-ink: #101820;
  --vx-nav-mute: #2f3d48;
  --vx-nav-paper: #F8F7F4;
  --vx-nav-accent: #D6F23A;
  --vx-nav-accent-ink: #1A2208;
  --vx-nav-cyan: #0A4F68;
  --vx-nav-blur: blur(18px) saturate(1.15);
  --vx-nav-shadow: 0 16px 40px rgba(16, 24, 32, 0.18);

  /* Bridge aliases so older a81-* rules can ride the new identity */
  --a81-void: var(--vx-canvas);
  --a81-ink: var(--vx-ink);
  --a81-mute: var(--vx-mute);
  --a81-mint: var(--vx-cyan);
  --a81-copper: var(--vx-flare-ink);
  --a81-glass: rgba(248, 247, 244, 0.72);
  --a81-glass-strong: rgba(248, 247, 244, 0.9);
  --a81-glass-border: var(--vx-line);
  --a81-glass-border-strong: rgba(16, 24, 32, 0.22);
  --a81-blur: blur(14px);
  --a81-radius: var(--vx-radius);
  --a81-radius-sm: var(--vx-radius-sm);
  --a81-radius-pill: 999px;
  --a81-dock-h: 0px;
  --a81-font-display: var(--vx-font-display);
  --a81-font-body: var(--vx-font-body);
  --a81-shadow: var(--vx-shadow);
  --a81-lift: 0 12px 28px rgba(16, 24, 32, 0.1);
  --a81-max: var(--vx-max);
  --a81-ease: var(--vx-ease);
  --a81-glow-mint: none;
  --a81-glow-copper: none;
  --font-body: var(--vx-font-body);
  --font-display: var(--vx-font-display);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.a81-body,
body.vx-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--vx-font-body);
  font-weight: 400;
  color: var(--vx-ink);
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(14, 107, 138, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(214, 242, 58, 0.18), transparent 50%),
    linear-gradient(165deg, #E8EFF4 0%, var(--vx-canvas) 48%, #CDD8E2 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

body.a81-body a,
body.vx-body a {
  color: var(--vx-cyan-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.2s var(--vx-ease);
}
body.a81-body a:hover,
body.vx-body a:hover { color: var(--vx-ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.a81-skip,
.vx-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.65rem 1rem;
  background: var(--vx-ink);
  color: var(--vx-paper) !important;
  text-decoration: none !important;
}
.a81-skip:focus,
.vx-skip:focus { left: 1rem; top: 1rem; }

.a81-wrap,
.vx-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.a81-container,
.vx-frame {
  width: min(var(--vx-max), calc(100% - 2.5rem));
  margin-inline: auto;
}

@keyframes vx-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vx-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes vx-pulse-flare {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 242, 58, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(214, 242, 58, 0); }
}