/**
 * Starter Blocks Integration
 *
 * Maps diy3d theme design tokens to Starter Blocks variables
 * for consistent dark theme styling across all blocks.
 *
 * @package DIY3D
 */

:root {
    /* ============================================
       Override Starter Blocks colors with diy3d theme
       ============================================ */

    /* Primary Brand Color - Use diy3d orange */
    --starter-color-primary-50: var(--color-primary-50);
    --starter-color-primary-100: var(--color-primary-100);
    --starter-color-primary-200: var(--color-primary-200);
    --starter-color-primary-300: var(--color-primary-300);
    --starter-color-primary-400: var(--color-primary-400);
    --starter-color-primary-500: var(--color-primary-500);
    --starter-color-primary-600: var(--color-primary-600);
    --starter-color-primary-700: var(--color-primary-700);
    --starter-color-primary-800: var(--color-primary-800);
    --starter-color-primary-900: var(--color-primary-900);

    /* Force dark mode - match diy3d dark theme */
    --starter-color-neutral-50: var(--color-neutral-950);
    --starter-color-neutral-100: var(--color-neutral-900);
    --starter-color-neutral-200: var(--color-neutral-800);
    --starter-color-neutral-300: var(--color-neutral-700);
    --starter-color-neutral-400: var(--color-neutral-500);
    --starter-color-neutral-500: var(--color-neutral-400);
    --starter-color-neutral-600: var(--color-neutral-300);
    --starter-color-neutral-700: var(--color-neutral-200);
    --starter-color-neutral-800: var(--color-neutral-100);
    --starter-color-neutral-900: var(--color-neutral-50);
    --starter-color-neutral-950: #ffffff;

    /* Background & Surface - Dark theme */
    --starter-color-background: var(--surface-ground);
    --starter-color-surface: var(--surface-card);
    --starter-color-surface-elevated: var(--surface-overlay);

    /* Text Colors - Dark theme */
    --starter-color-text-primary: var(--text-primary);
    --starter-color-text-secondary: var(--text-secondary);
    --starter-color-text-muted: var(--text-muted);
    --starter-color-text-inverse: var(--text-inverse);

    /* Border Colors - Dark theme */
    --starter-color-border: var(--surface-border);
    --starter-color-border-light: var(--color-neutral-800);
    --starter-color-border-dark: var(--color-neutral-600);

    /* Semantic Colors - Use diy3d values */
    --starter-color-success: var(--color-success);
    --starter-color-warning: var(--color-warning);
    --starter-color-error: var(--color-error);
    --starter-color-info: var(--color-info);

    /* ============================================
       Typography - Use diy3d fonts
       ============================================ */

    --starter-font-sans: var(--font-body);
    --starter-font-display: var(--font-display);
    --starter-font-mono: var(--font-mono);

    /* ============================================
       Spacing - Use diy3d spacing scale
       ============================================ */

    --starter-space-1: var(--space-1);
    --starter-space-2: var(--space-2);
    --starter-space-3: var(--space-3);
    --starter-space-4: var(--space-4);
    --starter-space-5: var(--space-5);
    --starter-space-6: var(--space-6);
    --starter-space-8: var(--space-8);
    --starter-space-10: var(--space-10);
    --starter-space-12: var(--space-12);
    --starter-space-16: var(--space-16);
    --starter-space-20: var(--space-20);
    --starter-space-24: var(--space-24);
    --starter-space-32: var(--space-32);

    /* ============================================
       Layout
       ============================================ */

    --starter-container-xl: var(--container-xl);
    --starter-content-width: var(--container-xl);
}

/* ============================================
   Block-specific overrides for diy3d style
   ============================================ */

/* Hero block - Match diy3d hero style */
.starter-hero {
    background-color: var(--surface-ground);
}

.starter-hero__title {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
}

/* CTA block */
.starter-cta {
    border-color: var(--surface-border);
}

/* Feature cards */
.starter-feature-item {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
}

.starter-feature-item:hover {
    background-color: var(--surface-hover);
    border-color: var(--color-primary-500);
}

/* FAQ accordion */
.starter-faq-item__question {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
}

.starter-faq-item__question:hover {
    background-color: var(--surface-hover);
}

/* Testimonials */
.starter-testimonial-item {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
}

/* Stats */
.starter-stat-item {
    color: var(--text-primary);
}

.starter-stat-item__number {
    color: var(--color-primary-500);
    font-family: var(--font-display);
}

/* Contact */
.starter-contact__item {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
}

.starter-contact__item:hover {
    background-color: var(--surface-hover);
}

/* Newsletter */
.starter-newsletter {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
}

.starter-newsletter__input {
    background-color: var(--surface-ground);
    border-color: var(--surface-border);
    color: var(--text-primary);
}

.starter-newsletter__input::placeholder {
    color: var(--text-muted);
}

/* Team */
.starter-team-member {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
}

/* Pricing */
.starter-pricing-plan {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
}

.starter-pricing-plan--featured {
    border-color: var(--color-primary-500);
}

/* Gallery lightbox */
.starter-gallery__lightbox {
    background-color: rgba(0, 0, 0, 0.95);
}

/* Product grid (WooCommerce) */
.starter-product-grid__item {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
}

.starter-product-grid__item:hover {
    border-color: var(--color-primary-500);
}

/* Category grid (WooCommerce) */
.starter-category-grid__item {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
}

/* Logo grid */
.starter-logos__item img {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

.starter-logos__item:hover img {
    filter: none;
    opacity: 1;
}

/* Video player */
.starter-video__overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.starter-video__play-button {
    background-color: var(--color-primary-500);
}

.starter-video__play-button:hover {
    background-color: var(--color-primary-600);
}