/* Stride — Companion design system tokens (Direction D).
   Light is default; [data-theme="dark"] flips semantics.
   Fonts: Bricolage Grotesque (display) · Hanken Grotesk (body) · JetBrains Mono (numbers). */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Honey ramp (primary) ── */
  --honey-50:#FDF3E5; --honey-100:#FAE4C3; --honey-200:#F5CF93; --honey-300:#EFB960;
  --honey-400:#E59A2E; --honey-500:#C7831F; --honey-600:#A36815; --honey-700:#7E4E0F;
  --honey-800:#5A370A; --honey-900:#3A2305;
  /* ── Olive ramp (secondary) ── */
  --olive-50:#F0F2EA; --olive-100:#DEE4CB; --olive-200:#C0CB9F; --olive-300:#98A876;
  --olive-400:#748557; --olive-500:#5A6635; --olive-600:#475129; --olive-700:#383F20;
  --olive-800:#2A2F17; --olive-900:#1A1D0E;
  /* ── Cream ramp (bg) ── */
  --cream-50:#FFFEFA; --cream-75:#FBF8F2; --cream-100:#F3EADA; --cream-200:#E8DAB8; --cream-300:#D9C695;
  /* ── Bark ramp (text / dark) ── */
  --bark-100:#5C5346; --bark-200:#4A4138; --bark-300:#3A332B; --bark-400:#2A2014; --bark-500:#1F1810;
  /* ── Coral (peak) ── */
  --coral-50:#FCEDE8; --coral-200:#F4C0B0; --coral-400:#E87B5C; --coral-600:#B6593C; --coral-800:#783823;
  /* ── Mint (recovery / success) ── */
  --mint-50:#EAF5EF; --mint-200:#C8E6D4; --mint-400:#6CB28C; --mint-600:#3F855D; --mint-800:#1F4F33;
  /* ── Cool grey (chrome) ── */
  --grey-50:#F7F7F5; --grey-100:#E8E8E3; --grey-200:#D0D0C8; --grey-300:#A8A89E;
  --grey-400:#7B7B71; --grey-500:#5C5C53; --grey-700:#2A2A23;

  /* ── Semantic — light ── */
  --bg-primary:var(--cream-75);
  --bg-surface:var(--cream-50);
  --bg-elevated:#FFFFFF;
  --text-primary:var(--bark-400);
  --text-secondary:var(--bark-200);
  --text-tertiary:var(--grey-400);
  --brand-primary:var(--honey-400);
  --brand-primary-press:var(--honey-500);
  --brand-secondary:var(--olive-500);
  --energy-peak:var(--coral-400);
  --energy-calm:var(--olive-400);
  --energy-low:var(--grey-400);
  --success:var(--mint-400);
  --warning:var(--honey-400);
  --error:var(--coral-600);
  --border-subtle:var(--cream-200);
  --border-strong:var(--honey-100);
  --on-brand:var(--cream-50);
  --ring-track:var(--cream-200);
  --grid-line:var(--cream-200);
  --tabbar-bg:var(--cream-75);
  --scrim:rgba(42,32,20,.42);

  /* ── 10 user event colors (bg tint / mid accent / dark text) — light ── */
  --ev-honey-bg:#FAE4C3;    --ev-honey-mid:#E59A2E;    --ev-honey-tx:#7E4E0F;
  --ev-olive-bg:#DEE4CB;    --ev-olive-mid:#5A6635;    --ev-olive-tx:#2A2F17;
  --ev-sage-bg:#D0E3D6;     --ev-sage-mid:#6CA286;     --ev-sage-tx:#2F5D3F;
  --ev-sky-bg:#CCE0EE;      --ev-sky-mid:#4A87B6;      --ev-sky-tx:#1F3F5C;
  --ev-lavender-bg:#DDD4E8; --ev-lavender-mid:#7B5FA5; --ev-lavender-tx:#3D2D5C;
  --ev-rose-bg:#F2D2D5;     --ev-rose-mid:#C76B7A;     --ev-rose-tx:#6B2D38;
  --ev-clay-bg:#F4D2C0;     --ev-clay-mid:#C97851;     --ev-clay-tx:#6B3722;
  --ev-plum-bg:#E1C9D5;     --ev-plum-mid:#9A5577;     --ev-plum-tx:#4D2538;
  --ev-teal-bg:#C5DEDC;     --ev-teal-mid:#4A8985;     --ev-teal-tx:#1F4744;
  --ev-stone-bg:#DBD9D2;    --ev-stone-mid:#7A766B;    --ev-stone-tx:#3B392F;

  /* ── Type ── */
  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* ── Radius ── */
  --r-4:4px; --r-8:8px; --r-12:12px; --r-16:16px; --r-24:24px; --r-32:32px; --r-full:9999px;
  /* ── Motion ── */
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-inout:cubic-bezier(.65,.05,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

[data-theme="dark"] {
  --bg-primary:var(--bark-500);
  --bg-surface:var(--bark-400);
  --bg-elevated:var(--bark-300);
  --text-primary:var(--cream-100);
  --text-secondary:var(--cream-200);
  --text-tertiary:var(--grey-300);
  --brand-primary:var(--honey-300);
  --brand-primary-press:var(--honey-400);
  --brand-secondary:var(--olive-300);
  --energy-peak:var(--coral-200);
  --energy-calm:var(--olive-300);
  --energy-low:var(--grey-300);
  --success:var(--mint-200);
  --warning:var(--honey-300);
  --error:var(--coral-400);
  --border-subtle:var(--bark-200);
  --border-strong:var(--honey-700);
  --on-brand:var(--bark-500);
  --ring-track:var(--bark-300);
  --grid-line:var(--bark-300);
  --tabbar-bg:rgba(31,24,16,.82);
  --scrim:rgba(0,0,0,.6);

  /* event colors flip: deep tinted bg + saturated mid border + light text */
  --ev-honey-bg:#4A370F;    --ev-honey-mid:#EFB960;    --ev-honey-tx:#FAE4C3;
  --ev-olive-bg:#2C3318;    --ev-olive-mid:#98A876;    --ev-olive-tx:#DEE4CB;
  --ev-sage-bg:#234032;     --ev-sage-mid:#8FC2A6;     --ev-sage-tx:#D0E3D6;
  --ev-sky-bg:#1B3346;      --ev-sky-mid:#6FA8D2;      --ev-sky-tx:#CCE0EE;
  --ev-lavender-bg:#332642; --ev-lavender-mid:#A487C9; --ev-lavender-tx:#DDD4E8;
  --ev-rose-bg:#43222A;     --ev-rose-mid:#DD8E9A;     --ev-rose-tx:#F2D2D5;
  --ev-clay-bg:#43261A;     --ev-clay-mid:#DE9270;     --ev-clay-tx:#F4D2C0;
  --ev-plum-bg:#3A2230;     --ev-plum-mid:#BC7A9A;     --ev-plum-tx:#E1C9D5;
  --ev-teal-bg:#1B3835;     --ev-teal-mid:#6FB0AB;     --ev-teal-tx:#C5DEDC;
  --ev-stone-bg:#34322B;    --ev-stone-mid:#9C988C;    --ev-stone-tx:#DBD9D2;
}

* { box-sizing:border-box; }
.s-app { font-family:var(--font-body); color:var(--text-primary); }
.s-app ::-webkit-scrollbar { width:0; height:0; }
.s-display { font-family:var(--font-display); letter-spacing:-.02em; }
.s-mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
button { font-family:inherit; cursor:pointer; }

/* ── Bottom sheet (mount-on-open). Base state = VISIBLE; entrance is additive. ── */
.s-sheet-wrap { position:absolute; inset:0; z-index:200; }
.s-sheet-scrim { position:absolute; inset:0; background:var(--scrim); opacity:1; }
.s-sheet-panel { position:absolute; left:0; right:0; bottom:0; background:var(--bg-surface);
  border-radius:var(--r-24) var(--r-24) 0 0; padding:10px 22px calc(22px + env(safe-area-inset-bottom));
  overflow-y:auto; box-shadow:0 -8px 40px rgba(0,0,0,.2); transform:translateY(0); }
.s-sheet-handle { width:36px; height:4px; border-radius:2px; background:var(--grey-200); margin:4px auto 14px; }
@media (prefers-reduced-motion: no-preference) {
  .s-sheet-scrim { animation:sheetFade .25s var(--e-out) both; }
  .s-sheet-panel { animation:sheetUp .38s var(--spring) both; }
}
@keyframes sheetFade { from { opacity:0 } to { opacity:1 } }
@keyframes sheetUp { from { transform:translateY(110%) } to { transform:translateY(0) } }

/* live "running" pulse dot — base is just a solid dot; ring animates only when motion allowed */
.s-livedot-ring { opacity:0; }
@media (prefers-reduced-motion: no-preference) {
  .s-livedot-ring { animation:livePulse 1.8s var(--e-out) infinite; }
}
@keyframes livePulse { 0%{ transform:scale(1); opacity:.5 } 70%,100%{ transform:scale(2.6); opacity:0 } }