:root {
    --ph-color-bg: #f8fafc;
    --ph-color-surface: #ffffff;
    --ph-color-text: #172033;
    --ph-color-muted: #64748b;
    --ph-color-border: #dbe3ef;
    --ph-color-primary: #0891b2;
    --ph-color-primary-dark: #0e7490;
    --ph-radius-sm: 8px;
    --ph-radius-md: 12px;
    --ph-radius-lg: 18px;
    --ph-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.1);
    --ph-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
    --ph-content-sm: 900px;
    --ph-content-lg: 1200px;
}

.ph-ui {
    min-width: 0;
    background: var(--ph-color-bg);
    color: var(--ph-color-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

.ph-ui *,
.ph-ui *::before,
.ph-ui *::after {
    box-sizing: border-box;
}

.ph-ui :where(button, input, select, textarea) {
    font: inherit;
}

.ph-ui :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(8, 145, 178, 0.38);
    outline-offset: 3px;
}

.ph-ui :where(img, svg, video, canvas) {
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .ph-ui *,
    .ph-ui *::before,
    .ph-ui *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}