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

/* ---- Font imports ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---- 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 */
  --el-violet:       #9147ff;
  --el-violet-bright: #b57bff;
  --el-violet-deep:  #6d28d9;
  --el-electric:     #38bdf8;
  --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;

  --color-violet:        #9147ff;
  --color-violet-bright: #b57bff;

  /* Background legacy aliases */
  --bg-dark:    #0a0a0c;
  --bg-darker:  #0d0b12;
  --bg-light:   #1a1a1a;
  --bg-lighter: #2a2a2a;

  /* 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);

  /* Transitions */
  --transition-fast:   0.2s cubic-bezier(0.76, 0, 0.24, 1);
  --transition-medium: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:   0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s ease;
  --el-ease:           cubic-bezier(0.16, 1, 0.3, 1);

  /* 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 */
  --success: #10b981;
  --warning: #f59e0b;
  --error:   #ef4444;
  --info:    #3b82f6;

  /* Secondary accent */
  --secondary:       #0ea5e9;
  --secondary-light: #06b6d4;
  --secondary-dark:  #0369a1;

  /* Gradients */
  --gradient-primary:       linear-gradient(135deg, var(--primary), var(--primary-light), var(--accent-light));
  --gradient-primary-hover: linear-gradient(135deg, var(--primary-light), var(--accent), 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; }

/* JS animation classes — all start hidden, .visible makes them appear */
.fade-in, .fade-in-up, .fade-in-left, .fade-in-right, .scale-in {
  opacity: 0;
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}
.fade-in       { transform: translateY(30px); }
.fade-in-up    { transform: translateY(50px); }
.fade-in-left  { transform: translateX(-30px); }
.fade-in-right { transform: translateX(30px); }
.scale-in      { transform: scale(0.8); }

.fade-in.visible,
.fade-in-up.visible,
.fade-in-left.visible,
.fade-in-right.visible,
.scale-in.visible { opacity: 1; transform: none; }

/* Force these visible when modern.js is absent (no JS reveal gate) */
.fade-in, .fade-in-up, .fade-in-left, .fade-in-right, .scale-in,
[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);
    --color-violet:        color(display-p3 0.55 0.28 1);
    --color-violet-bright: color(display-p3 0.70 0.49 1);
  }
}