dependencies: [
    .package(url: "https://github.com/coenttb/swift-css.git", from: "0.1.0")
]

.target(
    name: "YourTarget",
    dependencies: [
        .product(name: "CSS", package: "swift-css"),
        .product(name: "CSS Theming", package: "swift-css"),  // Optional
    ]
)

import CSS

// Chain CSS properties on any HTML element
let styled = div.css
    .backgroundColor(.rgb(255, 0, 0))
    .color(.hex("333333"))
    .padding(.px(16))
    .margin(.px(8))

// Renders to:
// <style>.background-color-0{background-color:rgb(255, 0, 0)}...</style>
// <div class="background-color-0 color-0 padding-0 margin-0"></div>

// Flexbox container
div.css.flexContainer(
    direction: .row,
    wrap: .wrap,
    justification: .spaceBetween,
    itemAlignment: .center
)

// Grid container
div.css.gridContainer(
    columns: .repeat(3, .fr(1)),
    gap: .px(16)
)

// Positioning
div.css.position(
    .absolute,
    top: .px(0),
    right: .px(0)
)

// Spacing
div.css.padding(.px(16))
div.css.margin(.px(8), .px(16))  // vertical, horizontal

// Print-specific styles
div.css.print { $0.backgroundColor(.white) }

// Hover state
button.css.hover { $0.backgroundColor(.blue) }

// Custom selector prefix
div.css.selector(".card") { $0.padding(.px(20)) }

let card = div.css
    .backgroundColor(.white)
    .borderRadius(.px(8))
    .boxShadow(.init(x: 0, y: 2, blur: 4, color: .rgba(0, 0, 0, 0.1)))
    .padding(.px(24))
    .hover { $0.boxShadow(.init(x: 0, y: 4, blur: 8, color: .rgba(0, 0, 0, 0.15))) }

import CSS

// DarkModeColor automatically switches based on user preference
let headerColor = DarkModeColor(
    light: .hex("1a1a1a"),
    dark: .hex("f5f5f5")
)

div.css.color(headerColor)

import CSS_Theming

// Set the global theme
DarkModeColor.Theme._prepare(.github)

// Access theme colors
div.css
    .backgroundColor(.background.primary)
    .color(.text.primary)
    .borderColor(.border.primary)

// Scoped theme override
DarkModeColor.Theme.withValue(.apple) {
    // Code here uses Apple theme colors
    renderHeader()
}

DarkModeColor.Theme {
    // Semantic colors
    text.primary, text.secondary, text.link
    background.primary, background.elevated, background.button
    border.primary, border.hover, border.error
    branding.primary, branding.accent

    // Base colors
    gray, blue, green, red, yellow, orange, purple, teal, cyan, pink
}

let customTheme = DarkModeColor.Theme(
    gray: .init(light: .hex("6b7280"), dark: .hex("9ca3af")),
    blue: .init(light: .hex("2563eb"), dark: .hex("3b82f6")),
    // ... other colors
    text: .init(
        primary: .init(light: .hex("111827"), dark: .hex("f9fafb")),
        secondary: .init(light: .hex("4b5563"), dark: .hex("d1d5db")),
        // ...
    ),
    background: .init(
        primary: .init(light: .hex("ffffff"), dark: .hex("111827")),
        // ...
    ),
    // ...
)

DarkModeColor.Theme._prepare(customTheme)