/* ═════════════════════════════════════════════════════════════════════
   Yotta — Design Tokens (single source of truth)
   Loaded on every page BEFORE the page's own styles so hand-authored
   sections can reference one canonical palette, type scale, spacing,
   container width, eyebrow + button language.

   Pages still keep their local token names (--ys-*, --yx-*, --va, etc.)
   for backwards-compat, but those now alias these globals so values stay
   in sync site-wide. New/standardized sections should use --y-* directly.
   ═════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --y-cyan:          #67E8F9;   /* primary accent (dark pages) */
  --y-cyan-bright:   #8ef0ff;   /* hover / highlight */
  --y-cyan-soft:     #9be9f7;   /* italic emphasis */
  --y-violet:        #8B5CF6;   /* secondary accent (canonical) */
  --y-violet-light:  #a78bfa;   /* gradient partner / lighter violet */

  /* ── Dark-surface neutral scale (home, experiences, ai, intelligence …) ── */
  --y-bg:     #06040A;
  --y-ink:    #ffffff;
  --y-muted:  rgba(255, 255, 255, 0.56);
  --y-faint:  rgba(255, 255, 255, 0.34);
  --y-line:   rgba(255, 255, 255, 0.10);
  --y-line-soft: rgba(255, 255, 255, 0.06);
  --y-surface:   rgba(255, 255, 255, 0.025);

  /* ── Light-surface neutral scale (about, platforms) ── */
  --y-ink-dark:   #0a0a0f;
  --y-muted-dark: rgba(10, 10, 15, 0.52);
  --y-faint-dark: rgba(10, 10, 15, 0.30);
  --y-line-dark:  rgba(10, 10, 15, 0.09);

  /* ── Layout ── */
  --y-container:  1200px;                       /* canonical reading width */
  --y-pad:        clamp(22px, 6vw, 120px);      /* horizontal page gutter */
  --y-section-py: clamp(72px, 12vh, 168px);     /* vertical section rhythm */
  --y-radius-card: 18px;
  --y-radius-pill: 100px;

  /* ── Type scale (clamp = readable everywhere, no dvw collapse) ── */
  --y-h1:    clamp(2.4rem, 6vw, 5.4rem);
  --y-h2:    clamp(1.9rem, 4.6vw, 3.6rem);
  --y-h3:    clamp(1.3rem, 2vw, 1.85rem);
  --y-lede:  clamp(1.05rem, 1.5vw, 1.3rem);
  --y-body:  clamp(0.95rem, 1.1vw, 1.05rem);
  --y-eyebrow-size:     12px;
  --y-eyebrow-tracking: 0.24em;

  /* ── Buttons ── */
  --y-btn-pad: 16px 34px;
}

/* ─── Optional shared section utilities ───
   Hand-authored sections may opt into these for a consistent container +
   rhythm. Purely additive; nothing breaks if a page never uses them. */
.y-wrap {
  width: 100%;
  max-width: var(--y-container);
  margin-inline: auto;
  padding-inline: var(--y-pad);
}
.y-section { padding-block: var(--y-section-py); }
.y-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--y-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--y-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--y-cyan);
}
.y-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}