/* ========================================
   tblock_toolkit Layout System
   Shared CSS Variables and Utilities
   ======================================== */

:root {
    /* ========================================
       Spacing Scale (Token System)
       ======================================== */
    --bblockx-space-none: 0;
    --bblockx-space-xs: 8px;
    --bblockx-space-s: 16px;
    --bblockx-space-m: 24px;
    --bblockx-space-l: 32px;
    --bblockx-space-xl: 48px;
    --bblockx-space-2xl: 64px;
    
    /* ========================================
       Breakpoints
       ======================================== */
    --bblockx-breakpoint-mobile: 767px;
    --bblockx-breakpoint-tablet: 1024px;
    --bblockx-breakpoint-desktop: 1025px;
    
    /* ========================================
       Layout Max Widths
       ======================================== */
    --bblockx-max-width-narrow: 720px;
    --bblockx-max-width-default: 1024px;
    --bblockx-max-width-wide: 1200px;
    --bblockx-max-width-full: 1440px;
    
    /* ========================================
       Colors - Backgrounds
       ======================================== */
    --bblockx-bg-transparent: transparent;
    --bblockx-bg-light: #f8fafc;
    --bblockx-bg-dark: #1e293b;
    --bblockx-bg-accent: #3b82f6;
    --bblockx-bg-muted: #f1f5f9;
    
    /* ========================================
       Colors - Text
       ======================================== */
    --bblockx-text-primary: #0f172a;
    --bblockx-text-secondary: #475569;
    --bblockx-text-muted: #64748b;
    --bblockx-text-light: #ffffff;
    
    /* ========================================
       Colors - UI
       ======================================== */
    --bblockx-ui-primary: #3b82f6;
    --bblockx-ui-primary-hover: #2563eb;
    --bblockx-ui-border: #e2e8f0;
    --bblockx-ui-border-hover: #cbd5e1;
    
    /* ========================================
       Animation
       ======================================== */
    --bblockx-transition-fast: 0.15s ease;
    --bblockx-transition-normal: 0.25s ease;
    --bblockx-transition-slow: 0.35s ease;
    
    /* ========================================
       Shadows
       ======================================== */
    --bblockx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --bblockx-shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.07);
    --bblockx-shadow-lg: 0 4px 10px rgba(15, 23, 42, 0.05), 0 14px 36px rgba(15, 23, 42, 0.10);
    
    /* ========================================
       Border Radius
       ======================================== */
    --bblockx-radius-sm: 8px;
    --bblockx-radius-md: 12px;
    --bblockx-radius-lg: 16px;
    --bblockx-radius-xl: 20px;
}

/* ========================================
   Layout Container Reset
   ======================================== */

.bblockx-section,
.bblockx-row,
.bblockx-column {
    box-sizing: border-box;
}

.bblockx-section *,
.bblockx-row *,
.bblockx-column * {
    box-sizing: border-box;
}

/* ========================================
   Gap Calculation Helper for Flex Layout
   When using gap with percentage widths,
   we need to account for the gap in width calc
   ======================================== */

/* Gap values for calculation */
.bblockx-row--gap-none {
    --bblockx-current-gap: 0px;
}

.bblockx-row--gap-xs {
    --bblockx-current-gap: var(--bblockx-space-xs);
}

.bblockx-row--gap-s {
    --bblockx-current-gap: var(--bblockx-space-s);
}

.bblockx-row--gap-m {
    --bblockx-current-gap: var(--bblockx-space-m);
}

.bblockx-row--gap-l {
    --bblockx-current-gap: var(--bblockx-space-l);
}

.bblockx-row--gap-xl {
    --bblockx-current-gap: var(--bblockx-space-xl);
}

/* ========================================
   Accessibility
   ======================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .bblockx-section,
    .bblockx-row,
    .bblockx-column,
    .bblockx-section *,
    .bblockx-row *,
    .bblockx-column * {
        transition: none !important;
        animation: none !important;
    }
}

/* Focus visible styles */
.bblockx-section:focus-visible,
.bblockx-row:focus-visible,
.bblockx-column:focus-visible {
    outline: 2px solid var(--bblockx-ui-primary);
    outline-offset: 2px;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .bblockx-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .bblockx-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .bblockx-column {
        break-inside: avoid;
    }
    
    /* Force single column on print */
    .bblockx-row__inner {
        flex-direction: column !important;
    }
    
    .bblockx-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ========================================
   Dark Mode Support (Optional)
   ======================================== */

@media (prefers-color-scheme: dark) {
    .bblockx-section--bg-light {
        --bblockx-section-bg-light: #1e293b;
    }
    
    .bblockx-section--bg-dark {
        --bblockx-section-bg-dark: #0f172a;
    }
}

/* ========================================
   High Contrast Mode Support
   ======================================== */

@media (forced-colors: active) {
    .bblockx-section,
    .bblockx-row,
    .bblockx-column {
        border: 1px solid CanvasText;
    }
}