Document with 10,000 DOM nodes
Stylesheet with 5,000 selectors
= 50,000,000 selector matches to evaluate

┌─────────────────────────────────────────────────────────────┐
│                    CSS Stylesheet                            │
│  .button { ... }                                            │
│  .card .title { ... }                                       │
│  #header nav a:hover { ... }                                │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼ (compile once at parse time)
┌─────────────────────────────────────────────────────────────┐
│              Compiled Selector Index                         │
│  - Hash maps by class, id, tag                              │
│  - Pre-computed specificity                                  │
│  - Optimized matching order                                  │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼ (O(1) lookup per node)
┌─────────────────────────────────────────────────────────────┐
│                    DOM Node                                  │
│  - Direct property lookup                                    │
│  - No selector iteration                                     │
└─────────────────────────────────────────────────────────────┘

use azul::system::SystemStyle;

// Automatically detects:
// - OS (Windows, macOS, Linux)
// - OS version (Windows 11 22H2, macOS Sonoma, etc.)
// - Desktop environment (GNOME, KDE, etc.)
// - Theme (light/dark)
// - Accessibility settings (reduced motion, high contrast)
let style = SystemStyle::detect();

println!("Platform: {:?}", style.platform);
println!("Theme: {:?}", style.theme);
println!("OS Version: {:?}", style.os_version);
println!("Reduced Motion: {:?}", style.prefers_reduced_motion);
println!("High Contrast: {:?}", style.prefers_high_contrast);

/* Target specific platforms */
@supports (os: windows) {
    button {
        font-family: "Segoe UI", sans-serif;
    }
}

@supports (os: macos) {
    button {
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }
}

@supports (os: linux) {
    button {
        font-family: "Cantarell", "Noto Sans", sans-serif;
    }
}

/* Windows 11 specific styles */
@supports (os-version: >= windows-11) {
    .card {
        border-radius: 8px;
    }
}

/* Fallback for older Windows */
@supports (os-version: < windows-11) {
    .card {
        border-radius: 0;
    }
}

/* Automatic light/dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background: #1e1e1e;
        color: #e0e0e0;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background: #ffffff;
        color: #333333;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: more) {
    .button {
        border: 2px solid currentColor;
    }
}

/* GNOME-specific styles */
@supports (desktop-env: gnome) {
    .headerbar {
        background: linear-gradient(to bottom, #f6f5f4, #edebe9);
    }
}

/* KDE-specific styles */
@supports (desktop-env: kde) {
    .headerbar {
        background: #eff0f1;
    }
}

/* Named colors */
color: red;
color: transparent;

/* Hexadecimal */
color: #ff0000;        /* RGB */
color: #f00;           /* Short RGB */
color: #ff0000ff;      /* RGBA */
color: #f00f;          /* Short RGBA */

/* Functional notation */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

/* Linear gradients */
background: linear-gradient(to right, #ff0000, #0000ff);
background: linear-gradient(45deg, red, blue);
background: linear-gradient(to bottom, #fff 0%, #eee 100%);

/* Radial gradients */
background: radial-gradient(circle, #fff, #000);
background: radial-gradient(ellipse at center, red, blue);

.card {
    background: white;
    padding: 16px;
    
    /* Nested rules */
    .title {
        font-size: 18px;
        font-weight: bold;
    }
    
    .content {
        color: #666;
    }
    
    /* Pseudo-classes - no & prefix needed */
    :hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    /* Media queries */
    @media (prefers-color-scheme: dark) {
        background: #333;
        color: white;
    }
}

/* Use system colors in CSS */
.button {
    background: system:accent;
    color: system:accent-text;
}

.card {
    background: system:window-background;
    color: system:text;
}

::selection {
    background: system:selection-background;
    color: system:selection-text;
}

let style = SystemStyle::detect();
let accent = style.colors.accent; // System accent color
let selection = style.colors.selection_background;

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

// Good: semantic elements
Dom::create_button("Submit")
Dom::create_p("Hello")

// Avoid: create_text (use create_p, create_span, etc.)
Dom::create_text("Hello")  // Bad: no semantic meaning
Dom::create_div().with_class("button")  // Bad: div soup

/* Modern, flexible layout */
.container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

~/.config/azul/styles/todo-app.css

/* Override button styling */
button {
    background: linear-gradient(to bottom, #667eea, #764ba2);
    border-radius: 20px;
    color: white;
}

/* Custom accent color */
.accent {
    background: system:accent;
}

/* Dark theme override */
body {
    background: #1a1a2e;
    color: #eaeaea;
}

AZUL_DISABLE_RICING=1 ./my-app

# Enable riced desktop detection (skips GNOME/KDE detection)
AZUL_SMOKE_AND_MIRRORS=1 ./my-app