Add shared CardMetrics system for reusable card styles

Centralise all card sizing tokens (corner radii, insets, spacing, shadows,
avatars) into a single CardMetrics enum, inspired by Plozz's shared-metrics
approach. Key changes:

- New CardMetrics.swift: single source of truth for all card layout constants
- Concentric radius pattern: outer = inner + cardInset (even glass border)
- More generous spacing: cardSpacing 20→24, railVerticalPadding 20→24
- Grid cards: radii bumped 16→26 outer, 12→14 inner (more aggressive)
- All existing card views (StreamChannelCard, CategoryCardView, MediaContentCard,
  ChannelPageView, HomeView) now derive from CardMetrics
- ChannelRailLayout and AppLayout delegate to CardMetrics
- Grid content shapes in Browse/Search/Following use shared metrics
- Focus shadow parameters (radius, offset, opacity) centralised

Author: thatcube

.impeccable/hook.cache.json

@@ -0,0 +1 @@
+{"version":1,"sessions":{}}

Twozz/Shared/CardMetrics.swift

@@ -0,0 +1,110 @@
+import CoreGraphics
+
+/// Centralised card sizing tokens. Every card surface in the app derives its
+/// corner radii, internal padding, and spacing from here so changes propagate
+/// everywhere at once and the visual system stays coherent.
+///
+/// Inspired by Plozz's shared-metrics approach: a single source of truth that
+/// any card view can reference, with the concentric-radius pattern (outer glass
+/// radius = inner media radius + card inset) guaranteeing an even-width border
+/// at every size.
+enum CardMetrics {
+
+  // MARK: - Card Inset (glass edge → content artwork)
+
+  /// The visual gap between the outer glass surface and the inner content/media.
+  /// Corner radii are concentric: outerRadius = innerRadius + cardInset, so the
+  /// glass border renders at a constant width around the artwork.
+  static let cardInset: CGFloat = 12
+
+  // MARK: - Corner Radii (inner media radii; outer derived concentrically)
+
+  /// Standard media/artwork corner radius used for rail cards, category art,
+  /// content cards, and most surfaces.
+  static let mediaCornerRadius: CGFloat = 18
+
+  /// Tighter media corner radius for compact grid cards.
+  static let gridMediaCornerRadius: CGFloat = 14
+
+  /// Outer card corner radius: concentric with the standard media radius.
+  static var cardCornerRadius: CGFloat { mediaCornerRadius + cardInset } // 30
+
+  /// Outer card corner radius for compact grid cards.
+  static var gridCardCornerRadius: CGFloat { gridMediaCornerRadius + cardInset } // 26
+
+  /// Outer corner radius for hero/featured surfaces (slightly smaller than a
+  /// full card, matching the larger single-item presentation).
+  static let heroCornerRadius: CGFloat = 28
+
+  // MARK: - Focus Insets (breathing room for scale-up + internal padding)
+
+  /// Horizontal/vertical inset between the glass edge and content for standard
+  /// cards. Doubles as the focus breathing room for the scale-up animation.
+  static let focusInset: CGFloat = 18
+
+  /// Internal content padding for compact grid cards.
+  static let gridContentInset: CGFloat = 14
+
+  /// Internal padding for category (box-art) cards.
+  static let categoryInset: CGFloat = 10
+
+  // MARK: - Spacing Between Cards
+
+  /// Base horizontal gap between cards in rails and grids. Subtly tightens
+  /// at higher card counts via ``spacingScale(forVisibleCardCount:)``.
+  static let cardSpacing: CGFloat = 24
+
+  /// Vertical padding above/below a card rail row.
+  static let railVerticalPadding: CGFloat = 24
+
+  /// Gap between the media thumbnail and the text/metadata below it.
+  static let captionSpacing: CGFloat = 10
+
+  /// Gap between text lines within a card's caption area (e.g. title → game).
+  static let captionLineSpacing: CGFloat = 4
+
+  /// Gap between the avatar and the text block in cards with a profile image.
+  static let avatarTextSpacing: CGFloat = 10
+
+  /// Vertical gap between full rail sections on the Home tab.
+  static let sectionSpacing: CGFloat = 72
+
+  // MARK: - Screen Layout
+
+  /// Horizontal page gutter (matches ``AppLayout.horizontalPadding``).
+  static let screenPadding: CGFloat = 24
+
+  // MARK: - Focus & Animation
+
+  /// Uniform scale applied to a focused card.
+  static let focusedScale: CGFloat = 1.07
+
+  /// Focus shadow opacity for dark/OLED themes.
+  static let focusShadowOpacity: CGFloat = 0.36
+
+  /// Focus shadow opacity for light theme.
+  static let focusShadowOpacityLight: CGFloat = 0.12
+
+  /// Focus shadow blur radius.
+  static let focusShadowRadius: CGFloat = 20
+
+  /// Focus shadow vertical offset.
+  static let focusShadowY: CGFloat = 10
+
+  // MARK: - Avatars
+
+  /// Channel avatar diameter in rail cards.
+  static let railAvatarSize: CGFloat = 62
+
+  /// Channel avatar diameter in grid cards.
+  static let gridAvatarSize: CGFloat = 68
+
+  // MARK: - Adaptive Spacing
+
+  /// Subtly tightens the gap between cards as more fit across the screen.
+  /// Full base spacing at 2-across, easing to ~68 % at 6-across.
+  static func spacingScale(forVisibleCardCount count: Int) -> CGFloat {
+    let clamped = CGFloat(min(max(count, 2), 6))
+    return 1.0 - (clamped - 2) * 0.08
+  }
+}

Twozz/Shared/CategoryCardView.swift

@@ -13,12 +13,12 @@ struct CategoryCardView: View {
 
   /// Match the stream cards: aggressive outer glass rounding with the inner box
   /// art rounded to the same radius the stream card media uses.
-  private let outerCornerRadius: CGFloat = 30
-  private let artCornerRadius: CGFloat = 18
+  private var outerCornerRadius: CGFloat { CardMetrics.cardCornerRadius }
+  private var artCornerRadius: CGFloat { CardMetrics.mediaCornerRadius }
   private let artRatio: CGFloat = 285.0 / 380.0
 
   var body: some View {
-    VStack(alignment: .leading, spacing: 10) {
+    VStack(alignment: .leading, spacing: CardMetrics.captionSpacing) {
       CachedAsyncImage(url: category.boxArtURL) { img in
         img.resizable().scaledToFill()
       } placeholder: {
@@ -27,7 +27,7 @@ struct CategoryCardView: View {
       .modifier(ArtSizing(width: width, artRatio: artRatio))
       .clipShape(RoundedRectangle(cornerRadius: artCornerRadius, style: .continuous))
 
-      VStack(alignment: .leading, spacing: 4) {
+      VStack(alignment: .leading, spacing: CardMetrics.captionLineSpacing) {
         Text(category.name)
           .font(.subheadline.weight(.semibold))
           .foregroundStyle(usesLiftFocusedText ? palette.liftPrimaryText : Color.primary)
@@ -46,10 +46,10 @@ struct CategoryCardView: View {
             .hidden()
         }
       }
-      .padding(.horizontal, 10)
-      .padding(.bottom, 12)
+      .padding(.horizontal, CardMetrics.categoryInset)
+      .padding(.bottom, CardMetrics.cardInset)
     }
-    .padding(10)
+    .padding(CardMetrics.categoryInset)
     .modifier(CardSizing(width: width))
     .twozzLiquidGlassCard(
       cornerRadius: outerCornerRadius,
@@ -71,7 +71,7 @@ struct CategoryCardView: View {
 
   /// The corner radius callers should use for the focus/hit-test content shape so
   /// it matches the card's outer rounding.
-  static let contentShapeCornerRadius: CGFloat = 30
+  static var contentShapeCornerRadius: CGFloat { CardMetrics.cardCornerRadius }
 
   private var usesLiftFocusedText: Bool {
     twozzUsesLiftFocusedText(isFocused: isFocused, glassDisabled: glassDisabled)

Twozz/Shared/ChannelRailMetrics.swift

@@ -22,21 +22,20 @@ enum ChannelRailLayout {
   /// rail scrolls.
   static let peekCardFraction: CGFloat = 0.08
   /// Breathing room reserved on each side of a card for its focus halo/scale.
-  static let focusHorizontalInset: CGFloat = 18
+  static var focusHorizontalInset: CGFloat { CardMetrics.focusInset }
   static let minMediaWidth: CGFloat = 220
   static let maxMediaWidth: CGFloat = 900
 
   /// Base gap between cards before the size-aware scale is applied. Shared by
   /// the Browse grid so rails and grids tighten in lockstep.
-  static let baseCardSpacing: CGFloat = 20
+  static var baseCardSpacing: CGFloat { CardMetrics.cardSpacing }
 
   /// Subtly tightens the gap between cards as they get smaller (more cards
   /// across). Smaller cards don't need as wide a gutter, and reclaiming that
   /// space lets each card render a touch larger in the same width. Full base
   /// spacing at 2-across, easing down to ~68% at 6-across.
   static func spacingScale(forVisibleCardCount count: Int) -> CGFloat {
-    let clamped = CGFloat(min(max(count, 2), 6))
-    return 1.0 - (clamped - 2) * 0.08
+    CardMetrics.spacingScale(forVisibleCardCount: count)
   }
 
   /// Solve the per-card width so `visibleCardCount` full cards (plus a peek of

Twozz/Shared/Theme.swift

@@ -6,12 +6,12 @@ import SwiftUI
 /// There should be no per-page horizontal padding overrides — use these.
 enum AppLayout {
   /// The single horizontal page gutter shared by every top-level view.
-  static let horizontalPadding: CGFloat = 24
+  static var horizontalPadding: CGFloat { CardMetrics.screenPadding }
 
   /// The single focus/hover zoom applied to every interactive content card
   /// (channels, categories, search results, etc.) so the scale is consistent
   /// everywhere instead of varying per surface.
-  static let focusedCardScale: CGFloat = 1.07
+  static var focusedCardScale: CGFloat { CardMetrics.focusedScale }
 
   /// Shared focus/hover animation used by interactive cards.
   static var focusScaleAnimation: Animation? {

Twozz/Views/BrowseView.swift

@@ -189,7 +189,7 @@ struct CategoryStreamsView: View {
                   onWatch: { selectedChannel = $0 },
                   onGoToChannel: { channelPageTarget = ChannelPageTarget(channel: $0) }
                 )
-                .contentShape(RoundedRectangle(cornerRadius: 16))
+                .contentShape(RoundedRectangle(cornerRadius: CardMetrics.gridCardCornerRadius))
                 .focusable(true)
                 .focused($focusedStreamID, equals: channel.id)
                 .focusEffectDisabled()

Twozz/Views/ChannelPageView.swift

@@ -39,12 +39,11 @@ struct ChannelPageView: View {
   private let avatarSize: CGFloat = 96
   private let tileWidth: CGFloat = 360
   private var tileMediaHeight: CGFloat { tileWidth * 9 / 16 }
-  // Match the rail-card metrics used across the rest of the app (HomeView).
-  private let focusHInset: CGFloat = 18
-  private let focusVInset: CGFloat = 18
-  private let cardCorner: CGFloat = 30
-  private let mediaCorner: CGFloat = 18
-  private let heroCorner: CGFloat = 28
+  private var focusHInset: CGFloat { CardMetrics.focusInset }
+  private var focusVInset: CGFloat { CardMetrics.focusInset }
+  private var cardCorner: CGFloat { CardMetrics.cardCornerRadius }
+  private var mediaCorner: CGFloat { CardMetrics.mediaCornerRadius }
+  private var heroCorner: CGFloat { CardMetrics.heroCornerRadius }
   /// Full-bleed banner height. The hero identity card overlaps its bottom edge by
   /// half, and a mirrored, blurred reflection fills the rest of the page below it.
   private let bannerHeight: CGFloat = 380

Twozz/Views/FollowingDirectoryView.swift

@@ -105,7 +105,7 @@ struct FollowingDirectoryView: View {
                 onWatch: { selectedChannel = $0 },
                 onGoToChannel: { channelPageTarget = ChannelPageTarget(channel: $0) }
               )
-              .contentShape(RoundedRectangle(cornerRadius: 16))
+              .contentShape(RoundedRectangle(cornerRadius: CardMetrics.gridCardCornerRadius))
               .focusable(true)
               .focused($focusedID, equals: channel.id)
               .focusEffectDisabled()

Twozz/Views/HomeView.swift

@@ -3,12 +3,11 @@ import SwiftUI
 struct HomeView: View {
   let deepLinkRouter: DeepLinkRouter
 
-  private let channelRailVerticalPadding: CGFloat = 20
-  private let focusVerticalInset: CGFloat = 18
-  /// Mirror of the shared rail inset so the card-render sites keep one name.
-  private var focusHorizontalInset: CGFloat { ChannelRailLayout.focusHorizontalInset }
-  private let cardCornerRadius: CGFloat = 30
-  private let mediaCornerRadius: CGFloat = 18
+  private var channelRailVerticalPadding: CGFloat { CardMetrics.railVerticalPadding }
+  private var focusVerticalInset: CGFloat { CardMetrics.focusInset }
+  private var focusHorizontalInset: CGFloat { CardMetrics.focusInset }
+  private var cardCornerRadius: CGFloat { CardMetrics.cardCornerRadius }
+  private var mediaCornerRadius: CGFloat { CardMetrics.mediaCornerRadius }
   private let autoRefreshStaleInterval: TimeInterval = 5 * 60
 
   @State private var selectedSidebarTab: SidebarTab = .home

Twozz/Views/MediaContentCard.swift

@@ -15,19 +15,19 @@ struct MediaContentCard: View {
 
   var mediaWidth: CGFloat
   var mediaHeight: CGFloat
-  var focusHorizontalInset: CGFloat = 18
-  var focusVerticalInset: CGFloat = 18
-  var cardCornerRadius: CGFloat = 22
-  var mediaCornerRadius: CGFloat = 18
+  var focusHorizontalInset: CGFloat = CardMetrics.focusInset
+  var focusVerticalInset: CGFloat = CardMetrics.focusInset
+  var cardCornerRadius: CGFloat = CardMetrics.cardCornerRadius
+  var mediaCornerRadius: CGFloat = CardMetrics.mediaCornerRadius
 
   @Environment(\.themePalette) private var palette
   @Environment(\.glassDisabled) private var glassDisabled
 
   var body: some View {
-    VStack(alignment: .leading, spacing: 8) {
+    VStack(alignment: .leading, spacing: CardMetrics.captionSpacing) {
       media
 
-      VStack(alignment: .leading, spacing: 4) {
+      VStack(alignment: .leading, spacing: CardMetrics.captionLineSpacing) {
         Text(title)
           .font(.subheadline.weight(.semibold))
           .foregroundStyle(usesLiftFocusedText ? palette.liftPrimaryText : Color.primary)
@@ -51,7 +51,11 @@ struct MediaContentCard: View {
       isFocused: isFocused,
       palette: palette
     )
-    .shadow(color: Color.black.opacity(isFocused ? 0.36 : 0), radius: 20, y: 10)
+    .shadow(
+      color: Color.black.opacity(isFocused ? CardMetrics.focusShadowOpacity : 0),
+      radius: CardMetrics.focusShadowRadius,
+      y: CardMetrics.focusShadowY
+    )
     .accessibilityElement(children: .ignore)
     .accessibilityLabel(accessibilityLabel)
   }