/* ── Platine — base.css ─────────────────────────────────────
   Shared variables, reset, and utility classes
   Used by: landing, live, auth
────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@400;500;600;700;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #ffffff;
  --bg2:    #f7f7f5;
  --bg3:    #f0f0ed;
  --bd:     #e2e2de;
  --bd2:    #d0d0cb;
  --tx:     #111110;
  --tx2:    #4a4a47;
  --tx3:    #8a8a85;
  --ac:     #16a34a;
  --ac2:    #15803d;
  --ac3:    #dcfce7;
  --ac4:    #bbf7d0;
  --ok:     #16a34a;
  --ok-bg:  #f0fdf4;
  --ok-bd:  #bbf7d0;
  --wn:     #b45309;
  --wn-bg:  #fffbeb;
  --wn-bd:  #fde68a;
  --er:     #b91c1c;
  --er-bg:  #fef2f2;
  --er-bd:  #fecaca;
  --mono:   'DM Mono', monospace;
  --serif:  'Instrument Serif', serif;
  --sans:   'DM Sans', sans-serif;
  --sh:     0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --sh2:    0 8px 24px rgba(0,0,0,.09);
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--tx); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ── Shared logo ── */
.logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 900; font-size: 14px;
  letter-spacing: -.4px; color: var(--tx);
}
.logo-mark {
  width: 26px; height: 26px; background: var(--tx);
  border-radius: 5px; display: grid; place-items: center;
  flex-shrink: 0;
}
.logo-mark svg { width: 14px; height: 14px; }