/**
 * JasaPanda Theme Child — Design Tokens (CSS Variables)
 *
 * Single source of truth for all design decisions.
 * Every color, font, spacing, shadow, radius, and transition
 * used across the theme is defined here.
 *
 * To rebrand: change values here — the whole theme updates.
 *
 * @package JasaPanda_Theme_Child
 * @since   1.0.0
 */

:root {

	/* ==========================================================================
	   COLOR SYSTEM
	   Soft, premium black & white — monochrome, no hue accents.
	   ========================================================================== */

	/* --- Brand (monochrome) --- */
	--jp-color-primary:            #1A1A1A;
	--jp-color-primary-hover:      #000000;
	--jp-color-primary-light:      #6B6B6B;
	--jp-color-primary-lighter:    #F0F0F0;
	--jp-color-primary-dark:       #000000;
	--jp-color-primary-rgb:        26, 26, 26;

	--jp-color-secondary:          #111111;
	--jp-color-secondary-hover:    #000000;

	--jp-color-accent:             #1A1A1A;

	/* --- Neutral / Grayscale --- */
	--jp-color-white:              #FFFFFF;
	--jp-color-off-white:          #FAFAFA;
	--jp-color-gray-50:            #F7F7F7;
	--jp-color-gray-100:           #F1F1F1;
	--jp-color-gray-200:           #E5E5E5;
	--jp-color-gray-300:           #D4D4D4;
	--jp-color-gray-400:           #A3A3A3;
	--jp-color-gray-500:           #737373;
	--jp-color-gray-600:           #525252;
	--jp-color-gray-700:           #404040;
	--jp-color-gray-800:           #262626;
	--jp-color-gray-900:           #171717;
	--jp-color-black:              #0A0A0A;

	/* --- Surface (background layers) --- */
	--jp-color-bg:                 var(--jp-color-white);
	--jp-color-bg-alt:             var(--jp-color-gray-50);
	--jp-color-bg-muted:           var(--jp-color-gray-100);
	--jp-color-bg-dark:            #0A0A0A;
	--jp-color-bg-darker:          #050505;

	/* --- Text --- */
	--jp-color-text:               var(--jp-color-black);
	--jp-color-text-muted:         var(--jp-color-gray-500);
	--jp-color-text-light:         var(--jp-color-gray-400);
	--jp-color-text-invert:        var(--jp-color-white);
	--jp-color-text-invert-muted:  rgba(255, 255, 255, 0.65);

	/* --- Border --- */
	--jp-color-border:             var(--jp-color-gray-200);
	--jp-color-border-strong:      var(--jp-color-gray-300);
	--jp-color-border-invert:      rgba(255, 255, 255, 0.12);

	/* --- Link --- */
	--jp-color-link:               var(--jp-color-text);
	--jp-color-link-hover:         var(--jp-color-primary);

	/* --- Overlay --- */
	--jp-color-overlay:            rgba(10, 10, 10, 0.55);
	--jp-color-overlay-light:      rgba(10, 10, 10, 0.25);

	/* --- Glass (header glassmorphism) --- */
	--jp-color-glass:              rgba(255, 255, 255, 0.75);
	--jp-color-glass-border:       rgba(255, 255, 255, 0.4);


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

	/* --- Font Families --- */
	--jp-font-primary:   "Manrope", -apple-system, sans-serif;
	--jp-font-display:   "Bricolage Grotesque", "Manrope", sans-serif;
	--jp-font-mono:      ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

	/* --- Font Sizes (fluid-ready) --- */
	--jp-fs-xs:          0.75rem;    /* 12px */
	--jp-fs-sm:          0.875rem;   /* 14px */
	--jp-fs-base:        1rem;       /* 16px */
	--jp-fs-md:          1.125rem;   /* 18px */
	--jp-fs-lg:          1.25rem;    /* 20px */
	--jp-fs-xl:          1.5rem;     /* 24px */
	--jp-fs-2xl:         1.875rem;   /* 30px */
	--jp-fs-3xl:         2.25rem;    /* 36px */
	--jp-fs-4xl:         3rem;       /* 48px */
	--jp-fs-5xl:         3.75rem;    /* 60px */
	--jp-fs-6xl:         4.5rem;     /* 72px */
	--jp-fs-display:     6rem;       /* 96px — hero headline */

	/* --- Font Weights --- */
	--jp-fw-light:       300;
	--jp-fw-regular:     400;
	--jp-fw-medium:      500;
	--jp-fw-semibold:    600;
	--jp-fw-bold:        700;
	--jp-fw-extrabold:   800;

	/* --- Line Heights --- */
	--jp-lh-tight:       1.1;
	--jp-lh-snug:        1.25;
	--jp-lh-normal:      1.5;
	--jp-lh-relaxed:     1.65;
	--jp-lh-loose:       1.85;

	/* --- Letter Spacing --- */
	--jp-ls-tighter:     -0.04em;
	--jp-ls-tight:       -0.02em;
	--jp-ls-normal:      0;
	--jp-ls-wide:        0.02em;
	--jp-ls-wider:       0.06em;
	--jp-ls-widest:      0.14em;


	/* ==========================================================================
	   SPACING (4pt grid)
	   ========================================================================== */

	--jp-space-0:        0;
	--jp-space-1:        0.25rem;    /* 4px  */
	--jp-space-2:        0.5rem;     /* 8px  */
	--jp-space-3:        0.75rem;    /* 12px */
	--jp-space-4:        1rem;       /* 16px */
	--jp-space-5:        1.25rem;    /* 20px */
	--jp-space-6:        1.5rem;     /* 24px */
	--jp-space-8:        2rem;       /* 32px */
	--jp-space-10:       2.5rem;     /* 40px */
	--jp-space-12:       3rem;       /* 48px */
	--jp-space-16:       4rem;       /* 64px */
	--jp-space-20:       5rem;       /* 80px */
	--jp-space-24:       6rem;       /* 96px */
	--jp-space-32:       8rem;       /* 128px */


	/* ==========================================================================
	   BORDER RADIUS
	   ========================================================================== */

	--jp-radius-none:    0;
	--jp-radius-xs:      4px;
	--jp-radius-sm:      6px;
	--jp-radius-md:      10px;
	--jp-radius-lg:      16px;
	--jp-radius-xl:      24px;
	--jp-radius-2xl:     32px;
	--jp-radius-pill:    999px;
	--jp-radius-full:    50%;


	/* ==========================================================================
	   BORDER WIDTH
	   ========================================================================== */

	--jp-border-0:       0;
	--jp-border-1:       1px;
	--jp-border-2:       2px;
	--jp-border-4:       4px;


	/* ==========================================================================
	   SHADOWS (elevation)
	   ========================================================================== */

	--jp-shadow-none:    none;
	--jp-shadow-xs:      0 1px 2px rgba(10, 10, 10, 0.05);
	--jp-shadow-sm:      0 2px 4px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
	--jp-shadow-md:      0 6px 16px rgba(10, 10, 10, 0.08), 0 2px 4px rgba(10, 10, 10, 0.04);
	--jp-shadow-lg:      0 12px 32px rgba(10, 10, 10, 0.10), 0 4px 8px rgba(10, 10, 10, 0.04);
	--jp-shadow-xl:      0 24px 48px rgba(10, 10, 10, 0.14), 0 8px 16px rgba(10, 10, 10, 0.06);
	--jp-shadow-2xl:     0 32px 64px rgba(10, 10, 10, 0.18);
	--jp-shadow-inner:   inset 0 2px 4px rgba(10, 10, 10, 0.06);

	/* --- Soft shadow (for CTA buttons) --- */
	--jp-shadow-primary: 0 10px 24px rgba(26, 26, 26, 0.22);
	--jp-shadow-primary-hover: 0 14px 32px rgba(26, 26, 26, 0.3);


	/* ==========================================================================
	   GRADIENTS
	   ========================================================================== */

	--jp-gradient-primary:   linear-gradient(135deg, #2B2B2B 0%, #000000 100%);
	--jp-gradient-hero:      linear-gradient(135deg, #FFFFFF 0%, #F4F4F4 55%, #FAFAFA 100%);
	--jp-gradient-dark:      linear-gradient(180deg, #111111 0%, #0A0A0A 100%);
	--jp-gradient-fade-b:    linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
	--jp-gradient-fade-t:    linear-gradient(0deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);


	/* ==========================================================================
	   TRANSITIONS & EASINGS
	   ========================================================================== */

	--jp-ease-linear:    linear;
	--jp-ease-in:        cubic-bezier(0.4, 0, 1, 1);
	--jp-ease-out:       cubic-bezier(0, 0, 0.2, 1);
	--jp-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
	--jp-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
	--jp-ease-smooth:    cubic-bezier(0.65, 0, 0.35, 1);

	--jp-duration-fast:   150ms;
	--jp-duration-base:   250ms;
	--jp-duration-slow:   400ms;
	--jp-duration-slower: 600ms;

	--jp-transition-fast:  all var(--jp-duration-fast) var(--jp-ease-out);
	--jp-transition-base:  all var(--jp-duration-base) var(--jp-ease-in-out);
	--jp-transition-slow:  all var(--jp-duration-slow) var(--jp-ease-smooth);
	--jp-transition-spring:all var(--jp-duration-base) var(--jp-ease-spring);
	--jp-transition-color: color var(--jp-duration-fast) var(--jp-ease-out),
	                       background-color var(--jp-duration-fast) var(--jp-ease-out),
	                       border-color var(--jp-duration-fast) var(--jp-ease-out);
	--jp-transition-transform: transform var(--jp-duration-base) var(--jp-ease-out);


	/* ==========================================================================
	   Z-INDEX SCALE
	   ========================================================================== */

	--jp-z-behind:       -1;
	--jp-z-base:          0;
	--jp-z-dropdown:      100;
	--jp-z-sticky:        200;
	--jp-z-header:        300;
	--jp-z-overlay:       400;
	--jp-z-offcanvas:     500;
	--jp-z-modal:         600;
	--jp-z-tooltip:       700;
	--jp-z-scroll-top:    800;
	--jp-z-max:           9999;


	/* ==========================================================================
	   BREAKPOINTS (documentation only — CSS media queries in responsive.css)
	   ========================================================================== */

	/* --jp-bp-xs:  480px  */
	/* --jp-bp-sm:  640px  */
	/* --jp-bp-md:  768px  */
	/* --jp-bp-lg:  1024px */
	/* --jp-bp-xl:  1280px */
	/* --jp-bp-2xl: 1536px */


	/* ==========================================================================
	   CONTAINER & LAYOUT
	   ========================================================================== */

	--jp-container-max:    1560px;   /* 1560px wide for premium agency feel */
	--jp-container-px:     1.5rem;   /* 24px padding on mobile */
	--jp-container-px-lg:  3rem;     /* 48px padding on desktop */


	/* ==========================================================================
	   HEADER
	   ========================================================================== */

	--jp-header-height:          88px;
	--jp-header-height-scrolled: 72px;
	--jp-header-height-mobile:   72px;
	--jp-header-blur:            18px;
	--jp-header-transition:      transform var(--jp-duration-base) var(--jp-ease-out),
	                             background-color var(--jp-duration-base) var(--jp-ease-out),
	                             box-shadow var(--jp-duration-base) var(--jp-ease-out),
	                             backdrop-filter var(--jp-duration-base) var(--jp-ease-out),
	                             height var(--jp-duration-base) var(--jp-ease-out);


	/* ==========================================================================
	   OFF-CANVAS
	   ========================================================================== */

	--jp-offcanvas-width:        420px;
	--jp-offcanvas-width-mobile: 88vw;
	--jp-offcanvas-bg:           var(--jp-color-white);
	--jp-offcanvas-transition:   transform var(--jp-duration-slow) var(--jp-ease-smooth);


	/* ==========================================================================
	   FOOTER
	   ========================================================================== */

	--jp-footer-bg:              #0A0A0A;
	--jp-footer-text:            rgba(255, 255, 255, 0.72);
	--jp-footer-heading:         var(--jp-color-white);
	--jp-footer-border:          rgba(255, 255, 255, 0.10);
	--jp-footer-hover:           var(--jp-color-white);

	/* Grid pattern SVG background (footer) */
	--jp-footer-grid-color:      rgba(255, 255, 255, 0.06);
	--jp-footer-grid-size:       80px;


	/* ==========================================================================
	   MARQUEE (footer)
	   ========================================================================== */

	--jp-marquee-fs:             clamp(4rem, 12vw, 12rem);
	--jp-marquee-fw:             800;
	--jp-marquee-duration:       40s;
	--jp-marquee-outline-color:  rgba(255, 255, 255, 0.35);
	--jp-marquee-solid-color:    var(--jp-color-white);


	/* ==========================================================================
	   BUTTON
	   ========================================================================== */

	--jp-btn-px:                 1.5rem;   /* 24px */
	--jp-btn-py:                 0.875rem; /* 14px */
	--jp-btn-radius:             var(--jp-radius-pill);
	--jp-btn-fw:                 var(--jp-fw-semibold);
	--jp-btn-fs:                 var(--jp-fs-sm);
	--jp-btn-transition:         var(--jp-transition-spring);


	/* ==========================================================================
	   FORM INPUT
	   ========================================================================== */

	--jp-input-height:           48px;
	--jp-input-radius:           var(--jp-radius-pill);
	--jp-input-border:           1px solid var(--jp-color-border);
	--jp-input-bg:               var(--jp-color-white);
	--jp-input-focus-ring:       0 0 0 3px rgba(26, 26, 26, 0.14);


	/* ==========================================================================
	   FOCUS RING (accessibility)
	   ========================================================================== */

	--jp-focus-ring:             0 0 0 3px rgba(26, 26, 26, 0.25);
	--jp-focus-ring-invert:      0 0 0 3px rgba(255, 255, 255, 0.5);
}


/* ==========================================================================
   REDUCED MOTION — respect user preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	:root {
		--jp-duration-fast:   0.01ms;
		--jp-duration-base:   0.01ms;
		--jp-duration-slow:   0.01ms;
		--jp-duration-slower: 0.01ms;
		--jp-marquee-duration: 0s;
	}
}