/* ============================================================
   Design Tokens
   Change these custom properties to restyle the entire app.
   Organised by element, then by element kind.

   Base values in :root are the desktop defaults.  The mobile
   media query below overrides only what changes for smaller
   viewports, so component CSS only ever references one name
   (e.g. --tab-pad) and gets the right value automatically.
   ============================================================ */
:root {

	/* ---- Colour palette ---- */
	--col-purple:              #4c1a57;
	--col-pink:                #ff3cc7;
	--col-pink-light:          #ffcef1;
	--col-pink-bg:             #fff5fc;
	--col-gold:                #f6b84b;
	--col-teal:                #007c77;
	--col-cyan:                #00e5e8;
	--col-yellow:              #f0f600;
	--col-black:               #1a1a1a;

	/* ---- Typography ---- */
	--font-ui:                 'Metrosant', sans-serif;
	--font-body:               'Libertinus Sans', sans-serif;

	/* ---- Spacing scale ---- */
	--sp-xs:                   4px;
	--sp-sm:                   8px;
	--sp-md:                   12px;
	--sp-lg:                   16px;

	/* ---- Border radius scale ---- */
	--radius-xs:               2px;
	--radius-sm:               5px;
	--radius-md:               6px;
	--radius-lg:               8px;

	/* ---- Close icon ---- */
	--close-size:              16px;
	--close-pad:               14px;
	--close-opacity:           0.85;
	--close-opacity-hover:     1;

	/* ---- Transitions ---- */
	--tr-fast:                 0.15s ease;
	--tr-loading:              0.4s ease;

	/* ---- Shadows ---- */
	--shadow-card:             0 2px 6px rgba(0, 0, 0, 0.12);
	--shadow-detail-cover:     0 2px 8px rgba(0, 0, 0, 0.12);

	/* ---- Z-indices ---- */
	--z-loading:               1000;
	--z-menu:                  100;
	--z-panel:                 60;
	--z-detail:                50;
	--z-detail-close:          51;

	/* ============================================================
	   Body / Page
	   ============================================================ */
	--body-bg:                 var(--col-purple);
	--body-color:              var(--col-purple);
	--body-font:               var(--font-body);
	--body-text-size:          20px;

	/* ============================================================
	   Loading screen
	   ============================================================ */
	--loading-bg:              var(--col-purple);
	--loading-owl-w:           360px;
	--loading-wordmark-w:      582px;
	--loading-wordmark-mt:     10px;
	--loading-spinner-mt:      24px;
	--loading-spinner-size:    32px;
	--loading-spinner-border:  3px;
	--loading-spinner-track:   rgba(255, 60, 199, 0.3);
	--loading-spinner-head:    var(--col-pink);
	--loading-spin-speed:      0.8s;

	/* ============================================================
	   Header
	   ============================================================ */
	--header-pad:              16px 28px 10px;
	--header-min-h:            230px;
	--owl-logo-w:              700px;
	--owl-logo-gap:            60px;
	--owl-icon-h:              36px;
	--wordmark-h:              28px;

	/* ============================================================
	   Main menu
	   ============================================================ */
	--menu-bg:                 var(--col-gold);
	--menu-text:               var(--col-purple);
	--menu-font:               var(--font-ui);
	--menu-font-size:          18px;
	--menu-line-height:        2.0;
	--menu-radius:             var(--radius-lg);
	--menu-pad:                14px 40px 14px 18px;
	--menu-min-w:              240px;
	--menu-top:                60px;
	--menu-left:               28px;

	/* ============================================================
	   Header right icons (account, cart, globe)
	   ============================================================ */
	--header-icon-gap:         18px;
	--account-btn-h:           28px;
	--cart-btn-h:              28px;

	/* ============================================================
	   Globe menu
	   ============================================================ */
	--globe-btn-h:             28px;
	--globe-menu-bg:           var(--col-gold);
	--globe-menu-font:         var(--font-ui);
	--globe-menu-font-size:    14px;
	--globe-menu-color:        var(--col-purple);
	--globe-menu-radius:       var(--radius-lg);
	--globe-menu-pad:          18px 44px 16px 18px;
	--globe-menu-min-w:        260px;
	--globe-menu-top:          var(--menu-top);
	--globe-menu-right:        28px;
	--globe-select-bg:         white;
	--globe-select-h:          44px;
	--globe-select-radius:     var(--radius-sm);
	--globe-select-gap:        18px;
	--globe-select-pad:        6px 10px;

	/* ============================================================
	   Content area
	   ============================================================ */
	--content-pad:             0 28px 16px;

	/* ============================================================
	   Tab strip
	   ============================================================ */
	--tab-font:                var(--font-ui);
	--tab-font-size:           18px;
	--tab-color:               var(--col-purple);
	--tab-bg-active:           var(--col-pink-bg);
	--tab-bg-inactive:         var(--col-pink-light);
	--tab-radius:              var(--radius-lg) var(--radius-lg) 0 0;
	--tab-pad:                 10px 36px;

	/* ============================================================
	   Window box
	   ============================================================ */
	--window-bg:               var(--col-pink-bg);
	--window-radius-top-left:  0;
	--window-radius-top-right: var(--radius-lg);
	--window-radius-bottom:    var(--radius-lg);

	/* ============================================================
	   Search box
	   ============================================================ */
	--search-bg:               var(--col-pink-light);
	--search-font:             var(--font-ui);
	--search-font-size:        14px;
	--search-color:            var(--col-purple);
	--search-placeholder:      #cccccc;
	--search-icon-size:        22px;
	--search-icon-opacity:     0.7;
	--search-radius:           var(--radius-lg);
	--search-h:                48px;
	--search-pad:              0 12px;
	--search-w:                260px;
	--search-border:           1px solid var(--col-pink-light);
	/* Single gap shared by desktop and mobile between the search box
	   and the main window pane. */
	--pane-search-gap:         var(--sp-md);
	--mobile-search-pad:       var(--pane-search-gap) 12px 12px;
	--desktop-search-gap:      var(--pane-search-gap);

	/* ============================================================
	   Item grid
	   ============================================================ */
	--grid-gap:                16px;

	/* ============================================================
	   Item cards
	   ============================================================ */
	--card-radius:             var(--radius-xs);
	--card-shadow:             var(--shadow-card);
	--card-hover-scale:        1.03;
	--card-hover-transition:   var(--tr-fast);
	--card-cover-h:            260px;

	/* ============================================================
	   Item detail overlay
	   ============================================================ */
	--detail-bg:               var(--col-pink-bg);
	--detail-pad:              20px;
	--detail-close-bar-h:      36px;

	/* Detail header */
	--detail-header-gap:       20px;

	/* Detail cover image */
	--detail-cover-radius:     var(--radius-xs);
	--detail-cover-shadow:     var(--shadow-detail-cover);
	--detail-cover-h:          280px;

	/* Detail title */
	--detail-title-font:       var(--font-body);
	--detail-title-size:       24px;
	--detail-title-weight:     bold;
	--detail-title-color:      var(--col-purple);
	--detail-title-lh:         1.3;

	/* Detail metadata */
	--detail-meta-size:        22px;
	--detail-meta-color:       var(--col-purple);

	/* Detail price */
	--detail-price-size:       32px;

	/* Detail body text */
	--detail-body-font:        var(--font-body);
	--detail-body-size:        20px;
	--detail-body-color:       var(--col-purple);
	--detail-body-lh:          1.5;

	/* ============================================================
	   About panel
	   ============================================================ */
	--about-heading-font:      var(--font-ui);
	--about-heading-size:      22px;
	--about-heading-color:     var(--col-pink);
	--about-body-color:        var(--col-purple);
	--about-body-lh:           1.5;

	/* ============================================================
	   Contact panel
	   ============================================================ */
	--contact-heading-font:    var(--font-ui);
	--contact-heading-size:    22px;
	--contact-heading-color:   var(--col-pink);
	--contact-text-color:      var(--col-purple);

	/* Newsletter */
	--newsletter-mt:           24px;

	/* ============================================================
	   Login panel
	   ============================================================ */
	--login-heading-font:      var(--font-ui);
	--login-heading-size:      22px;
	--login-heading-color:     var(--col-pink);

	/* Input fields */
	--input-bg:                var(--col-pink-light);
	--input-color:             var(--col-purple);
	--input-font:              var(--font-ui);
	--input-font-size:         14px;
	--input-radius:            var(--radius-lg);
	--input-pad:               10px 14px;
	--input-w:                 400px;
	--input-placeholder:       #cccccc;

	/* Textarea */
	--textarea-min-h:          140px;

	/* Send button */
	--send-btn-bg:             var(--col-purple);
	--send-btn-color:          var(--col-pink-bg);
	--send-btn-font:           var(--font-ui);
	--send-btn-font-size:      16px;
	--send-btn-radius:         var(--radius-lg);
	--send-btn-pad:            10px 28px;
	--send-btn-hover-opacity:  0.85;

	/* ============================================================
	   Panels (shared)
	   ============================================================ */
	--panel-pad:               20px;

	/* ============================================================
	   Placeholder text (empty tabs)
	   ============================================================ */
	--placeholder-color:       #cccccc;
	--placeholder-font:        var(--font-ui);
}


/* ============================================================
   Mobile overrides (< 768px)
   ============================================================ */
@media (max-width: 767px) {
	:root {
		/* Header */
		--header-pad:          15px 25px 15px;
		--header-min-h:        auto;
		--wordmark-h:          16px;
		--owl-icon-h:          28px;
		--globe-btn-h:         30px;

		/* Loading screen */
		--loading-owl-w:       160px;
		--loading-wordmark-w:  260px;
		--loading-wordmark-mt: 8px;
		--loading-spinner-mt:  18px;
		--loading-spinner-size: 26px;
		--loading-spinner-border: 2px;

		/* Main menu */
		--menu-left:           12px;

		/* Globe menu */
		--globe-menu-right:    12px;

		/* Content area — no bottom padding on mobile; the gap below
		   the window comes from --pane-search-gap via mobile-search. */
		--content-pad:         0 12px 0;

		/* Window box */
		--window-radius-bottom: var(--radius-md);

		/* Search box */
		--search-pad:          8px 12px;

		/* Panels */
		--panel-pad:           14px;

		/* Item cards */
		--card-cover-h:        170px;

		/* Item detail */
		--detail-header-gap:   12px;
		--detail-cover-h:      180px;
		--detail-title-size:   20px;
		--detail-meta-size:    18px;
		--detail-body-size:    18px;
		--detail-price-size:   26px;

		/* Header right icons */
		--header-icon-gap:     14px;
		--account-btn-h:       30px;
		--cart-btn-h:          30px;
	}
}