/* ============================================================
   VITALITY — DESIGN TOKENS
   Single source of truth for all CSS variables, reset, and base styles.
   Load this first on every page.
   ============================================================ */

/* ---- Fonts ----
   Deliberately NOT @import here. An @import inside CSS is discovered only after
   this file has downloaded and parsed, which serialises font loading behind it
   and delays first paint. The three families are loaded as <link rel="stylesheet">
   in each page's <head> instead, alongside the existing preconnect hints. */

/* ---- All design tokens ---- */
:root {
  /* Base background — never pure black */
  --el-bg:  #0a0a0c;
  --el-bg-2: #0d0b12;

  /* Surface layers */
  --el-surface:        rgba(20, 16, 32, 0.55);
  --el-surface-strong: rgba(22, 18, 36, 0.78);

  /* Hairlines */
  --el-hairline:        rgba(255, 255, 255, 0.08);
  --el-hairline-strong: rgba(255, 255, 255, 0.14);

  /* ---- Accent system ----
     ONE chromatic hue for the whole site. Every emphasis on the page is this
     violet at some lightness. Status colours below are a separate system and
     are the only permitted exception. */
  --el-violet:       #9147ff;
  --el-violet-bright: #b57bff;
  --el-violet-deep:  #6d28d9;
  --el-accent-rgb:   145, 71, 255;

  /* Legacy aliases (match older token names) */
  --primary:       #7534b3;
  --primary-light: #8b1cfb;
  --primary-dark:  #4a1c7a;
  --primary-rgb:   117, 52, 179;

  --accent:       #9147ff;
  --accent-light: #b57bff;
  --accent-dark:  #7225e3;
  --accent-rgb:   145, 71, 255;

  /* Background legacy aliases */
  --bg-dark:    #0a0a0c;
  --bg-darker:  #0d0b12;

  /* Card system */
  --el-card-bg:     rgba(14, 11, 26, 0.62);
  --el-card-border: rgba(255, 255, 255, 0.08);
  --el-card-radius: 16px;
  --el-card-shadow: 0 2px 0 0 rgba(255,255,255,0.04) inset, 0 8px 32px -8px rgba(0,0,0,0.6);

  /* Text */
  --text-light: #f8f8f8;
  --text-dim:   rgba(255, 255, 255, 0.60);
  --text-muted: rgba(255, 255, 255, 0.40);

  /* Borders */
  --border-light:  rgba(255, 255, 255, 0.10);
  --border-medium: rgba(255, 255, 255, 0.20);
  --border-dark:   rgba(255, 255, 255, 0.05);

  /* Typography */
  --font-heading: 'Clash Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Spacing scale */
  --space-xs:  0.25rem;   /* 4px  */
  --space-sm:  0.5rem;    /* 8px  */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  /* Legacy aliases */
  --spacing-xs:  var(--space-xs);
  --spacing-sm:  var(--space-sm);
  --spacing-md:  var(--space-md);
  --spacing-lg:  var(--space-lg);
  --spacing-xl:  var(--space-xl);
  --spacing-2xl: var(--space-2xl);
  --spacing-3xl: var(--space-3xl);
  --spacing-section-top:    120px;
  --spacing-section-bottom: 60px;
  --spacing-gap-large:  50px;
  --spacing-gap-medium: 30px;
  --spacing-gap-small:  20px;
  --spacing-gap-xs:     15px;

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.10);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.10);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.10);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.15);
  --shadow-2xl: 0 25px 35px rgba(0,0,0,0.20);
  --shadow-glow: 0 0 20px rgba(var(--accent-rgb), 0.30);

  /* Glow system */
  --el-glow-soft:   0 0 0 1px rgba(255,255,255,0.05), 0 20px 50px -20px rgba(0,0,0,0.7);
  --el-glow-violet: 0 0 60px -12px rgba(145, 71, 255, 0.45);
  --el-shadow-card: 0 24px 60px -28px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---- Motion system ----
     Two curves and three durations, named by role. Never use a bare `ease`:
     it is the browser default and reads as undesigned. `standard` is for
     state changes (hover, focus, colour), `reveal` for entrances and anything
     travelling a distance. `stagger` is the delay step between sibling items. */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-reveal:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:    cubic-bezier(0.76, 0, 0.24, 1);

  --duration-fast:   0.2s;
  --duration-base:   0.35s;
  --duration-reveal: 0.7s;
  --stagger:         80ms;

  /* Composed shorthands (kept as the existing token names so nothing breaks) */
  --transition-fast:   var(--duration-fast) var(--ease-inout);
  --transition-medium: 0.4s var(--ease-reveal);
  --transition-slow:   0.8s var(--ease-reveal);
  --transition-normal: var(--duration-base) var(--ease-standard);
  --el-ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --v-ease:            cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Letter-spacing ----
     Tracking is a function of size and it flips sign: tight on display type,
     open on small uppercase labels. */
  --track-display: -0.03em;
  --track-title:   -0.02em;
  --track-body:    -0.01em;
  --track-label:    0.10em;

  /* Z-index scale */
  --z-dropdown:       1000;
  --z-sticky:         1020;
  --z-fixed:          1030;
  --z-modal-backdrop: 1040;
  --z-modal:          1050;
  --z-popover:        1060;
  --z-tooltip:        1070;
  --z-toast:          1080;

  /* Status — the only non-violet hues allowed on the site */
  --success: #10b981;
  --warning: #f59e0b;
  --error:   #ef4444;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-light), var(--accent-light));
  --gradient-accent:  linear-gradient(135deg, var(--accent), var(--accent-light));

  /* Layout */
  --el-maxw: 1240px;
}

/* ---- CSS Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---- Disable text selection on all non-interactive elements ---- */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Re-enable selection only where it makes sense */
input, textarea, select, [contenteditable],
code, pre, .doc-section code, .doc-section pre {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
/* Prevent iOS long-press callout on links/images */
a, img { -webkit-touch-callout: none; }

html {
  /* Declare the site as natively dark: without this, Android Chrome/Brave
     "auto-darken websites" runs its own filter over the page, desaturating
     and washing out the colors (the "looks fine on iOS, washed out on
     Samsung" effect). */
  color-scheme: dark;
  font-size: 16px;
  line-height: 1.6;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  /* Aurora gradient lives on html so the body can be transparent (lets shader canvas show).
     Solid background-color underneath: on Android the URL bar collapsing mid-scroll
     exposes not-yet-painted viewport — without this it renders as UA grey.
     NO background-attachment: fixed — it forces per-scroll repaints on Android
     Chrome/Brave and is the main cause of grey banding/jank while scrolling. */
  background-color: var(--el-bg);
  background-image:
    radial-gradient(900px 600px at 70% -10%, rgba(145,71,255,0.10), transparent 55%),
    linear-gradient(180deg, var(--el-bg) 0%, var(--el-bg-2) 100%);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-light);
  overflow-x: hidden;
  /* body stays transparent — an opaque background here would paint over the
     z-index:-1 shader canvas (body bg paints above negative-z children) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Base typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.8rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: var(--space-md);
  line-height: 1.7;
  color: var(--text-dim);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--text-light); }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, .button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  background: none;
  color: inherit;
}

ul, ol { list-style: none; }
li { line-height: 1.6; }

strong { font-weight: 600; color: var(--text-light); }
em { font-style: italic; color: var(--text-dim); }

code {
  font-family: var(--font-mono);
  background: rgba(0,0,0,0.3);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  color: var(--accent-light);
}

pre {
  background: rgba(0,0,0,0.4);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-lg) 0;
  border: 1px solid var(--border-light);
}
pre code { background: none; padding: 0; color: var(--text-light); }

/* ---- Sticky footer ---- */
.footer { margin-top: auto; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--el-bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ---- Selection ---- */
::selection { background: rgba(var(--accent-rgb), 0.3); color: var(--text-light); }
::-moz-selection { background: rgba(var(--accent-rgb), 0.3); color: var(--text-light); }

/* ---- Keyframe animations ---- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp   { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn   { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Scroll-reveal animation utility */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--el-ease), transform 0.7s var(--el-ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

/* Removed: the .fade-in / .fade-in-up / .fade-in-left / .fade-in-right /
   .scale-in system. It defined a hidden start state and then immediately
   force-overrode itself to `opacity:1 !important` in the block below, so it
   could never animate. Confirmed dead: zero occurrences of those classes across
   all 12 HTML pages. `.reveal` (above) is the reveal system actually in use.

   Force these visible when modern.js is absent (no JS reveal gate) */
[class*="-header"] h1,
.pricing-card-v2, .pricing-hero-header, .pricing-content,
.pcard-features, .pcard-header, .pcard-btn,
.revealed, [class*="-revealed"] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ============================================================
   Wide-gamut screens (modern Samsung + iPhone OLED): render the
   violets in Display P3 so they carry the same saturation
   everywhere instead of clamped sRGB that reads as washed out.
   Last in file so it wins the cascade over the legacy aliases.
   ============================================================ */
@media (color-gamut: p3) {
  :root {
    --el-violet:        color(display-p3 0.55 0.28 1);
    --el-violet-bright: color(display-p3 0.70 0.49 1);
    --el-violet-deep:   color(display-p3 0.41 0.16 0.85);
    --accent:           color(display-p3 0.55 0.28 1);
    --accent-light:     color(display-p3 0.70 0.49 1);
    --accent-dark:      color(display-p3 0.43 0.15 0.89);
  }
}

/* ============================================================
   DISCORD ENTRY POINTS
   The invite was previously reachable only from a footer link
   labelled "Support & Contact", which nobody reads as "join the
   Discord". These give it a persistent nav slot, a footer button
   and an explicit footer link.

   Deliberately NOT Discord blurple: this file declares one
   chromatic hue for the site, and the logomark is recognisable
   without the brand colour.
   ============================================================ */

.dc-glyph {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

/* ---- Nav slot ---- */
.navbar .nav-links li a.nav-discord {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--el-hairline-strong);
  color: var(--text-light);
}
.navbar .nav-links li a.nav-discord .dc-glyph {
  color: var(--el-violet-bright);
  transition: color 0.2s var(--el-ease);
}
.navbar .nav-links li a.nav-discord:hover {
  background: rgba(var(--el-accent-rgb), 0.16);
  border-color: rgba(var(--el-accent-rgb), 0.45);
  color: #fff;
}
.navbar .nav-links li a.nav-discord:hover .dc-glyph { color: #fff; }

/* ---- Glyph inside the homepage final-CTA button ----
   .cta-button is column-direction by design so it can carry a second
   label line. Only the Discord one goes back to a row. */
.cta-button.cta-discord {
  flex-direction: row;
  gap: 9px;
}
.cta-button.cta-discord .dc-glyph { color: var(--el-violet-bright); }

@media (max-width: 900px) {
  /* In the mobile dropdown every row is a plain list item, so drop the
     pill border and let it match its siblings. The stylesheet's mobile
     block sets these with !important, hence the matching weight. */
  .navbar .nav-links li a.nav-discord {
    border: 0 !important;
    padding: 13px 16px !important;
    gap: 10px;
  }
  .navbar .nav-links li a.nav-discord .dc-glyph { width: 18px; height: 18px; }
}

/* Keyboard focus for the Discord entry points. The rest of the site sets
   outline:none on anchors with no :focus-visible replacement, which the UI
   audit flags across ~20 elements. Fixed here only for the elements added
   with this feature. */
.navbar .nav-links li a.nav-discord:focus-visible,
.cta-button.cta-discord:focus-visible {
  outline: 2px solid var(--el-violet-bright);
  outline-offset: 3px;
}