/* Monoframe — base element styles & a few utilities.
   Kept minimal: resets, document defaults, selection, and the canvas backdrop. */

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

body {
  background: var(--bg-canvas);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Lucide icons render at 1.5 stroke across the system */
[data-lucide] { stroke-width: 1.5; }

/* Tabular, lining figures for all monospace data */
.mf-mono, [class*="mono"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* The signature canvas: light radial wash + faint dot grid.
   Apply to a full-bleed app shell. */
.mf-canvas {
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, #EDEEF1 0%, var(--bg-canvas) 46%, #E3E4E8 100%);
  position: relative;
}
.mf-dotgrid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#C9CCD3 1px, transparent 1.4px);
  background-size: 30px 30px;
  opacity: .6;
  pointer-events: none;
}

@keyframes mf-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.82)} }
@keyframes mf-skeleton { 0%{opacity:.5} 50%{opacity:.9} 100%{opacity:.5} }