feat(design): rewrite layout.tsx CSS for 2026

feat(design): rewrite layout.tsx CSS for 2026

User feedback: the interior pages were "horrible" — stuck on a 2020
GitHub vibe while the landing page already had a Linear/Cursor-tier
overhaul. The handoff brief documented this: "ui.tsx and components.tsx
kept on legacy class names that resolve to the new palette
automatically" — but a palette swap alone wasn't enough; the component
styles needed to actually USE the modern tokens.

This commit rewrites the entire CSS payload in src/views/layout.tsx
to bring every page (auth, dashboard, repo browser, issues, PRs,
commits, diffs, settings, file table, blob view, profile, etc.) up to
the same level as the landing-page hero. No JSX or class-name changes
— all existing pages benefit automatically.

Tokens (extended, all backwards-compatible):
- Warm-dark base: #07070b → #181822 (deeper, less GitHub-blue)
- Hairline borders: rgba(255,255,255,0.07) baseline,
  0.12 strong, 0.55 focus
- Violet-cyan gradient kept (#a855f7 → #06b6d4) but USED:
  primary buttons, gradient text, soft-faint backgrounds, focus rings
- Spring + smooth easings (cubic-bezier(0.16, 1, 0.3, 1) and the
  spring variant) wired to every transition
- Type scale: --t-xs .. --t-3xl (11–56 px)
- Spacing scale: --s-1 .. --s-20 (4–80 px)
- Elevation scale: --elev-1 .. --elev-3 + --elev-glow + --ring
- Body now has subtle radial backdrop, antialiased fonts,
  -0.005em letter-spacing for Inter

Component overhaul (same class names, new looks):
- Header: sticky, backdrop-blur(14px), 56px tall, gradient logo
  square, hairline border. Nav search inline.
- Buttons:
  * default: hairline border, hover lifts to surface bg,
    active scales to 0.98, focus-visible ring
  * primary: violet→cyan gradient with inset-highlight + drop-glow
    + outer 1px ring; brightness:1.08 on hover
  * danger: muted-red border + subtle red-tint bg on hover
  * ghost variant added (transparent → hover bg)
  * sizes: btn-sm (compact), btn-lg (hero CTAs)
- Forms: bigger inputs, focus rings using --ring, hover state on
  border. Textareas use mono font for code-like inputs.
- Auth: card-centered 420px, full padding, elev-2 shadow, gradient
  primary CTA, refined error/success/banner alerts.
- Repo nav: tabs with active gradient underline accent, hover
  background highlight, horizontal scroll on overflow.
- Cards: hover lifts -1px with elev-2 shadow, hairline → strong
  border, more interior padding. Card meta rows pull a top
  hairline border.
- Stat cards: distinct .stat-card / .stat-label / .stat-value with
  uppercase muted labels and 28px tnum stats.
- Issue / PR / commit lists: bigger row hit-targets, hover
  background, better state-icon affordance, gradient-faint backing
  for AI badges.
- File table: hover row background, mono file icons with --text-
  faint, bigger row padding.
- Blob view: line numbers anchored against hairline divider; hover
  highlights the line; line numbers right-aligned with 56px gutter.
- Diff view: green/red/blue tints aligned to new accents (less
  GitHub primary blue, more violet-cyan).
- Branch dropdown: stronger elevation, gradient-faint active state.
- User profile: card-style with gradient-soft avatar circle.
- New repo form: visibility cards lift on hover, accent ring + faint
  backing on selection.
- Toggle switch: gradient when on, smoother spring motion.
- Empty state: dashed hairline border, larger padding, mono code
  block kept on bg-secondary.

Polish:
- Selection: --accent rgba 0.35 highlight
- Custom scrollbars (10px, surface bg, hover strong-border)
- Reduced-motion media query honoured
- Mobile breakpoint: card grid → 1 col, header padding tightened,
  nav search hidden, repo header smaller

Light theme: extended tokens propagated (elev levels redefined for
light); accent shifts to #7c3aed for higher contrast on white.

Tests: 1226 pass / 1 pre-existing fail (crontech-deploy "Bearer"
expectation, unrelated to CSS — see brief BLK-016: HMAC replaced
Bearer auth, test name not yet updated).

https://claude.ai/code/session_0163vJChUuZqqtBBznUW6xBU