/**
 * Sparkplug Theme Design Tokens
 *
 * Centralized design system variables for the Sparkplug theme.
 * Contains all CSS custom properties used across the theme for
 * consistent spacing, colors, typography, and animations.
 *
 * Organization:
 * - Spacing System (8px base unit)
 * - Layout & Container System
 * - Border Radius System
 * - Typography System
 * - Color System - Light Theme
 * - Accessible Color Variants (-a11y)
 * - Gradient System (includes shadow tokens)
 * - Component Animations - Drawer System
 * - Z-Index Layering System
 * - Button System
 * - Content Specific Overrides
 * - Dark Theme Overrides
 * - Responsive Adjustments
 * - WordPress Admin Bar Adjustments
 * - Third-Party Variable Remaps
 * - Utility: Smooth Scroll & Reduced Motion
 */

:root {
    /* ==========================================================================
       Spacing System (8px base unit)
       ========================================================================== */
    
    /* Base spacing unit with responsive scaling */
    --sprk-space-unit: 8px;
    
    /* Static spacing tokens */
    --sprk-space-0: 0;
    --sprk-space-1: calc(var(--sprk-space-unit) * 1);    /* 8px */
    --sprk-space-2: calc(var(--sprk-space-unit) * 2);    /* 16px */
    --sprk-space-3: calc(var(--sprk-space-unit) * 3);    /* 24px */
    --sprk-space-4: calc(var(--sprk-space-unit) * 4);    /* 32px */
    --sprk-space-5: calc(var(--sprk-space-unit) * 5);    /* 40px */
    --sprk-space-6: calc(var(--sprk-space-unit) * 6);    /* 48px */
    --sprk-space-7: calc(var(--sprk-space-unit) * 7);    /* 56px */
    --sprk-space-8: calc(var(--sprk-space-unit) * 8);    /* 64px */
    --sprk-space-9: calc(var(--sprk-space-unit) * 9);    /* 72px */
    --sprk-space-10: calc(var(--sprk-space-unit) * 10);  /* 80px */
    --sprk-space-12: calc(var(--sprk-space-unit) * 12);  /* 96px */
    --sprk-space-16: calc(var(--sprk-space-unit) * 16);  /* 128px */
    
    /* Special cases */
    --sprk-space-0-25: calc(var(--sprk-space-unit) * 0.25); /* 2px */
    --sprk-space-0-5: calc(var(--sprk-space-unit) * 0.5);   /* 4px */
    --sprk-space-0-75: calc(var(--sprk-space-unit) * 0.75); /* 6px */

    /* ==========================================================================
       Layout & Container System
       ========================================================================== */
    
    /* Reference Kadence's generated layout variables (set from theme options) */
    --sprk-container-max-width: var(--global-content-width); /* References Kadence: content_width (1440px) */
    --sprk-container-padding: var(--global-content-edge-padding); /* References Kadence: content_edge_spacing (2.5rem = 40px) */

    /* Reserved space for side branding/navigation */
    /* --sprk-side-margin-desktop: var(--sprk-space-10);
    --sprk-side-margin-tablet: var(--sprk-space-4);
    --sprk-side-margin-mobile: 0; */

    /* Content specific widths */
    --sprk-blog-narrow-width: var(--global-content-narrow-width); /* References Kadence: content_narrow_width (1280px) */
    --sprk-blog-title-width: calc(var(--sprk-space-unit) * 128); /* ~1024px */
    --sprk-blog-text-width: 80ch; /* Optimal reading width (should be 65ch, 80ch looks better */
    
    /* Drawer/Panel width */
    --sprk-drawer-width: 640px; /* Off-canvas panels, sidebars */
    --sprk-drawer-gutter: var(--scrollbar-offset, 15px); /* Right-edge space for the browser scrollbar — tracks the measured scrollbar width (≈0 on mobile/overlay scrollbars, so the gutter collapses there); 15px fallback before JS sets --scrollbar-offset */
    --sprk-drawer-tab-width: 32px;      /* Off-canvas tab column / toggle width (closed / narrow state) */
    --sprk-drawer-tab-width-open: 48px; /* Off-canvas tab column / toggle width (panels-active / wide state) */

    /* Header Height - Base values, --sprk-header-height adjusts for tablet/mobile and admin bar */
    --sprk-header-height-base: 80px; /* Desktop base */
    --sprk-header-height-mobile: 95px; /* Tablet and mobile base */
    --sprk-header-height: var(--sprk-header-height-base);

    /* Top position for sticky elements to align with side branding and off-canvas toggles.
       Automatically adjusts for admin bar. */
    --sprk-sticky-top: var(--sprk-space-10);

    /* ==========================================================================
       Border Radius System
       ========================================================================== */

    --sprk-radius-none: 0;
    --sprk-radius-xs: 2px;       /* Minimal rounding for inputs, small buttons */
    --sprk-radius-sm: 4px;       /* Small components, form elements */
    --sprk-radius-base: 6px;     /* Standard component rounding */
    --sprk-radius-md: 8px;       /* Cards, panels - matches space-1 */
    --sprk-radius-lg: 12px;      /* Large components, major containers */
    --sprk-radius-xl: 16px;      /* Hero sections, prominent elements */
    --sprk-radius-full: 9999px;  /* Pills, circular elements */

    /* ==========================================================================
       Typography System
       ========================================================================== */
    
    /* Font families */
    --sprk-font-heading: 'niveau-grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sprk-font-body: 'niveau-grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sprk-font-mono: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    
    /* Font weights */
    --sprk-font-weight-light: 300;
    --sprk-font-weight-regular: 400;
    --sprk-font-weight-bold: 700;
    
    /* Fluid type scale with clamp() */
    --sprk-font-size-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);      /* 12-13px */
    --sprk-font-size-sm:   clamp(0.8125rem, 0.7625rem + 0.25vw, 0.875rem);  /* 13-14px */
    --sprk-font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);         /* 16-18px */
    --sprk-font-size-lg:   clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);       /* 18-20px */
    --sprk-font-size-xl:   clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);         /* 20-24px */
    --sprk-font-size-xxl:  clamp(1.75rem, 1.576rem + 0.543vw, 2rem);        /* 28-32px */
    --sprk-font-size-3xl:  clamp(2rem, 1.786rem + 1.07vw, 2.75rem);         /* 32-44px */
    --sprk-font-size-4xl:  clamp(2.5rem, 1.717rem + 2.45vw, 3.75rem);       /* 40-60px - controlled growth */
    --sprk-font-size-5xl:  clamp(2.75rem, 0.489rem + 7.065vw, 6rem);        /* 44-96px - available for edge cases */

    /* Prose content scale variants
     * Font size adjustments for long-form content (blog, downloads, etc). */
    --sprk-font-size-base-prose: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18-20px - larger body text for prose contexts */
    --sprk-font-size-3xl-prose:  clamp(2.25rem, 1.728rem + 1.63vw, 3rem);   /* 36-48px - larger H2 for prose contexts */

    /* Kadence font size overrides - map Kadence variables to our fluid scale
     *
     * IMPORTANT: These variables are SET via the 'kadence_blocks_variable_font_sizes' filter
     * in functions.php (nf_spark_override_kadence_font_sizes function). The filter modifies
     * what Kadence generates in its inline CSS at the :root level.
     *
     * The declarations below are REFERENCE ONLY - they document what the filter sets.
     * The actual values are injected by Kadence's inline CSS after being filtered.
     *
     * Context-specific overrides (like .single-post wrapped prose font sizes below) still work
     * due to CSS specificity.
     */
    /* --global-kb-font-size-sm:   var(--sprk-font-size-sm);
    --global-kb-font-size-md:   var(--sprk-font-size-base);
    --global-kb-font-size-lg:   var(--sprk-font-size-lg);
    --global-kb-font-size-xl:   var(--sprk-font-size-xl);
    --global-kb-font-size-xxl:  var(--sprk-font-size-3xl);
    --global-kb-font-size-xxxl: var(--sprk-font-size-4xl); */

    /* Line heights */
    --sprk-line-height-tight:   1.2;
    --sprk-line-height-snug:    1.35;
    --sprk-line-height-base:    1.6;
    --sprk-line-height-relaxed: 1.75;
    --sprk-line-height-loose:   2;

    /* WP element font sizing */
    --sprk-font-size-title: var(--sprk-font-size-4xl);      /* 40-60px - maps to 4xl for consistency */
   
    /* ==========================================================================
       Color System - Light Theme (Default)
       ========================================================================== */
    
    /* Brand colors */
    --sprk-color-brand-red:  #ef4748;
    --sprk-color-brand-gray: #414242;
    --sprk-color-brand-dark: #2a2e2f;
    
    /* Semantic colors - Light mode */
    --sprk-color-text-primary: var(--sprk-color-brand-dark);
    --sprk-color-text-secondary: #575B5C;
    --sprk-color-text-muted: #737778;
    --sprk-color-text-inverse: #ffffff;
    
    --sprk-color-background: #ffffff;
    --sprk-color-background-subtle: #f7fafc;
    --sprk-color-background-muted: #edf2f7;
    --sprk-color-background-dark: #101111;

    --sprk-color-border: #d5d9da;
    --sprk-color-border-strong: #b0b4b5;
    
    --sprk-color-accent: var(--sprk-color-brand-red);
    --sprk-color-accent-hover: #d93e3f; /* Darker red for hover */
    --sprk-color-accent-active: var(--sprk-color-accent-hover);

    /* Extended accent palette for gradients */
    --sprk-color-accent-alt-1: #4848EF;   /* Blue accent */
    --sprk-color-accent-alt-2: #9C48EF;   /* Purple accent */
    --sprk-color-accent-alt-3: #EF48B7;   /* Pink accent */
    --sprk-color-accent-alt-4: #1fb6e9;   /* Teal accent */
    --sprk-color-accent-alt-5: #fff12c;   /* Yellow accent */

    /* Extended accent text variants */
    --sprk-color-accent-alt-1-sub: color-mix(in srgb, var(--sprk-color-accent-alt-1) 100%, transparent);   /* Blue accent - substitute */
    --sprk-color-accent-alt-2-sub: color-mix(in srgb, var(--sprk-color-accent-alt-2) 100%, transparent);   /* Purple accent - substitute */
    --sprk-color-accent-alt-3-sub: color-mix(in srgb, var(--sprk-color-accent-alt-3) 100%, transparent);   /* Pink accent - substitute */
    --sprk-color-accent-alt-4-sub: color-mix(in srgb, var(--sprk-color-accent-alt-4) 100%, transparent);   /* Teal accent - substitute */
    --sprk-color-accent-alt-5-sub: color-mix(in srgb, var(--sprk-color-accent-alt-5) 100%, transparent);   /* Yellow accent - substitute */

    /* Status / Notice colors
       These map to Kadence palette11-15 (Notices group) and drive all
       .nf-spark-notice and .edd-alert variant styling in style.css.
       The "accent" value is used for glows, icons, and borders.
       The "text" value is a darker accessible shade for body copy. */
    --sprk-color-success:         #22c55e;
    --sprk-color-success-text:    #166534;
    --sprk-color-error:           #ef4444;
    --sprk-color-error-text:      #991b1b;
    --sprk-color-info:            #3b82f6;
    --sprk-color-info-text:       #1e40af;
    --sprk-color-warning:         #f97316;
    --sprk-color-warning-text:    #9a3412;
    --sprk-color-rating:          #f5a524;

    /* ==========================================================================
       Accessible Color Variants (-a11y)
       ==========================================================================
       Darker, WCAG AA-compliant companions to brand accent colors. Use these
       where the source color would fail contrast at body-text sizes (small
       uppercase eyebrows, inline <strong>, links inside paragraphs). Leave
       the originals in place for backgrounds, icons, hero display, and large
       headings where the relaxed 3:1 large-text threshold applies.

       Naming note: the Status / Notice block above already uses a `-text`
       suffix for the same purpose (e.g. `--sprk-color-success-text`). The
       `-a11y` suffix here is the deliberate convention for brand-accent
       accessible variants — kept distinct so call sites read self-documenting
       ("I'm using the a11y-safe brand red here") without conflating with the
       semantic-status `-text` family. */

    /* Static a11y brand red — solid WCAG AA pass against the light background
       (~6:1). Safe drop-in replacement for --sprk-color-brand-red anywhere
       the original would fall below the 4.5:1 threshold. */
    --sprk-color-brand-red-a11y: #EA1012;

    /* Viewport-interpolated brand red — uses the dark `-a11y` variant at
       narrow viewports (where text is smallest via clamp() font-size) and
       the canonical brand red at wide viewports (where larger headings
       cross into the 3:1 large-text contrast threshold). Linear blend
       between 768px (full a11y) and 1200px (full brand). Use when the
       accent color is applied to a font that itself scales by viewport and
       you want the color tone to track the readability transition. */
    --sprk-color-brand-red-a11y-text: color-mix(
        in srgb,
        var(--sprk-color-brand-red-a11y) calc((1 - clamp(0, (100vw - 768px) / (1200px - 768px), 1)) * 100%),
        var(--sprk-color-brand-red)      calc(clamp(0, (100vw - 768px) / (1200px - 768px), 1) * 100%)
    );

    /* ==========================================================================
       Gradient System
       ========================================================================== */

    /* Base gradients - 135deg angle for visual consistency */
    /* --sprk-gradient-warm: linear-gradient(135deg, #ef4748 0%, #fff12c 100%);
    --sprk-gradient-cool: linear-gradient(135deg, #1551DD 0%, #0EC9B2 100%);
    --sprk-gradient-vibrant: linear-gradient(135deg, #911AD4 0%, #FF206E 100%); */
    --sprk-gradient-warm: linear-gradient(135deg, var(--sprk-color-brand-red) 0%, var(--sprk-color-accent-alt-5) 100%);      /* Core Plugin: red→yellow */
    --sprk-gradient-cool: linear-gradient(135deg, var(--sprk-color-accent-alt-1) 0%, var(--sprk-color-accent-alt-4) 100%);      /* Account Management: blue→teal */
    --sprk-gradient-vibrant: linear-gradient(135deg, var(--sprk-color-accent-alt-2) 0%, var(--sprk-color-accent-alt-3) 100%);   /* Add-ons: purple→pink */

    /* Shadows */
    --sprk-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sprk-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --sprk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sprk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sprk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --sprk-shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* Button shadows - uniform border-like outline on hover */
    --sprk-shadow-btn-hover: 0 0 0 6px rgba(46, 48, 48, 0.16);
    --sprk-shadow-btn-hover-sm: 0 0 0 4px rgba(46, 48, 48, 0.16);
    
    /* Transitions */
    --sprk-transition-fast: 200ms ease-in-out;    /* Quick interactions */
    --sprk-transition-base: 300ms ease-out;       /* Standard interactions */
    --sprk-transition-slow: 400ms ease-out;       /* Deliberate animations */
    --sprk-transition-smooth: 500ms cubic-bezier(0.175, 0.885, 0.15, 1.08); /* Smooth curves */

    /* ==========================================================================
       Component Animations - Drawer System
       ========================================================================== */
    
    /* Drawer Animation Timings */
    --sprk-drawer-duration: 320ms;
    --sprk-drawer-duration-fast: 200ms;
    --sprk-drawer-duration-slow: 500ms;
    --sprk-drawer-bounce-duration: 600ms; /* Slower for bouncy effect */
    --sprk-drawer-tab-transform-duration: 240ms;
    
    /* Drawer Animation Easing Functions */
    --sprk-drawer-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
    --sprk-drawer-tab-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --sprk-drawer-bounce-easing: cubic-bezier(0.68, -0.55, 0.15, 1.45); /* Bouncy overshoot with slower settle */

    /* ==========================================================================
       Z-Index Layering System
       ========================================================================== */
    
    /* Drawer & Navigation Z-Indexes (Higher than site header z-index: 11) */
    --sprk-drawer-overlay-z: 10010;      /* Backdrop overlay */
    --sprk-side-branding-z: 10011;       /* Above overlay, below panels */
    --sprk-drawer-panel-z: 10012;        /* Drawer panels */
    --sprk-drawer-toggle-z: 10013;       /* Toggle buttons */
    --sprk-drawer-active-toggle-z: 10014; /* Active toggle button */

    /* ==========================================================================
       Button System
       ========================================================================== */

    /* Primary Button */
    --sprk-btn-primary-padding: calc(var(--sprk-space-unit) * 1.25) var(--sprk-space-3);
    --sprk-btn-primary-bg: var(--sprk-color-brand-dark);
    --sprk-btn-primary-bg-hover: var(--sprk-color-text-secondary);
    --sprk-btn-primary-color: var(--sprk-color-text-inverse);

    /* Secondary Button */
    --sprk-btn-secondary-padding: var(--sprk-btn-primary-padding);
    --sprk-btn-secondary-bg: var(--sprk-color-background);
    --sprk-btn-secondary-bg-hover: var(--sprk-color-background);
    --sprk-btn-secondary-color: var(--sprk-color-text-primary);
    --sprk-btn-secondary-border: 2px solid var(--sprk-color-text-primary);
    --sprk-btn-secondary-border-hover: 2px solid var(--sprk-color-text-primary);

    /* Subtle Button Modifier (works with both primary and secondary) */
    --sprk-btn-subtle-bg: var(--sprk-color-background-muted);
    --sprk-btn-subtle-bg-hover: var(--sprk-color-background-muted);
    --sprk-btn-subtle-color: var(--sprk-color-text-primary);
    --sprk-btn-subtle-border: 2px solid var(--sprk-color-border);
    --sprk-btn-subtle-border-hover: 2px solid var(--sprk-color-border-strong);

    /* Small Button Size Modifier */
    --sprk-btn-primary-padding-sm: var(--sprk-space-1) var(--sprk-space-2);
    --sprk-btn-secondary-padding-sm: var(--sprk-btn-primary-padding-sm);

    /* Large Button Size Modifier */
    --sprk-btn-primary-padding-lg: calc(var(--sprk-space-unit) * 1.5) calc(var(--sprk-space-3) * 1.125);
    --sprk-btn-secondary-padding-lg: var(--sprk-btn-primary-padding-lg);

    /* Corner Shape (Squircle) Settings */
    --sprk-corner-shape-smooth: 1.6;     /* Smoothness factor for superellipse (matches native CSS corner-shape) */
    --sprk-corner-shape-radius: var(--sprk-space-3);    /* Corner radius for squircle effect (24px) */
}

/* ==========================================================================
   Content Specific Overrides
   ========================================================================== */

/* Prose content: font size + Kadence variable remapping for blog/download
 *
 * These scoped overrides work via CSS specificity - higher specificity than the
 * :root values set by the kadence_blocks_variable_font_sizes filter in functions.php.
 */
.single-post, .single-download {
    .entry-content.single-content {

        /* Body text */
        font-size: var(--sprk-font-size-base-prose);

        /* Heading scale overrides - cascades to h2 via --sprk-font-size-3xl */
        --sprk-font-size-3xl:       var(--sprk-font-size-3xl-prose);

        /* Kadence block font size remapping for prose contexts */
        --global-kb-font-size-sm:   var(--sprk-font-size-sm);         /* 13-14px */
        --global-kb-font-size-md:   var(--sprk-font-size-base-prose); /* 18-20px */
        --global-kb-font-size-lg:   var(--sprk-font-size-xl);         /* 20-24px */
        --global-kb-font-size-xl:   var(--sprk-font-size-xxl);        /* 28-32px */
        --global-kb-font-size-xxl:  var(--sprk-font-size-3xl-prose);  /* 36-48px */
        --global-kb-font-size-xxxl: var(--sprk-font-size-4xl);        /* 40-60px */
    }
}


/* ==========================================================================
   Dark Theme Overrides
   Apply with class="dark-theme" on body or container
   ========================================================================== */

.dark-theme {
    /* Dark mode colors */
    --sprk-color-text-primary: #f7fafc;
    --sprk-color-text-secondary: #e2e8f0;
    --sprk-color-text-muted: #a0aec0;
    --sprk-color-text-inverse: var(--sprk-color-brand-dark);
    
    --sprk-color-background: #1a1a1a;
    --sprk-color-background-subtle: #2d2d2d;
    --sprk-color-background-muted: #404040;
    
    --sprk-color-border: #4a5568;
    --sprk-color-border-strong: #858A8A;
    
    /* Adjust brand red for better contrast on dark */
    --sprk-color-accent: #ff5859; /* Slightly brighter for accessibility */
    --sprk-color-accent-hover: var(--sprk-color-brand-red);
    --sprk-color-accent-active: var(--sprk-color-accent-hover);
    
    /* Shadows need adjustment for dark mode */
    --sprk-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --sprk-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --sprk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --sprk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --sprk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --sprk-shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 1200px) {
    :root {
        /* Hide side margins on tablets and below */
        --sprk-side-margin-desktop: 0;
    }
}

@media (max-width: 1024px) {
    :root {
        /* Tablet and mobile have a taller header */
        --sprk-header-height: var(--sprk-header-height-mobile);
    }
}

@media (max-width: 768px) {
    :root {
        /* Tighter spacing on mobile */
        --sprk-container-padding: var(--sprk-space-4);
    }
}

/* ==========================================================================
   WordPress Admin Bar Adjustments
   ========================================================================== */

/* Admin bar offset — 0 when no admin bar, set by .admin-bar below */
body {
    --sprk-admin-bar-offset: 0px;
}

/* Set admin bar offset — all dependent variables recalculate automatically */
body.admin-bar {
    --sprk-admin-bar-offset: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --sprk-admin-bar-offset: 46px;
    }
}

/* ==========================================================================
   Third-Party Variable Remaps
   Maps plugin/block variables to theme design tokens for consistent styling.
   ========================================================================== */

:root {
    /* EDD */
    --edd-blocks-light-grey: var(--sprk-color-border);
}

/* ==========================================================================
   Utility: Smooth Scroll & Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --sprk-transition-base: 0ms;
        --sprk-transition-slow: 0ms;
        --sprk-transition-fast: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}