/*
Theme Name: Muslim Kidz Shop
Theme URI: https://muslimkidz.com
Author: Muslim Kidz
Author URI: https://muslimkidz.com
Description: Premium WooCommerce theme for Muslim Kidz™ — a joyful, premium Islamic kids' e-commerce brand. Mobile-first, illustration-led design with a custom lavender/aubergine palette. Built with custom PHP, no page builders.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
WooCommerce: 6.0 - 9.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: muslimkidz-shop
Tags: e-commerce, woocommerce, shop, kids, education, islamic

Muslim Kidz Shop is distributed under the terms of the GNU GPL.
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  /* Brand primary / secondary */
  --mk-primary:        #D5C0E7;   /* soft lavender */
  --mk-primary-dark:   #B89BD1;
  --mk-primary-light:  #F1E9F8;

  --mk-secondary:      #231237;   /* deep aubergine */
  --mk-secondary-light:#3B2459;

  /* Accent palette */
  --mk-yellow:       #FFC857;
  --mk-yellow-dark:  #E6A823;
  --mk-yellow-light: #FFF6E5;

  --mk-green:        #5FBE8C;
  --mk-green-dark:   #3F9E6C;
  --mk-green-light:  #E9F8F0;

  --mk-blue:         #5AA9E6;
  --mk-blue-dark:    #3A87C4;
  --mk-blue-light:   #EAF4FC;

  --mk-coral:        #FF8B6A;
  --mk-coral-dark:   #E96A47;
  --mk-coral-light:  #FFEEE8;

  /* Age-group color coding */
  --mk-age-2-4:   var(--mk-yellow);
  --mk-age-5-7:   var(--mk-coral);
  --mk-age-8-10:  var(--mk-blue);
  --mk-age-11-14: var(--mk-green);

  /* Neutrals */
  --mk-bg:          #FFFFFF;
  --mk-surface:     #FAF7FC;
  --mk-surface-2:   #F1EAF6;
  --mk-border:      #E7DCEF;
  --mk-text:        #231237;
  --mk-text-muted:  #6E6480;
  --mk-white:       #FFFFFF;

  /* Radii */
  --mk-radius-sm:   10px;
  --mk-radius:      18px;
  --mk-radius-lg:   28px;
  --mk-radius-pill: 999px;

  /* Shadows */
  --mk-shadow-sm: 0 2px 8px rgba(35,18,55,.06);
  --mk-shadow:    0 10px 28px rgba(35,18,55,.10);
  --mk-shadow-lg: 0 20px 48px rgba(35,18,55,.16);

  /* Typography */
  --mk-font-display: 'Baloo 2', system-ui, -apple-system, sans-serif;
  --mk-font-body:    'Nunito', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --mk-text-display: clamp(2rem, 1.5rem + 2.5vw, 3.4rem);
  --mk-text-h1:       clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem);
  --mk-text-h2:       clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  --mk-text-h3:       1.25rem;
  --mk-text-body:     1rem;
  --mk-text-small:    0.875rem;

  /* Spacing scale */
  --mk-space-1: 4px;
  --mk-space-2: 8px;
  --mk-space-3: 16px;
  --mk-space-4: 24px;
  --mk-space-5: 32px;
  --mk-space-6: 48px;
  --mk-space-7: 64px;
  --mk-space-8: 96px;

  /* Layout */
  --mk-container: 1280px;
  --mk-header-height: 80px;
  --mk-bottom-nav-height: 60px;
  --mk-announcement-height: 40px;
}

/* =========================================================
   BASE
   ========================================================= */
*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--mk-font-body);
  color: var(--mk-text);
  background: var(--mk-bg);
  font-size: var(--mk-text-body);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.mk-display{
  font-family: var(--mk-font-display);
  font-weight: 800;
  color: var(--mk-secondary);
  line-height: 1.2;
}

a{ color: var(--mk-blue-dark); text-decoration: none; }
a:hover{ color: var(--mk-coral-dark); }

img{ max-width: 100%; height: auto; display: block; }

:focus-visible{
  outline: 3px solid var(--mk-blue);
  outline-offset: 2px;
}

[lang="ar"], .mk-arabic{
  font-family: 'Lateef', 'Noto Naskh Arabic', serif;
  direction: rtl;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.container{ max-width: var(--mk-container); }

.visually-hidden-focusable:not(:focus):not(:active){
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}