/* ============================================================
   WispherFlow — 2026 Redesign Tokens
   Wisprflow structure × Gemini visual signature

   SCOPE: Activate by adding class="r2026" to a wrapper.
   Nothing on this page changes until that class is applied.
   ============================================================ */

/* Fonts loaded globally (additive — does not affect existing UI).
   Geist Sans = ownable, AI-tool default (Vercel's open-source font).
   Instrument Serif italic = single-word headline accent.
   Using Google Fonts CDN (allowlisted in server CSP). */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

.r2026 {
  /* ── Palette: Wisprflow chrome ─────────────────────────────── */
  --r-canvas:       #FAF7F0;   /* warm cream — page background */
  --r-canvas-soft:  #F0EBDA;   /* cream variant for inset cards */
  --r-canvas-deep:  #ECE6D2;   /* deeper cream for section breaks */
  --r-ink:          #0E1116;   /* near-black for all text */
  --r-ink-soft:     #2A2D34;   /* secondary text */
  --r-ink-muted:    #6B6E76;   /* tertiary text, captions */
  --r-brand:        #0F4C3A;   /* deep emerald — wisprflow-adjacent */
  --r-brand-soft:   #1A6B53;   /* hover/light variant */
  --r-brand-deep:   #082A20;   /* footer / dark sections */

  /* ── Palette: Gemini gradient (AI-active accent ONLY) ───────
     Use only when the AI is doing something: waveform fill,
     answer-card border on "thinking", live-status pulse,
     gradient bloom behind hero demo. NEVER as page chrome. */
  --r-grad-1: #4D65FF;   /* electric blue */
  --r-grad-2: #A855F7;   /* purple */
  --r-grad-3: #EC4899;   /* pink */
  --r-grad-4: #FFA946;   /* amber */
  --r-gradient-ai: linear-gradient(
    100deg,
    var(--r-grad-1) 0%,
    var(--r-grad-2) 35%,
    var(--r-grad-3) 65%,
    var(--r-grad-4) 100%
  );
  --r-gradient-ai-conic: conic-gradient(
    from 180deg at 50% 50%,
    var(--r-grad-1),
    var(--r-grad-2),
    var(--r-grad-3),
    var(--r-grad-4),
    var(--r-grad-1)
  );

  /* ── Section-level theme tokens (flippable per section) ─────
     Each section can override these to "switch chapters". */
  --r-section-bg:   var(--r-canvas);
  --r-section-ink:  var(--r-ink);
  --r-section-muted: var(--r-ink-muted);
  --r-section-brand: var(--r-brand);

  /* ── Typography ────────────────────────────────────────────── */
  --r-font-sans:   'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --r-font-serif:  'Instrument Serif', Georgia, serif;
  --r-font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  /* Fluid display scale (clamp from mobile to 4K) */
  --r-fs-display:  clamp(2.5rem, 7vw + 0.5rem, 7.5rem);
  --r-fs-h1:       clamp(2rem, 5vw + 0.5rem, 5.5rem);
  --r-fs-h2:       clamp(1.5rem, 3vw + 0.5rem, 3.25rem);
  --r-fs-h3:       clamp(1.25rem, 2vw + 0.3rem, 2rem);
  --r-fs-lead:     clamp(1.05rem, 1.4vw + 0.2rem, 1.375rem);
  --r-fs-body:     clamp(0.95rem, 0.6vw + 0.6rem, 1.0625rem);
  --r-fs-small:    clamp(0.8125rem, 0.4vw + 0.6rem, 0.9375rem);
  --r-fs-tiny:     clamp(0.75rem, 0.3vw + 0.6rem, 0.8125rem);

  /* Type rhythm */
  --r-lh-display: 1.02;
  --r-lh-heading: 1.08;
  --r-lh-body:    1.55;
  --r-tracking-display: -0.035em;
  --r-tracking-heading: -0.025em;
  --r-tracking-body:    -0.011em;

  /* ── Spacing scale ─────────────────────────────────────────── */
  --r-space-1: 0.25rem;
  --r-space-2: 0.5rem;
  --r-space-3: 0.75rem;
  --r-space-4: 1rem;
  --r-space-6: 1.5rem;
  --r-space-8: 2rem;
  --r-space-12: 3rem;
  --r-space-16: 4rem;
  --r-space-24: 6rem;
  --r-space-32: 8rem;
  --r-section-pad-y: clamp(4rem, 8vw, 10rem);
  --r-section-pad-x: clamp(1.25rem, 5vw, 6rem);
  --r-content-max: 1280px;
  --r-narrow-max:   820px;

  /* ── Radii ─────────────────────────────────────────────────── */
  --r-radius-sm: 8px;
  --r-radius-md: 14px;
  --r-radius-lg: 22px;
  --r-radius-xl: 32px;
  --r-radius-pill: 9999px;

  /* ── Shadows (soft, no hard borders) ──────────────────────── */
  --r-shadow-xs: 0 1px 2px rgba(14, 17, 22, 0.04);
  --r-shadow-sm: 0 2px 8px rgba(14, 17, 22, 0.05), 0 0 0 1px rgba(14, 17, 22, 0.03);
  --r-shadow-md: 0 8px 24px rgba(14, 17, 22, 0.06), 0 0 0 1px rgba(14, 17, 22, 0.02);
  --r-shadow-lg: 0 18px 48px rgba(14, 17, 22, 0.08), 0 2px 6px rgba(14, 17, 22, 0.04);
  --r-shadow-brand-glow: 0 0 32px rgba(15, 76, 58, 0.18);

  /* ── Easings (Emil Kowalski + Lenis-aligned) ──────────────── */
  --r-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --r-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --r-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --r-ease-press:  cubic-bezier(0.2, 0.6, 0.35, 1);
}

/* ── Section theme variants (apply on .r2026 section wrappers) ── */
.r2026 .r-section--dark {
  --r-section-bg: var(--r-brand-deep);
  --r-section-ink: var(--r-canvas);
  --r-section-muted: rgba(250, 247, 240, 0.65);
  --r-section-brand: var(--r-grad-4);
}
.r2026 .r-section--brand {
  --r-section-bg: var(--r-brand);
  --r-section-ink: var(--r-canvas);
  --r-section-muted: rgba(250, 247, 240, 0.75);
  --r-section-brand: var(--r-canvas);
}
.r2026 .r-section--ink {
  --r-section-bg: var(--r-ink);
  --r-section-ink: var(--r-canvas);
  --r-section-muted: rgba(250, 247, 240, 0.6);
  --r-section-brand: var(--r-grad-1);
}

/* ── Utility: AI gradient text fill (for "thinking" states) ── */
.r2026 .r-grad-text {
  background: var(--r-gradient-ai);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  background-size: 200% 100%;
}

/* ── Utility: respect reduced motion globally inside r2026 ──── */
@media (prefers-reduced-motion: reduce) {
  .r2026 *,
  .r2026 *::before,
  .r2026 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}