/*
 * ZynoSuite v2 — Spacing, radii, elevation, density & layout tokens
 *
 * 4px grid. Hairline-led elevation: shadows are barely-there; structure comes
 * from 1px lines, not drop shadows. Control heights are compact (30px default)
 * to keep data surfaces dense.
 */

:root {
    /* ── Spacing (4-grid) ─────────────────────────────────────────── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;

    /* ── Radii ────────────────────────────────────────────────────── */
    --r-1: 4px;
    --r-2: 6px; /* DEFAULT control radius */
    --r-3: 8px; /* panes */
    --r-4: 10px;
    --r-pill: 999px;

    /* ── Elevation (hairline-led, almost no shadows) ──────────────── */
    --el-1: 0 1px 0 rgba(17, 17, 15, 0.04);
    --el-2: 0 1px 2px rgba(17, 17, 15, 0.06), 0 1px 0 rgba(17, 17, 15, 0.04);
    --el-3: 0 4px 12px rgba(17, 17, 15, 0.06), 0 1px 0 rgba(17, 17, 15, 0.04);
    --el-4: 0 12px 40px -8px rgba(17, 17, 15, 0.18), 0 0 0 1px rgba(17, 17, 15, 0.06);
    --el-pop: 0 12px 40px -8px rgba(17, 17, 15, 0.18), 0 0 0 1px rgba(17, 17, 15, 0.06);

    /* ── Density / control sizing ─────────────────────────────────── */
    --row-h: 32px; /* table row height */
    --ctrl-h: 30px; /* DEFAULT control height */
    --ctrl-h-sm: 24px;
    --ctrl-h-lg: 36px;
    --zs-topbar-h: 44px; /* canvas breadcrumb bar */

    /* ── Layout ───────────────────────────────────────────────────── */
    --content-max-w: 1400px; /* tables / lists cap on big monitors */
    --content-max-w-narrow: 960px; /* conversation / reader content */
    --sidebar-w: 220px;
}