import SwiftUI

enum Tj {
    enum Palette {
        static let ink       = Color(red: 0.165, green: 0.153, blue: 0.137)
        static let ink2      = Color(red: 0.286, green: 0.275, blue: 0.251)
        static let inkSoft   = Color(red: 0.459, green: 0.447, blue: 0.424)
        static let sand      = Color(red: 0.976, green: 0.969, blue: 0.949)
        static let sand2     = Color(red: 0.929, green: 0.918, blue: 0.886)
        static let sand3     = Color(red: 0.878, green: 0.859, blue: 0.816)
        static let paper     = Color(red: 0.992, green: 0.988, blue: 0.973)
        static let line      = Color(red: 0.875, green: 0.863, blue: 0.831)
        static let lineSoft  = Color(red: 0.925, green: 0.918, blue: 0.890)
        static let text      = Color(red: 0.149, green: 0.137, blue: 0.118)
        static let text2     = Color(red: 0.420, green: 0.408, blue: 0.384)
        static let text3     = Color(red: 0.616, green: 0.604, blue: 0.580)
        static let brick     = Color(red: 0.886, green: 0.388, blue: 0.314)
        static let brickSoft = Color(red: 0.976, green: 0.863, blue: 0.824)
        static let amber     = Color(red: 0.871, green: 0.627, blue: 0.314)
        static let leaf      = Color(red: 0.180, green: 0.357, blue: 0.518)
        static let leafSoft  = Color(red: 0.867, green: 0.910, blue: 0.941)
        static let darkBg    = Color(red: 0.051, green: 0.063, blue: 0.059)
    }

    enum Radius {
        static let xs: CGFloat = 8
        static let sm: CGFloat = 14
        static let md: CGFloat = 20
        static let lg: CGFloat = 28
        static let xl: CGFloat = 36
        static let pill: CGFloat = 999
    }

    enum Shadow {
        static func card() -> some View {
            Color.clear
        }
    }
}

extension Font {
    static func tjTitle(_ size: CGFloat = 30) -> Font { .system(size: size, weight: .bold, design: .default) }
    static func tjH2(_ size: CGFloat = 18) -> Font { .system(size: size, weight: .bold, design: .default) }
    static func tjMono(_ size: CGFloat = 11) -> Font { .system(size: size, weight: .regular, design: .monospaced) }
    static func tjSerifBody(_ size: CGFloat = 17) -> Font { .system(size: size, weight: .regular, design: .default) }
}

extension View {
    func tjCard(bordered: Bool = false, radius: CGFloat = Tj.Radius.md) -> some View {
        self
            .background(
                RoundedRectangle(cornerRadius: radius, style: .continuous)
                    .fill(Tj.Palette.paper)
            )
            .overlay(
                RoundedRectangle(cornerRadius: radius, style: .continuous)
                    .strokeBorder(Tj.Palette.lineSoft, lineWidth: bordered ? 1 : 0)
            )
            .shadow(color: bordered ? .clear : Color(red: 0.196, green: 0.157, blue: 0.098).opacity(0.05),
                    radius: 2, x: 0, y: 1)
    }
}