/* ============================================================
   easyLOOP v2 — Premium redesign tokens
   Apple elegance × Google AI innovation
   Rhythm: 60% light · 20% dark · 20% orange
   ============================================================ */

:root {
  /* ---------- Light theme (default) ---------- */
  --bg:           #fbfaf7;          /* pearl off-white */
  --bg-pure:      #ffffff;
  --bg-tint:      #f3f1ec;          /* slightly warmer */
  --ink:          #0a0a0c;          /* near black */
  --ink-2:        rgba(10,10,12,0.68);
  --ink-3:        rgba(10,10,12,0.44);
  --ink-4:        rgba(10,10,12,0.24);
  --line:         rgba(10,10,12,0.10);
  --line-strong:  rgba(10,10,12,0.22);

  /* ---------- Orange accent ---------- */
  --accent:       #e56909;
  --accent-hi:    #ff7e1e;
  --accent-lo:    #b34c00;
  --accent-soft:  rgba(229,105,9,0.08);
  --accent-glow:  rgba(229,105,9,0.35);
  --on-accent:    #ffffff;

  /* ---------- Dark surfaces (used in dark sections only) ---------- */
  --dark-bg:      #0a0a0c;
  --dark-ink:     #ffffff;
  --dark-ink-2:   rgba(255,255,255,0.72);
  --dark-ink-3:   rgba(255,255,255,0.44);
  --dark-line:    rgba(255,255,255,0.10);

  /* ---------- Mesh palette (Google-AI vibe) ---------- */
  --mesh-orange:  #ffb27a;
  --mesh-pink:    #ffc9d6;
  --mesh-violet:  #d4c4ff;
  --mesh-blue:    #bfe1ff;
  --mesh-mint:    #c8f0d4;
  --mesh-peach:   #ffd9b0;

  /* ---------- Type families ---------- */
  --f-display:    "Geist", "Inter Tight", system-ui, sans-serif;
  --f-serif:      "Instrument Serif", "Cormorant", "Times New Roman", serif;
  --f-text:       "Geist", system-ui, sans-serif;
  --f-mono:       "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ---------- Type scale ---------- */
  --t-display-xl:  clamp(72px, 14vw, 280px);
  --t-display:     clamp(56px, 8.4vw, 168px);
  --t-h1:          clamp(48px, 6.8vw, 124px);
  --t-h2:          clamp(38px, 4.8vw, 88px);
  --t-h3:          clamp(28px, 2.8vw, 48px);
  --t-h4:          clamp(20px, 1.5vw, 26px);
  --t-lead:        clamp(17px, 1.2vw, 22px);
  --t-body:        clamp(15px, 1vw, 17px);
  --t-small:       13px;
  --t-eyebrow:     11px;

  /* ---------- Spacing ---------- */
  --gutter:        clamp(22px, 3vw, 56px);
  --section-pad:   clamp(96px, 11vw, 200px);
  --container:     1480px;
  --container-tight: 1200px;

  /* ---------- Radii (used sparingly) ---------- */
  --r-sm: 6px;
  --r-md: 14px;
  --r-pill: 999px;

  /* ---------- Motion (Apple-like easings) ---------- */
  --ease-apple:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:      0.4s;
  --dur-med:       0.7s;
  --dur-slow:      1.1s;
}

/* ---------- Dark section context ---------- */
.theme-dark {
  --bg: var(--dark-bg);
  --bg-pure: #050507;
  --bg-tint: #14141a;
  --ink: var(--dark-ink);
  --ink-2: var(--dark-ink-2);
  --ink-3: var(--dark-ink-3);
  --line: var(--dark-line);
  --line-strong: rgba(255,255,255,0.22);
  color: var(--ink);
  background: var(--bg);
}

/* ---------- Accent (orange-filled) section context ---------- */
.theme-accent {
  --bg: var(--accent);
  --bg-pure: var(--accent);
  --bg-tint: var(--accent-lo);
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,0.85);
  --ink-3: rgba(255,255,255,0.66);
  --line: rgba(255,255,255,0.22);
  --line-strong: rgba(255,255,255,0.42);
  color: var(--ink);
  background: var(--bg);
}