/* ============================================================
   flove-base.css · shared foundation for flove apps
   ============================================================
   Lightweight alternative to the full flove.css — provides the
   reset, theme tokens, and utility classes every app needs.
   Apps that need buttons/forms/layout import the full flove.css.

   Sections:
     1. Reset & Base
     2. Theme (light/dark)
     3. Utilities
   ============================================================ */

/* ── 1. Reset & Base ── */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html {
  scroll-behavior: smooth;
  font-size: 120%;
  overscroll-behavior: none;
}

body {
  font-family: "Space Mono", ui-monospace, monospace;
  color: var(--ink);
  background: var(--bg);
  min-height: 100svh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  overflow-x: hidden;
  font-size: 16.8px;
  -webkit-overflow-scrolling: touch;
  transition: background var(--transition, .3s ease), color var(--transition, .3s ease);
}

a { color: inherit; text-decoration: none; }

/* ── 2. Theme (light/dark) ── */

:root {
  /* surface palette */
  --bg: #f3f4fb;
  --ink: #16141f;
  --muted: #4a4e5a;
  --line: #e3e5f0;
  --card: #ffffff;
  --panel: #edeef7;
  /* semantic palette */
  --accent: #6c5ce7;
  --accent-soft: #5347c4;
  --signal: #02855c;
  --warn: #b9820a;
  --danger: #dd3b3b;
  /* effects */
  --glow-a: rgba(108,92,231,.20);
  --glow-s: rgba(3,168,119,.16);
  --glass: rgba(255,255,255,.82);
  --glass-border: rgba(108,92,231,.16);
  /* layout */
  --nav-h: 56px;
  --safe-b: env(safe-area-inset-bottom,0px);
  --safe-t: env(safe-area-inset-top,0px);
  --transition: .3s ease;
}

[data-theme="dark"] {
  --bg: #0b0b0f;
  --ink: #e9eaf2;
  --muted: #a3a7b4;
  --line: #1e2133;
  --card: #11131a;
  --panel: #11131a;
  --glass: rgba(17,19,26,.85);
  --glass-border: rgba(141,137,255,.18);
  --glow-a: rgba(141,137,255,.18);
  --glow-s: rgba(3,168,119,.14);
}

[data-theme="light"] {
  --bg: #f3f4fb;
  --ink: #16141f;
  --muted: #4a4e5a;
  --line: #e3e5f0;
  --card: #ffffff;
  --panel: #edeef7;
  --glass: rgba(255,255,255,.82);
  --glass-border: rgba(108,92,231,.16);
  --glow-a: rgba(108,92,231,.20);
  --glow-s: rgba(3,168,119,.16);
}

/* ── 3. Utilities ── */

.hidden { display: none !important; }
.flex-1 { flex: 1; min-width: 0; }
.flex-col { display: flex; flex-direction: column; }
.text-muted { color: var(--muted); }

/* ── 4. Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
