MLBApp/mlbTVOS/Views/Components/DesignSystem.swift

import SwiftUI

// MARK: - The Dugout Design System — Warm Light Theme

enum DS {
    // MARK: - Colors

    enum Colors {
        static let background = Color(red: 0.96, green: 0.95, blue: 0.94)
        static let panelFill = Color.white
        static let panelStroke = Color.black.opacity(0.06)

        static let live = Color(red: 0.92, green: 0.18, blue: 0.18)
        static let positive = Color(red: 0.15, green: 0.68, blue: 0.32)
        static let warning = Color(red: 0.92, green: 0.50, blue: 0.10)
        static let interactive = Color(red: 0.95, green: 0.45, blue: 0.15) // warm orange
        static let media = Color(red: 0.50, green: 0.30, blue: 0.80)

        static let textPrimary = Color(red: 0.12, green: 0.12, blue: 0.14)
        static let textSecondary = Color(red: 0.12, green: 0.12, blue: 0.14).opacity(0.6)
        static let textTertiary = Color(red: 0.12, green: 0.12, blue: 0.14).opacity(0.4)
        static let textQuaternary = Color(red: 0.12, green: 0.12, blue: 0.14).opacity(0.2)

        // For use on dark/image backgrounds (hero, overlays)
        static let onDarkPrimary = Color.white
        static let onDarkSecondary = Color.white.opacity(0.7)
        static let onDarkTertiary = Color.white.opacity(0.45)
    }

    // MARK: - Shadows

    enum Shadows {
        static let card = Color.black.opacity(0.06)
        static let cardRadius: CGFloat = 16
        static let cardY: CGFloat = 4
        static let cardLifted = Color.black.opacity(0.12)
        static let cardLiftedRadius: CGFloat = 24
        static let cardLiftedY: CGFloat = 8
    }

    // MARK: - Typography

    enum Fonts {
        static let heroScore = Font.system(size: 72, weight: .black, design: .rounded).monospacedDigit()
        static let largeScore = Font.system(size: 42, weight: .black, design: .rounded).monospacedDigit()
        static let score = Font.system(size: 28, weight: .black, design: .rounded).monospacedDigit()
        static let scoreCompact = Font.system(size: 22, weight: .bold, design: .rounded).monospacedDigit()

        static let sectionTitle = Font.system(size: 28, weight: .bold, design: .rounded)
        static let cardTitle = Font.system(size: 20, weight: .bold, design: .rounded)
        static let cardTitleCompact = Font.system(size: 17, weight: .bold, design: .rounded)

        static let dataValue = Font.system(size: 18, weight: .bold, design: .rounded).monospacedDigit()
        static let dataValueCompact = Font.system(size: 15, weight: .semibold, design: .rounded).monospacedDigit()
        static let body = Font.system(size: 15, weight: .medium)
        static let bodySmall = Font.system(size: 13, weight: .medium)
        static let caption = Font.system(size: 11, weight: .bold, design: .rounded)

        // tvOS scaled variants — 22px minimum for readability at 10ft
        #if os(tvOS)
        static let tvHeroScore = Font.system(size: 96, weight: .black, design: .rounded).monospacedDigit()
        static let tvSectionTitle = Font.system(size: 38, weight: .bold, design: .rounded)
        static let tvCardTitle = Font.system(size: 28, weight: .bold, design: .rounded)
        static let tvScore = Font.system(size: 36, weight: .black, design: .rounded).monospacedDigit()
        static let tvDataValue = Font.system(size: 24, weight: .bold, design: .rounded).monospacedDigit()
        static let tvBody = Font.system(size: 24, weight: .medium)
        static let tvCaption = Font.system(size: 22, weight: .bold, design: .rounded)
        #endif
    }

    // MARK: - Spacing

    enum Spacing {
        #if os(tvOS)
        static let panelPadCompact: CGFloat = 18
        static let panelPadStandard: CGFloat = 24
        static let panelPadFeatured: CGFloat = 32
        static let sectionGap: CGFloat = 40
        static let cardGap: CGFloat = 20
        static let itemGap: CGFloat = 12
        static let edgeInset: CGFloat = 50
        #else
        static let panelPadCompact: CGFloat = 12
        static let panelPadStandard: CGFloat = 16
        static let panelPadFeatured: CGFloat = 24
        static let sectionGap: CGFloat = 28
        static let cardGap: CGFloat = 14
        static let itemGap: CGFloat = 8
        static let edgeInset: CGFloat = 20
        #endif
    }

    // MARK: - Radii

    enum Radii {
        static let compact: CGFloat = 14
        static let standard: CGFloat = 18
        static let featured: CGFloat = 22
    }
}

// MARK: - Data Label Style

struct DataLabelStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            #if os(tvOS)
            .font(DS.Fonts.tvCaption)
            .kerning(1.0)
            #else
            .font(DS.Fonts.caption)
            .kerning(1.5)
            #endif
            .foregroundStyle(DS.Colors.textTertiary)
            .textCase(.uppercase)
    }
}

extension View {
    func dataLabelStyle() -> some View {
        modifier(DataLabelStyle())
    }
}