/* VRGB Theme Builder - Layout Only */
/* All components use Haberdash primitives */

/* Unstyled mode - strip all theming */
#preview[data-unstyled="true"] {
    --background: #fff !important;
    --surface: #fff !important;
    --text: #000 !important;
    --text-heading: #000 !important;
    --border: #ddd !important;
    --primary: #007bff !important;
    --radius-sm: 0px !important;
    --radius-md: 0px !important;
    --radius-lg: 0px !important;
    --shadow-sm: none !important;
    --shadow-md: none !important;
    --shadow-lg: none !important;
}

#preview[data-unstyled="true"] * {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Layout - Two-column flex with header */
body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Main content wrapper - holds controls and preview side by side */
.main-content {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Left sidebar - controls */
.controls {
    width: 480px;
    min-width: 480px;
    max-width: 480px;
    padding: var(--space-2xl, 2rem);
    background: var(--surface, #ffffff);
    border-right: 1px solid var(--border-light, #e5e5e5);
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/* Right panel - preview */
.preview {
    flex: 1;
    padding: var(--space-2xl, 2rem);
    overflow-y: auto;
    height: 100vh;
    background: var(--background, #fafafa);
}

/* Ensure cards have proper spacing */
.card {
    transition: box-shadow var(--transition-base, 200ms ease);
}

/* Make sliders more prominent */
.slider__input {
    cursor: pointer;
}

/* Global preset buttons */
#global-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 0.5rem);
}

/* Smooth scrolling */
.controls,
.preview {
    scroll-behavior: smooth;
}