/**
 * Shared ACF Block Styles
 * nVoq Blocks System v3.8
 * 
 * CSS Custom Properties and base styles shared across all blocks.
 * These match your Cornerstone design system.
 */

:root {
    /* ===========================================
       Typography (from Cornerstone settings)
       =========================================== */
    --nvoq-font-family: "nVoq Fonts", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --nvoq-font-size-sm: 14px;
    --nvoq-font-size-base: 16px;
    --nvoq-font-size-md: 18px;
    --nvoq-font-size-lg: 24px;
    --nvoq-font-size-xl: 32px;
    --nvoq-font-size-2xl: 42px;
    
    --nvoq-font-weight-normal: 400;
    --nvoq-font-weight-medium: 500;
    --nvoq-font-weight-semibold: 600;
    --nvoq-font-weight-bold: 700;
    
    --nvoq-line-height-tight: 1.25;
    --nvoq-line-height-base: 1.5;
    --nvoq-line-height-relaxed: 1.75;
    
    /* ===========================================
       Colors (from Cornerstone design)
       =========================================== */
    /* Primary palette */
    --nvoq-color-primary: #0066cc;
    --nvoq-color-primary-dark: #004d99;
    --nvoq-color-primary-light: #e6f0ff;
    
    /* Neutrals */
    --nvoq-color-text: #425466;
    --nvoq-color-text-light: #6b7c93;
    --nvoq-color-text-dark: #1a202c;
    --nvoq-color-heading: #1a202c;
    
    /* Backgrounds */
    --nvoq-color-bg-light: #f5f3ef;
    --nvoq-color-bg-white: #ffffff;
    --nvoq-color-bg-dark: #1a202c;
    --nvoq-color-bg-dark-alt: #2d3748;
    
    /* Accents */
    --nvoq-color-accent: #0066cc;
    --nvoq-color-accent-secondary: #00a67e;
    --nvoq-color-border: #e2e8f0;
    --nvoq-color-border-dark: #4a5568;
    
    /* ===========================================
       Spacing
       =========================================== */
    --nvoq-spacing-xs: 8px;
    --nvoq-spacing-sm: 12px;
    --nvoq-spacing-md: 16px;
    --nvoq-spacing-lg: 24px;
    --nvoq-spacing-xl: 32px;
    --nvoq-spacing-2xl: 48px;
    --nvoq-spacing-3xl: 64px;
    
    /* ===========================================
       Effects (from Cornerstone settings)
       =========================================== */
    --nvoq-transition-duration: 300ms;
    --nvoq-transition-timing: cubic-bezier(0.4, 0, 0.2, 1); /* Material Standard */
    --nvoq-transition: all var(--nvoq-transition-duration) var(--nvoq-transition-timing);
    
    --nvoq-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --nvoq-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --nvoq-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    --nvoq-radius-sm: 4px;
    --nvoq-radius-md: 8px;
    --nvoq-radius-lg: 12px;
    --nvoq-radius-full: 9999px;
}

/* ===========================================
   Base Block Styles
   =========================================== */
[class*="wp-block-acf-"] {
    font-family: var(--nvoq-font-family);
    line-height: var(--nvoq-line-height-base);
    box-sizing: border-box;
}

[class*="wp-block-acf-"] *,
[class*="wp-block-acf-"] *::before,
[class*="wp-block-acf-"] *::after {
    box-sizing: inherit;
}

/* ===========================================
   Editor-specific styles
   =========================================== */
.block-editor-block-list__block[data-type^="acf/"] {
    margin-top: var(--nvoq-spacing-lg);
    margin-bottom: var(--nvoq-spacing-lg);
}

/* Preview mode indicator */
.acf-block-preview {
    position: relative;
}

/* Edit mode form styling */
.acf-block-fields {
    padding: var(--nvoq-spacing-md);
    background: #f9fafb;
    border: 1px solid var(--nvoq-color-border);
    border-radius: var(--nvoq-radius-md);
}

/* ===========================================
   Responsive breakpoints (as mixins via media queries)
   =========================================== */
/* 
   Usage in individual block CSS:
   @media (max-width: 768px) { ... }
   @media (max-width: 480px) { ... }
*/

/* ===========================================
   Utility Classes (available to all blocks)
   =========================================== */
.nvoq-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.nvoq-text-center {
    text-align: center;
}

.nvoq-text-left {
    text-align: left;
}

.nvoq-text-right {
    text-align: right;
}