/**
 * Sparkles Showcase — page-specific CSS
 * Loaded only on Showcase pages via sparkles_showcase_assets.xml
 * Extracted from orphaned design-system files + main bundle cleanup
 */

/* ========== PATTERN BACKGROUND ========== */
.sparkles-pattern-background {
    background-image: var(--sparkles-css-pattern-showcase);
}

/* ========== FONT SIZE PREFERENCE SYSTEM ========== */
[data-font-size="small"] {
    font-size: 0.875rem;
}

[data-font-size="small"] h1 { font-size: 1.5rem; }
[data-font-size="small"] h2 { font-size: 1.25rem; }
[data-font-size="small"] h3 { font-size: 1.125rem; }

[data-font-size="large"] {
    font-size: 1.125rem;
}

[data-font-size="large"] h1 { font-size: 2.25rem; }
[data-font-size="large"] h2 { font-size: 2rem; }
[data-font-size="large"] h3 { font-size: 1.75rem; }

/* ========== LAYOUT ========== */
/* Scoping is file-level: this CSS only loads on Showcase pages via layout XML */
aside {
    transition: width 0.3s ease-in-out;
}

.showcase-flex-wrap {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ========== BADGE ========== */
.sparkles-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--sparkles-badge-padding, 0.25rem 0.75rem);
    border-radius: 9999px;
    font-size: var(--sparkles-badge-size, 0.875rem);
    font-weight: var(--font-medium);
    background-color: var(--gray-100);
    color: var(--gray-800);
}

/* ========== TOGGLE SLIDER ========== */
.sparkles-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--gray-300);
    border-radius: 9999px;
    transition: all 200ms;
}

.sparkles-toggle-slider::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    border-radius: 9999px;
    transition: transform 200ms;
}

input:checked + .sparkles-toggle-slider {
    background-color: var(--color-primary);
}

input:checked + .sparkles-toggle-slider::before {
    transform: translateX(1.25rem);
}