/* Noe — spacing, geometry, elevation tokens ════════════════════════════════════════════════════════════════════ Noe's radius scale tops out at 10px (cards) — nothing is pill-rounded except true pills. Shadows are barely-there: a 1px hairline drop on the resting card, a soft lift on hover. The whole system is flat-with-edges, not floaty. Button + chip geometry is fully tokenised so every variant stays locked to one footprint. ──────────────────────────────────────────────────────────────────── */ :root { /* ── Radii ──────────────────────────────────────────────────────── */ --radius-sm: 5px; /* buttons, chips, small controls */ --radius: 7px; /* inputs, rows, textareas */ --radius-lg: 10px; /* section blocks, modals */ --radius-card: 10px; /* board cards */ --radius-pill: 5px; /* chips (Noe pills are soft rectangles, not capsules) */ --radius-col: 14px; /* column trays */ --radius-ctl: 8px; /* misc controls */ /* ── Spacing scale (4px base) ───────────────────────────────────── */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-9: 18px; --space-10: 22px; --space-12: 28px; /* ── Elevation ──────────────────────────────────────────────────── */ --shadow-card: 0 1px 0 rgba(0,0,0,.02); /* resting card */ --shadow-hover: 0 1px 0 rgba(0,0,0,.02), 0 4px 14px -8px rgba(40,30,15,.12); /* hover lift */ --shadow-overlay: -18px 0 40px -28px rgba(40,30,15,.22); /* chat panel slide-in */ --shadow-sheet: 0 1px 1px rgba(16,18,23,.04), 0 12px 28px -8px rgba(16,18,23,.18), 0 32px 80px -12px rgba(16,18,23,.22); /* modal */ --shadow-drop: 0 8px 24px rgba(0,0,0,.08); /* popover / dropdown */ /* ── Layout ─────────────────────────────────────────────────────── */ --sidebar-w: 200px; --claude-w: 376px; /* chat panel width */ --content-max: 880px; /* task detail reading column */ /* ── Button design tokens ───────────────────────────────────────── */ --btn-h: 32px; --btn-h-sm: 26px; --btn-radius: var(--radius-sm); --btn-pad-x: 14px; --btn-pad-x-sm: 10px; --btn-font-size: 12px; --btn-font-size-sm:11px; --btn-font-weight: 500; --btn-icon-size: 32px; /* ── Chip design tokens ─────────────────────────────────────────── */ /* Geometry matches the ⌘K shortcut chip — the single reference pill shape for the whole UI: 2px 5px padding, 5px radius, 10.5px / weight 500. */ --chip-font-size: 10.5px; --chip-font-size-sm: 10px; --chip-font-weight: 500; --chip-line-height: 1; --chip-pad-x: 5px; --chip-pad-y: 2px; --chip-radius: var(--radius-pill); --chip-max-width: 160px; --chip-border-width: 1px; /* ── Layout-rhythm tokens (re-tuned by .density-* classes) ──────── */ --pad-card: 11px 12px 10px; --gap-card: 7px; --gap-col: 14px; --pad-col: 12px; --row-h: 26px; /* ── Motion ─────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(.18,.78,.28,1); /* @kind other */ --dur-fast: .12s; /* @kind other */ --dur-med: .2s; /* @kind other */ --dur-slow: .28s; /* @kind other */ } /* Density variants — opt-in on or any ancestor. */ .density-compact { --pad-card: 10px 11px 9px; --gap-card: 6px; --gap-col: 12px; --pad-col: 10px 11px 11px; --row-h: 24px; } .density-cozy { --pad-card: 14px 14px 12px; --gap-card: 9px; --gap-col: 16px; --pad-col: 14px; --row-h: 28px; } * { box-sizing: border-box; }