/**
 * QuoteManager Design System - Unified CSS Custom Properties
 *
 * This file provides consistent theming variables across the entire
 * theme-plugin integration. Used by both blog-theme and QuoteManager plugin.
 */

:root {
    /* === COLOR MANAGER V2 INTEGRATION === */
    /* Color Manager V2 injects CSS variables via wp_head with --qm- prefix */
    /* All blocks and components use these variables with fallbacks */

    /* Variables injected by Color Manager V2:
     * --qm-accent-color, --qm-secondary, --qm-accent-color
     * --qm-text-primary, --qm-text-secondary, --qm-text-muted, --qm-text-meta
     * --qm-background-base, --qm-background-subtle, --qm-background-soft, --qm-background-tint
     * --qm-border-light, --qm-border-medium, --qm-border-strong
     * --qm-shadow-soft, --qm-shadow-medium, --qm-shadow-strong
     * --qm-hover-primary, --qm-hover-secondary, --qm-hover-accent
     * --qm-success, --qm-warning, --qm-error
     * --qm-quote-text, --qm-quote-author, --qm-new-badge-bg, --qm-new-badge-text
     */

    /* === SPACING SYSTEM === */
    --qm-space-xs: 0.25rem;      /* 4px */
    --qm-space-sm: 0.5rem;       /* 8px */
    --qm-space-md: 1rem;         /* 16px */
    --qm-space-lg: 1.5rem;       /* 24px */
    --qm-space-xl: 2rem;         /* 32px */
    --qm-space-2xl: 3rem;        /* 48px */

    /* Gap Sizes */
    --qm-gap-compact: 15px;
    --qm-gap-default: 20px;
    --qm-gap-wide: 30px;
    --qm-gap-extra-wide: 40px;

    /* === RESPONSIVE BREAKPOINTS === */
    /* Inheriting from blog-theme */
    --bp-xs: 480px;   /* Small mobile */
    --bp-sm: 640px;   /* Large mobile */
    --bp-md: 768px;   /* Tablet */
    --bp-lg: 1024px;  /* Desktop */
    --bp-xl: 1200px;  /* Large desktop */

    /* === COMPONENT DESIGN TOKENS === */

    /* Border Radius */
    --qm-border-radius-sm: 2px;
    --qm-border-radius: 8px;
    --qm-border-radius-lg: 12px;
    --qm-border-radius-xl: 1.5rem;
    --qm-border-radius-full: 50%;

    /* Shadows - Using site-wide shadow colors */
    --qm-shadow-sm: 0 1px 3px var(--qm-shadow-color), 0 1px 2px var(--qm-shadow-color);
    --qm-shadow: 0 2px 8px var(--qm-shadow-color);
    --qm-shadow-md: 0 4px 6px var(--qm-shadow-color), 0 2px 4px var(--qm-shadow-color);
    --qm-shadow-lg: 0 10px 15px var(--qm-shadow-color), 0 4px 6px var(--qm-shadow-color);
    --qm-shadow-none: none;

    /* Hover States - Using hover shadow colors */
    --qm-hover-shadow: 0 4px 16px var(--qm-shadow-color-hover);
    --qm-hover-shadow-lg: 0 8px 24px var(--qm-shadow-color-dark);

    /* Transitions */
    --qm-transition: all 0.3s ease;
    --qm-transition-fast: all 0.2s ease;
    --qm-transition-slow: all 0.5s ease;

    /* === TYPOGRAPHY SYSTEM === */

    /* Font Families (inheriting from blog-theme) */
    --qm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --qm-font-serif: "Georgia", "Times New Roman", "Times", serif;

    /* Font Sizes */
    --qm-text-xs: 0.75rem;      /* 12px */
    --qm-text-sm: 0.875rem;     /* 14px */
    --qm-text-base: 1rem;       /* 16px */
    --qm-text-lg: 1.125rem;     /* 18px */
    --qm-text-xl: 1.25rem;      /* 20px */
    --qm-text-2xl: 1.75rem;     /* 28px */

    /* Font Weights */
    --qm-font-normal: 400;
    --qm-font-medium: 500;
    --qm-font-semibold: 600;
    --qm-font-bold: 700;

    /* Line Heights */
    --qm-leading-tight: 1.1;
    --qm-leading-normal: 1.4;
    --qm-leading-relaxed: 1.6;

    /* Letter Spacing */
    --qm-tracking-tight: -0.025em;
    --qm-tracking-normal: 0;
    --qm-tracking-wide: 0.025em;
    --qm-tracking-wider: 0.05em;

    /* === GRID SYSTEM === */

    /* Quote Showcase Grid Columns */
    --qm-grid-columns-mobile: 1;
    --qm-grid-columns-tablet: 2;
    --qm-grid-columns-desktop: 3;

    /* Timeline Heights */
    --qm-timeline-height: 70vh;
    --qm-sidebar-height: auto;

    /* === CONTENT-SPECIFIC COLORS === */
    /* These remain as block options for functional reasons */

    /* Phase Color System (Timeline blocks) */
    --qm-phase-dating: #ff6b6b;       /* Dating phase color */
    --qm-phase-getrouwd: #4ecdc4;     /* Married phase color */
    --qm-phase-kinderen: #95e1d3;     /* Children phase color */
    --qm-phase-default: #666666;      /* Default phase color */

    /* Quote-Specific Colors (functional, not decorative) */
    --qm-quote-text: var(--qm-text-primary);    /* Default quote text */
    --qm-quote-author: var(--qm-text-secondary); /* Default author text */
    --qm-quote-accent: var(--qm-accent-primary); /* Quote accent elements */

    /* === COMPONENT-SPECIFIC VARIABLES === */

    /* Character Cards */
    --qm-character-card-width: 200px;
    --qm-character-avatar-size: 48px;
    --qm-character-avatar-size-lg: 80px;
    --qm-character-avatar-border: 2px;

    /* Filter Buttons */
    --qm-filter-button-padding: 0.5rem 1rem;
    --qm-filter-button-gap: 0.75rem;
    --qm-filter-button-mobile-padding: 0.5rem 1rem 0.75rem 1rem;

    /* Quote Cards */
    --qm-quote-card-padding: 1.5rem;
    --qm-quote-card-padding-mobile: 1rem;

    /* === Z-INDEX SCALE === */
    --qm-z-dropdown: 10;
    --qm-z-sticky: 20;
    --qm-z-fixed: 30;
    --qm-z-modal-backdrop: 40;
    --qm-z-modal: 50;
    --qm-z-toast: 60;
}

/* === RESPONSIVE CUSTOM PROPERTY ADJUSTMENTS === */

@media (max-width: 639px) {
    :root {
        --qm-space-md: 0.875rem;    /* Slightly tighter spacing on mobile */
        --qm-space-lg: 1.25rem;
        --qm-gap-default: 15px;     /* Compact mobile gaps */
        --qm-quote-card-padding: var(--qm-quote-card-padding-mobile);
    }
}

@media (min-width: 1200px) {
    :root {
        --qm-space-xl: 2.5rem;      /* More generous spacing on large screens */
        --qm-space-2xl: 4rem;
    }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    :root {
        --qm-border-color: #000;
        --qm-text-secondary: #000;
        --qm-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    :root {
        --qm-transition: none;
        --qm-transition-fast: none;
        --qm-transition-slow: none;
    }
}