/* veast-shared.css
 * Shared design tokens + universal utilities for every veast.life page.
 * Include with <link rel="stylesheet" href="/veast-shared.css"> right after the Google Fonts link.
 * Page-level CSS can override via :root.
 */

:root {
  /* Brand color palette — canonical values across all pages */
  --veast-bg:        #050709;  /* void black (index.html canonical) */
  --veast-bg-soft:   #060504;  /* slightly warmer void for cards/sections */
  --veast-surface:   #090d10;  /* elevated surface for nav backdrop */
  --veast-card:      #0c1215;  /* card background */

  --veast-text:      #f5ecd9;  /* primary text — warm parchment */
  --veast-text-2:    #e8eef2;  /* cooler secondary text (used on data-heavy pages) */
  --veast-dim:       rgba(245,236,217,0.6);
  --veast-mute:      rgba(245,236,217,0.4);

  --veast-gold:      #D4A84B;  /* primary accent — Convergence Portal gold */
  --veast-gold-dark: #b8923f;
  --veast-gold-hi:   #e0b757;
  --veast-green:     #4BD68A;
  --veast-teal:      #5eead4;
  --veast-purple:    #b8a9ff;  /* soul plane accent */

  --veast-border:    rgba(212,168,75,0.2);
  --veast-border-hi: rgba(212,168,75,0.4);
  --veast-divider:   rgba(255,255,255,0.08);

  /* Typography */
  --veast-h-font: 'Chakra Petch', sans-serif;
  --veast-b-font: 'Sora', sans-serif;

  /* Shared metrics */
  --veast-radius:    8px;
  --veast-radius-lg: 14px;
  --veast-nav-h:     64px;
}

/* ── COSMIC BACKGROUND ─────────────────────────────────────────── */
/* The canvas is injected by veast-cosmos.js if not already present. */
#cosmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── UNIVERSAL H1 GRADIENT (the Partner-page gradient, sitewide) ── */
.veast-gradient-text,
.veast-h1 {
  background: linear-gradient(135deg,
      var(--veast-gold) 0%,
      var(--veast-text) 50%,
      var(--veast-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* RTL note: gradient direction is intentionally fixed — meaning is the same in both directions. */

/* ── SHARED LAYOUT PRIMITIVES (opt-in via class) ─────────────────── */
.veast-page {
  background: var(--veast-bg);
  color: var(--veast-text);
  font-family: var(--veast-b-font);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

.veast-page h1, .veast-page h2, .veast-page h3, .veast-page h4 {
  font-family: var(--veast-h-font);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── RESPECT REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #cosmos { display: none; }
}


/* ── COSMIC AMBIENT (visible on every page, even without canvas) ─── */
body {
  background-color: var(--veast-bg);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(212,168,75,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(75,214,138,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(94,234,212,0.03) 0%, transparent 70%);
  background-attachment: fixed;
}