/* ============================================================
   WARM TECH v3.1 — TOKENS + MESH ONLY
   For properties that already have their own component CSS
   (ai.neerajshah.me, linkedin.neerajshah.me).
   Gives brand-colour + mesh sync with zero layout side-effects.
   Full system: /css/warm-tech.css
   ============================================================ */

:root{
  /* Core palette */
  --wt-sand:#FAF3E3;          /* canvas — never white */
  --wt-ink:#1A1A1A;           /* type/structure — never pure black */
  --wt-ember:#E2611E;         /* THE accent: CTAs, numbers, emphasis */
  --wt-ember-deep:#C94E12;    /* hover state */
  --wt-ember-text:#BA4F18;    /* NEW v3.1: accessible ember for small text on sand */
  --wt-deep:#1A1712;          /* dark register */
  --wt-amber:#F8C889;         /* soft highlight, stats on dark */

  /* Product badges (chips only, never CTAs) */
  --wt-mist:#E5F5F9;          /* Titan AI */
  --wt-sage:#D2ECD0;          /* Unlock LinkedIn with AI */
  --wt-rose:#F3C1C0;          /* Done-For-You */

  /* Derived */
  --wt-sand-ghost:rgba(250,243,227,.72);
  --wt-ink-soft:rgba(26,26,26,.76);
  --wt-line:rgba(26,26,26,.14);
  --wt-line-dark:rgba(250,243,227,.16);
  --wt-card-fill:rgba(255,255,255,.42);
  --wt-card-fill-dark:rgba(250,243,227,.05);

  /* Type */
  --wt-display:'Space Grotesk',sans-serif;
  --wt-body:'Inter',system-ui,sans-serif;
  --wt-mono:'JetBrains Mono',monospace;

  /* Radii + scale */
  --wt-r-card:14px; --wt-r-panel:16px; --wt-r-btn:10px; --wt-r-pill:100px;
  --wt-section-y:96px; --wt-maxw:1120px; --wt-gutter:28px;

  /* ---- ALIASES for existing builds (ai. and linkedin. naming) ---- */
  --warm-sand:var(--wt-sand);      --carbon-ink:var(--wt-ink);
  --ember:var(--wt-ember);         --ember-hover:var(--wt-ember-deep);
  --ember-text:var(--wt-ember-text); --deep-ink:var(--wt-deep);
  --amber-glow:var(--wt-amber);    --arctic:var(--wt-mist);
  --r-card:var(--wt-r-card);       --r-panel:var(--wt-r-panel); --r-btn:var(--wt-r-btn);
  --line-light:var(--wt-line);     --line-dark:var(--wt-line-dark);

  /* ---- v3.1a aliases (linkedin. naming + layout vars) ---- */
  --arctic-mist:var(--wt-mist);    --sage-leaf:var(--wt-sage);
  --rose-quartz:var(--wt-rose);    --rule-light:var(--wt-line);
  --rule-dark:var(--wt-line-dark); --gutter:var(--wt-gutter);
  --wrap:var(--wt-maxw);
}

/* ---------- MESH (opt-in via .wt-mesh classes) ---------- */
/* 3a. Static mesh — the default. Works everywhere, including email/print. */
.wt-mesh{position:relative;overflow:hidden}
.wt-mesh > *{position:relative;z-index:1}
.wt-mesh::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("../assets/mesh.svg");background-size:cover;background-position:center;opacity:.55}
.wt-mesh::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 22% 18%, rgba(226,97,30,.16) 0%, rgba(226,97,30,0) 70%)}

/* 3b. Intensity modifiers */
.wt-mesh--soft::before{opacity:.30}          /* secondary sections */
.wt-mesh--faint::before{opacity:.18}         /* long text sections */
.wt-dark.wt-mesh::before,
.wt-dark .wt-mesh::before{opacity:.42}       /* mesh reads as texture on Deep Ink */

/* 3c. Bloom position — alternate down the page so it never repeats */
.wt-mesh--right::after{background:radial-gradient(56% 50% at 78% 24%, rgba(226,97,30,.14) 0%, rgba(226,97,30,0) 70%)}
.wt-mesh--centre::after{background:radial-gradient(60% 55% at 50% 15%, rgba(226,97,30,.15) 0%, rgba(226,97,30,0) 72%)}
.wt-mesh--low::after{background:radial-gradient(60% 50% at 30% 92%, rgba(248,200,137,.14) 0%, rgba(248,200,137,0) 72%)}

/* 3d. Hero mesh — the richest treatment, dark register only.
   Layered blooms; pair with .wt-mesh-canvas for the animated version. */
.wt-mesh-hero{position:relative;overflow:hidden;background:var(--wt-deep);color:var(--wt-sand)}
.wt-mesh-hero > *{position:relative;z-index:2}
.wt-mesh-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("../assets/mesh.svg");background-size:cover;background-position:center;opacity:.42}
.wt-mesh-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 60% at 22% 12%, rgba(226,97,30,.34), transparent 70%),
    radial-gradient(46% 58% at 18% 28%, rgba(226,97,30,.26), transparent 68%),
    radial-gradient(40% 52% at 76% 18%, rgba(226,97,30,.16), transparent 70%),
    radial-gradient(60% 50% at 92% 96%, rgba(248,200,137,.14), transparent 72%),
    radial-gradient(60% 70% at 50% 108%, rgba(248,200,137,.10), transparent 72%)}

/* 3e. Animated canvas mesh (optional upgrade for heroes).
   Place <canvas class="wt-mesh-canvas"></canvas> as first child of .wt-mesh-hero. */
.wt-mesh-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.9}
@media(prefers-reduced-motion:reduce){.wt-mesh-canvas{display:none}}

/* MESH RULES
   1. Never two full-strength mesh sections back to back. Alternate
      full → none → soft, and alternate bloom position left/right.
   2. Heroes and closes: dark + mesh. Body sections: sand, soft or none.
   3. Mesh sits behind content only. Never over photography or text.
   4. Card-heavy sections get --faint or no mesh; the cards are the texture. */